Dep. Comercial +40 365-882.777 +40 722-241.273 Lun-Vin: 10:00-18:00
View Categories

Cum adaug widget-uri personalizate în Magento 2?

2 minute de citit

Un widget este un bloc informațional sau funcțional (buton, banner, bară de căutare, bloc de text) care poate fi plasat pe paginile site-ului. Crearea unui widget personalizat necesită cod. Fragmentele de mai jos sunt exemple și trebuie adaptate.

1. Declararea widget-ului

În etc/widget.xml:

<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
    <widget class="Vendor\Learning\Block\Widget\Test" id="vendor_test_widget">
        <label>My New Widget</label>
        <description>This is a test widget</description>
        <parameters>
            <parameter name="title" xsi:type="text" required="true" visible="true" sort_order="10">
                <label>Title</label>
            </parameter>
            <parameter name="size" xsi:type="select" visible="true" sort_order="20">
                <label translate="true">Size</label>
                <options>
                    <option name="s" value="S"><label>S</label></option>
                    <option name="m" value="M" selected="true"><label>M</label></option>
                    <option name="l" value="L"><label>L</label></option>
                </options>
            </parameter>
        </parameters>
    </widget>
</widgets>

Adaugă și dependența de Magento_Widget în etc/module.xml (secțiunea <sequence>).

2. Clasa de bloc

În Vendor/Learning/Block/Widget/Test.php:

namespace Vendor\Learning\Block\Widget;
use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface;
class Test extends Template implements BlockInterface {
    protected $_template = 'widget/test.phtml';
}

3. Șablonul

În Vendor/Learning/view/frontend/templates/widget/test.phtml:

<h3><?= $block->escapeHtml($block->getData('title')) ?></h3>
<p><?= $block->escapeHtml(__('Size:')) ?> <?= $block->escapeHtml($block->getData('size')) ?></p>

4. Aplicarea

php bin/magento module:enable Vendor_Learning
php bin/magento setup:upgrade
php bin/magento cache:clean

Widget-ul va fi disponibil în Content → Elements → Widgets. Detalii în documentația oficială.

Actualizat la 26/07/2026