How to Create a Custom Widget in Magento 2

Basically, Magento widget is a Magento extension with definite functionality in your store.

The default Magento supports the following types of widget:

• categories
• tag cloud
• navigation menu
• calendar
• search
• recent posts, etc.

The Magento widgets assist in better user experience and functionality of the store. Apart from these default widgets and its functionality, you may need advanced features. Creating a custom widget in Magento 2 is like developing an independent extension. Customize a widget to extend the functionality of the core widgets or create your own custom widget in Magento 2.

Widgets are useful in the administration to add interactive interfaces and features in the front-end of Magento 2 store. Learn how to create a custom widget in Magento 2 by following the steps assembled here.

Code to Create Custom Widget in Magento 2:

File setup/Our module

Initially, we need to create the module setup file.

Create file app/code/Meetanshi/CustomWidget/etc/module.xml. Paste the following code snippet in that file.

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
    <module name="Meetanshi_CustomWidget" setup_version="1.0.0">
    </module>
</config>

Widget Declaration File

Create the widget file app/code/Meetanshi/CustomWidget/etc/widget.xml with content.

<?xml version="1.0" encoding="UTF-8"?> 
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../Magento/Widget/etc/widget.xsd">
   <widget id="meetanshi_customwidget" class="Meetanshi\CustomWidget\Block\Widget\ContactInformations">
      <label translate="true">Contact Informations Widget</label>
      <description>Widget in Magento2</description>
      <parameters>
         <parameter name="fullname" xsi:type="text"  visible="true" sort_order="0" >
            <label translate="true">Full Name</label>
         </parameter>
         <parameter name="age" xsi:type="text"  visible="true" sort_order="10" >
            <label translate="true">Age</label>
         </parameter>
         <parameter name="gender" xsi:type="select" source_model="Meetanshi\CustomWidget\Model\Config\Source\Gender" visible="true" sort_order="10" >
            <label translate="true">Gender</label>
         </parameter>
      </parameters>
   </widget>
</widgets>

The first code:

• Declare our widget with the unique identification is meetanshi_customwidget and the class attribute is used to map to widget file app/code/Meetanshi/CustomCode/Block/Widget/ContactInformations.php
• The field description will show description, introduce about module when created.
• We need to declare all the option of module inside the field tag“parameters”
• And the source_model attribute maps to the model file app/code/Meetanshi/CustomWidget/Model/Config/Source/Gender.php, where we’ll get our options for the drop-down.

To create the model file:

app/code/Meetanshi/CustomWidget/Model/Config/Source/Gender.php

<?php
namespace Meetanshi\CustomWidget\Model\Config\Source;

class Gender implements \Magento\Framework\Option\ArrayInterface
{
    public function toOptionArray()
    {
        return [
            ['value' => 'mal', 'label' => __('Male')],
            ['value' => 'female', 'label' => __('Female')]];
    }
}

To create the block file:

Meetanshi\CustomWidget\Block\Widget\ContactInformations  is declared in the above code snippet. In this file, we assign custom template file inside _toHtml() method

<?php
namespace Meetanshi\CustomWidget\Block\Widget;

class ContactInformations extends \Magento\Framework\View\Element\Template implements \Magento\Widget\Block\BlockInterface
{
    public function _toHtml()
    {
        $this->setTemplate('widget/contact_informations.phtml');
    }
}

To create the template file

<?php
$fullname = $this->getData('fullname');
$age = $this->getData('age');
$gender = $this->getData('gender');
?>
<ul>
   <?php if($fullname){ ?>
   <li><?php echo $fullname ?></li>
   <?php } ?>
   <?php if($age){ ?>
   <li><?php echo $age ?></li>
   <?php } ?>
   <?php if($gender){ ?>
   <li>
      <?php if($gender){
         echo __('Male')
      }else{
         echo __('Female');
      } ?>
   </li>
   <?php } ?>
</ul>

• Meetanshi\CustomWidget\view\frontend\widget\contact_informations.phtml – which will show all widget data on site.
• You need to clear all the caches from the backend of Magento or delete folder var/cache.
• Now, go to Administrator Page => Content => Pages and add a new Page using Add New page button, then click Widget icon in Content Tab and you need fill information for all fields.
• Save CMS page and go to the front end of page to check your widget.

A Magento 2 store needs a lot of features to function smoothly and to attract more visitors. Having an appealing user experience is essential in E-commerce and that’s where widgets come into the picture!

You can also add snowfall effect to get some seasonal touches to your website to enhance the user experience, also can create an awesome user interface with custom widgets and benefit your store