How to create Magento 2 widget

Magento has been the benchmark set amongst the e­-commerce frameworks available in the market. Magento Widgets are small Magento extensions with a predefined set of configuration options. Using them the store administrators can enrich the front-end blocks functionality. They provide great control and flexibility in creating informational and marketing content. Personally I see the widgets plus WYSIWYG implementation as a great boost to site owner friendly backend section. In this post we’ll learn how to create and use widgets for Magento 2.

Some of the possible implementations of the Magento widgets are:

• Get dynamic product data
• Set lists with the recently viewed items
• Marketing images placed on different Magento front-end locations
• Embedded in content pages

and many more!!

I assume that you’ll familiar with the file structure of the Magento 2 extensions. If you a new Magento2 developer and you have no experience with Magento2 extension, you need to read the following tutorial

Magento Guide

So, here is the list of files we’ll create step by step:

– app/code/Hiddentechies/ContactWidget/etc/module.xml
– app/code/Hiddentechies/ContactWidget/etc/widget.xml
– app/code/Hiddentechies/ContactWidget/registration.php
– app/code/Hiddentechies/ContactWidget/Block/Widget/Mwcontact.php
– app/code/Hiddentechies/ContactWidget/view/frontend/templates/widget/contact_widget.phtml

I have used [Hiddentechies] as module Vendor Name and [ContactWidget] as extension name.

Lets start step by step process of creating widget for Magento 2.

1) etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Hiddentechies_ContactWidget" setup_version="1.0.0" />
</config>

2) etc/widget.xml

<?xml version="1.0" encoding="UTF-8"?>

<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
    <widget id="custom_widget" class="Hiddentechies\ContactWidget\Block\Widget\Mwcontact">
        <label translate="true">Hiddentechies - Contact Widget</label>
        <description>Hiddentechies - Sample Contact Widget</description>
        <parameters>
            <parameter name="name" xsi:type="text" visible="true" required="true" sort_order="0" >
                <label translate="true">Name</label>
            </parameter>
            <parameter name="address" xsi:type="textarea" visible="true" sort_order="10">
                <label translate="true">Address</label>
            </parameter>
            <parameter name="mobile" xsi:type="text" visible="true" source_model="Magento\Config\Model\Config\Source\Yesno" sort_order="20">
                <label translate="true">Mobile No</label>
            </parameter>
            <parameter name="website" xsi:type="text" visible="true" sort_order="30">
                <label translate="true">Website URL</label>
            </parameter>
        </parameters>
    </widget>
</widgets>

3) registration.php

<?php

use \Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(
        ComponentRegistrar::MODULE, 
        'Hiddentechies_ContactWidget',
        __DIR__
);

4) Block/Widget/Mwcontact.php

<?php
namespace Hiddentechies\ContactWidget\Block\Widget;

class Mwcontact extends \Magento\Framework\View\Element\Template implements \Magento\Widget\Block\BlockInterface
{
    protected function _construct()
    {
        parent::_construct();
        $this->setTemplate('widget/contact_widget.phtml');
    }
}

5) view/frontend/templates/widget/contact_widget.phtml

<div class="contact-widget">
    <table>
        <tr>
            <td>Name</td>
            <td><?php echo $this->getData('name'); ?></td>
        </tr>
        <tr>
            <td>Address</td>
            <td><?php echo $this->getData('address'); ?></td>
        </tr>
        <tr>
            <td>Mobile</td>
            <td><?php echo $this->getData('mobile'); ?></td>
        </tr>
        <tr>
            <td>Website URL</td>
            <td><?php echo $this->getData('website'); ?></td>
        </tr>
    </table>
</div>

Thats it. Now add this widget to app/code folder and run upgrade command. Clear your cache and try to add this widget to any CMS page. You can see result on CMS page on frontend.

Enjoy cool stuff!

Team HiddenTechies

Write an article about ecommerce that help people to grow their ecommerce business. You’ll find best ecommerce guide, news, tips & more!