How to create custom widget in Magento 2

How to create custom widget in Magento 2

Widgets are the elements which used for adding static or dynamic content to the CMS pages and blocks of Magento 2. So widgets are greater tool to insert or edit content into a CMS page blocks or page to add more functionality on your store. Widgets are something like creating a functionality and use it on any page or blocks so they become reusable components of Magento 2.

In this article we are going to create a custom widget which will help you to understand how we can create custom widget and then use it, so this article is for introduction of custom widget and we will be sure to make part 2 of this, where we will add more functionality to our custom widget.

So, let’s start with creating a new module where we will learn the step-by-step process of creating custom widgets in Magento 2.

Step 1. To register a new module; create registration.php in   app/code/Bizspice/CustomWidget/

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

\Magento\Framework\Component\ComponentRegistrar::MODULE,

            'Bizspice_CustomWidget',

            __DIR__

);

 

Step 2. Now create module.xml in app/code/Bizspice/CustomWidget/etc

<?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="Bizspice_CustomWidget" setup_version="1.0.0"/>

</config>

Now, essential files for module are created, so we will focus on creating widget now.

Step 3. Declare widget by creating  widget.xml in   app/code/Bizspice/CustomWidget/etc

<?xml version="1.0" ?>

<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">

<widget class="Bizspice\CustomWidget\Block\Widget\Samplewidget" id="customwidget_samplewidget">

    <label>Bizspice Sample Widget</label>

    <description></description>

             <parameters>

                         <parameter name="widgettitle" sort_order="10" visible="true" xsi:type="text">

                                     <label>Title</label>

                         </parameter>

                         <parameter name="widgetcontent" sort_order="20" visible="true" xsi:type="text">

                                     <label>Content</label>

                         </parameter>

             </parameters>

    </widget>

</widgets>

Here we have created 2 textboxes in admin named as widgettitle (with label Title) and widgetcontent (with label Content) as parameter to be displayed wherever the widget is called (Look code inside parameters). Now our admin work is done and you can check widget listed in Content > Widgets and then Click on Add Widget and in Type Dropdown you will find Bizspice Sample Widget, that is our custom widget.

These two fields that we listed will look like this

Also our <widget> tag contain block class “Bizspice\CustomWidget\Block\Widget\Samplewidget”  which let widget know which template file have to use.

Step 4. As in our widget.xml we declared block class so now we will create the blocks

Create Samplewidget.php inside app/code/Bizspice/CustomWidget/Block/Widget

<?php

namespace Bizspice\CustomWidget\Block\Widget;

use Magento\Framework\View\Element\Template;

use Magento\Widget\Block\BlockInterface;

class Samplewidget extends Template implements BlockInterface

{

protected $_template = "widget/samplewidget.phtml"

}

 

In the above code we have assigned a custom template file named inside samplewidget.phtml the $_template variable. In the phtml file we will define what should show in frontend where we use this widget.

Step 5. Create samplewidget.phtml inside app/code/Bizspice/CustomWidget/view/frontend/templates/widget

As we have created two field named widgettitle and widgetcontent in widget, we will call them for frontend.

<?php if($block->getData('widgettitle')): ?>

    <h2 class='title'><?php echo $block->getData('widgettitle'); ?></h2>

<?php endif; ?>

<?php if($block->getData('widgetcontent')): ?>

    <h2 class='content'><?php echo $block->getData('widgetcontent'); ?></h2>

<?php endif; ?>

 

Done, we have created our first custom widget and we are ready to use it.

How to Use: We can use widget in two ways

  1. From CMS block or page directly.

For this go to specific block or page. On Content click on Insert widget

 Then select your widget from list and put content on component(text boxes in this case) we created for widget

  1. By creating widget from Content > Widgets and then clicking on Add Widget and fill all the field and select the portion of site where we have to use the widget.

And fill widget options also

Now when you check frontend.

 

And that’s it. Now as you know, how to create the widget in Magento 2, In next article we will add some advanced functionalities in our widget so that you can get a good understanding of Widgets.