How to create a new widget (Magento 2)

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:flush

go 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.