Widgets are the elements used for adding static or dynamic content to the CMS pages and blocks of Magento 2. So widgets are a greater tool to insert or edit content in a CMS page blocks or page to add more functionality to your store. Widgets are something like creating functionality and using it on any page or block, so they become reusable components of Magento 2.
In this article, we will create a custom widget that will help you understand how we can create a custom widget and then use it. So this article is written to introduce a 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 widgettitle (with label Title) and widgetcontent (with label Content) as a parameter to be displayed wherever the widget is called (Look code inside parameters). So now our admin work is done, and you can check the widget listed in Content > Widgets and then click on Add Widget, and in Type Dropdown you will find Bizspice Sample Widget, which 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”
}
We have assigned a custom template file inside samplewidget.phtml the $_template variable in the above code. In the phtml file, we will define what should show in the frontend where we use this widget.
Step5. Create samplewidget.phtml inside app/code/Bizspice/CustomWidget/view/frontend/templates/widget
As we have created two fields named widgettitle and widgetcontent in the widget, we will call them for the 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; ?>We have created our first custom widget and are ready to use it.
How to Use: We can use the widget in two ways
- From CMS block or page directly.
For this, go to a specific block or page. On Content, click on Insert widget
Then select your widget from the list and put content on the component(text boxes in this case) we created.
- 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 the next article, we will add some advanced functionalities to our widget to get a good understanding of Widgets.