Widgets are incredible features that allow you to add dynamic or static content to CMS pages and blocks in your Magento 2 website. They are reusable and essential tools that provide multiple functionalities that can be utilized in the CMS block of a Magento 2 store.
When added to the Magento store, Widgets enable visitors to surf and view your store with ease. They create eye-catching website templates and designs that enrich user experience while offering unprecedented control and flexibility on the admin panel.
This tutorial will help you create a custom widget on your Magento 2 store to boost visitors’ experience and improve navigation within the store.
Ready? Let’s get started.
Step 1 – Creating A New Module
The first step when creating a custom widget in Magento 2 is establishing a new module. The module requires a module folder and a namespace, in our case, will use HostAdvice as the namespace and CustomWidget as the module folder name. The module folder will be located in the vendor folder titled app/code.
For the sake of this tutorial, we’ll use app/code/HostAdvicel/CustomWidget/composer.json. The composer will load this file when we run it, even though we’ll not be using the composer with the module.
Step 2 – Creating registration.php
We need to register the module with Magento. To accomplish this, first, create a register.php in the location app/code/HostAdvice/CustomWidget/registration.php using the code below.
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Toptal_CustomWidget',
__DIR__
);Next, use the code below to create a registration file, module.xml in the location app/code/HostAdvice/CustomWidget/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="Toptal_CustomWidget" setup_version="1.0.0"/> </config>
Step 3 – Initializing the widget
Once you create the required registration files, the next step is initializing the widget. Create a widget.xml configuration file in the location app/code/HostAdvice/CustomWidget/etc/widget.xml. Use the following command:
<?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="HostAdvice\CustomWidget\Block\Widget\Samplewidget" id="HostAdvice_customwidget_samplewidget">
<label>HostAdvice 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="textarea">
<label>Content</label>
</parameter>
</parameters>
</widget>
</widgets>In the command above, we’ve labeled two input fields, Title, and Content. Whenever, the new widget is called, the values of both fields will be displayed. Also, in the <widget> tag, we’ve declared the block class, HostAdvice\CustomWidget\Block\Widget\Samplewidget to direct the new widget to utilize the particular template.
Step 4 – Creating A Widget Block
Next, create a block field titled Samplewidget.php, in the location HostAdvice/CustomWidget/Block/Widget/, using the code below:
<?php
namespace HostAdvicel\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 command, HostAdvice\CustomWidget\Block\Widge\Samplewidget is properly declared and a custom template is assigned inside the $_template variable.
Now , we’ll use the command below to create a template file samplewidget.phtml, in the location HostAdvice/CustomWidget/view/frontend/templates/widget.
<?php if($block->getData('widgettitle')): ?>
<h2 class='cloudways-title'><?php echo $block->getData('widgettitle'); ?></h2>
<?php endif; ?>
<?php if($block->getData('widgetcontent')): ?>
<h2 class='cloudways-content'><?php echo $block->getData('widgetcontent'); ?></h2>
<?php endif; ?>
In the above code, the widget parameters have been picked by calling $this->getData('widgettitle'); and $this->getData('widgetcontent'); values.Step 5 – Posting The Widget
By now, your custom widget is successfully created. Log in to Magento 2 admin area and select Content then Pages.
Click Select in the Homepage option and select Edit.
Expand the Content section and click the Insert Widget icon to post the custom widget.
This will take you to the Insert Widget area. Click the arrow in the Widget Type, select HostAdvice Sample Widget, from the dropdown list.
In the Widgets Options, enter the Content and Title to be displayed on the homepage, and click Insert Widget.
Lastly, to make any changes, flush the Magento 2 cache by launching the CLI and running the commands below:
php bin/magento cache:clean php bin/magento cache:flush
Load your store’s front-end.
Conclusion
That’s it! You have successfully developed and posted a new custom widget in your Magento 2 store. The new widget will be crucial to your front-end operation since it offers more creative freedom and allow you to market your products with ease.
Check out these top 3 Magento hosting services:
- Your query to the best web hosting can end by clicking on this link.
