How to create a new widget (Magento 2)

9057 단어 PHPMagento2

Custom widget


Widgets provide powerful features in Magento 2, that is used to add dynamic or static content to store’s pages.

Create a new widget


Create a new widget step:
1. Declaring the widget
2. Adding widget parameters
3. Check the widget
4. Create the block
5. Create the template
6. Check the Frontend

Declaring the widget


now create a file named etc/widget.xml that define basic information about the widget such as Name, description, Block Class.
Karabiner/Widget/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="Karabiner\Widget\Block\Widget\Test" id="karabiner_test_widget">
        <label>New Widget</label>
        <description>This is a New Widget</description>
        <parameters>
            ...
        </parameters>
        <containers>
            ...
        </containers>
    </widget>
</widgets>
We need to also add a dependency to Magento_Widget in the module.xml file.
Karabiner/Widget/etc/module.xml
...
<sequence>
    <module name="Magento_Widget" />
</sequence>
...

Adding widget parameters


As a parameter, we are able to use any of these field types:
text
select
multiselect
block
Add a text and a select field:
Karabiner/Widget/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="Karabiner\Widget\Block\Widget\Test" id="karabiner_test_widget">
        ...
        <parameters>
            <parameter name="title" xsi:type="text" required="true" visible="true" sort_order="10">
                <label>Label</label>
            </parameter>
            <parameter name="size" xsi:type="select" visible="true" required="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>

Check the widget


after run cache clear comand php bin/magento cache:flushgo to Admin panel > Content > Pages > Homepage(or any page) > Edit
In the Content tab, click on Insert Widget icon.


Create the block


Create the block class that we provided on the widget’s initialization, responsible for rendering it on the frontend.
Karabiner/Widget/Block/Widget/Test.php
namespace Karabiner\Widget\Block\Widget;

use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface;

class Test extends Template implements BlockInterface
{
    protected $_template = "widget/test.phtml";
}

Create the template


And finally, create the template that will be used for showing the widget’s data on the frontend.
Karabiner/widget/view/frontend/templates/widget/test.phtml
<?php
/** \Karabiner\Widget\Block\Widget\Test $block */
?>
<h3><?= $block->escapeHtml($block->getData('title')) ?></h3>
<h3><?= $block->escapeHtml(__('Size:')) ?> <?= $block->escapeHtml($block->getData('size')) ?></h3>

Check the Frontend


Clean the Magento cache with the following command:
php bin/magento cache:flush
The widget is now shown on the frontend.

좋은 웹페이지 즐겨찾기