What is Magento 2 Widget? How to Add Widget Parameters in Magento 2?

Magento 2 Guides | Tips | Magento Tutorial |

January 11, 2022

What is Magento 2 Widget? How to Add Widget Parameters in Magento 2?

Tags Widget Parameters Magento 2 Magento 2 widget configuration

Today, we’re going to teach you guys about Magento 2 widgets and how to add widget parameters in your Magento 2 store.

In Magento 2, widgets are nothing but snippets of code that allowed store owners to display dynamic content on the frontend.

In simple words, Magento 2 widgets allow you to place images, static blocks, text, GIFs, etc., at any place in your Magento 2 store.

And by using widgets, you can create new opportunities to involve & engage visitors in your store.

However, setting up widgets with parameters in Magento 2 is both a complex and complicated process that required extensive coding.

But in this post, we’re going to show you exactly how to set up widget parameters in a Magento 2 store.

How to Add Widget Parameters in Magento 2

Please follow the below steps to learn how to add Magento 2 widget parameters.

Step - 1

First of all, you need to declare the widget. For that, open the widget.xml file and paste the following code:

<widgetsxmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">

    <widgetclass="MageDelight\Learning\Block\Widget\Test"id="orange_test_widget">

        <label>My New Widget</label>

        <description>This is a test widget!!!</description>

        <parameters>

            ...

        </parameters>

        <containers>

            ...

        </containers>

    </widget>

</widgets>

After this, you need to create a dependency on Magento_Widget.

For this, open the module.xml file and paste the following code:

...

<sequence>

    <modulename="Magento_Widget"/>

</sequence>

...

Step - 2

The next step is to add the widget parameters.

Now, there are multiple parameters you can use in your Magento 2 widget like:

Select
Multiselect
Text
Block

Out of these parameters, let’s suppose that you want to add ‘text’ and ‘select’ parameters.

For that, you need to use the following code:

<widgetsxmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">

    <widgetclass="MageDelight\Learning\Block\Widget\Test"id="orange_test_widget">

        ...

        <parameters>

            <parametername="title"xsi:type="text"required="true"visible="true"sort_order="10">

                <label>Label</label>

            </parameter>

            <parametername="size"xsi:type="select"visible="true"required="true"sort_order="20">

                <labeltranslate="true">Size</label>

                <options>

                    <optionname="s"value="S">

                        <label>S</label>

                    </option>

                    <optionname="m"value="M"selected="true">

                        <label>M</label>

                    </option>

                    <optionname="l"value="L">

                        <label>L</label>

                    </option>

                </options>

            </parameter>

        </parameters>

    </widget>

</widgets>

Step - 3

Once you’ve added your parameters, it’s time to check the widget.

Simply open the CLI & execute the following two commands.

bin/magento module:disable Vendor_Module

bin/magento module:enable Vendor_Module

Now, clear the cache and the new widget will be available for use as shown in the screenshot below.

Step - 4

After that, you now need to create a block class, which will handle the rendering on the frontend side of your Magento 2 store.

So, go to the MageDelight/Learning/Block/Widget/Test and paste the below code:

namespaceMageDelight\Learning\Block\Widget;

useMagento\Framework\View\Element\Template;

useMagento\Widget\Block\BlockInterface;

classTestextendsTemplateimplementsBlockInterface

{

    protected$_template="widget/test.phtml";

}

Step - 5

Next, you need to create a template for your Magento 2 widget.

Go to the MageDelight / Learning / view / frontend / templates / widget / test.phtml file and paste the below code:

<?php

/** \MageDelight\Learning\Block\Widget\Test $block */

?>

<h3><?=$block->escapeHtml($block->getData('title'))?></h3>

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