How to Create Widget in Magento 2
Widget is an essential element in Magento 2 and helps the visitors view and surf your website with ease is important. As a store admin, you can take the advantage of the widget to improve the storefront under the lively interface. The widgets allow showing the static information or dynamic content marketing.
Widgets are similar to static blocks, they allow to insert various content into static pages or static blocks. As a rule, widgets have configurable parameters that can be set up when adding it via admin panel.
I want to illustrate some of the implementations of Magento widgets such as.
- Dynamic product data
- Dynamic lists of the recently viewed products
- Promotional banners
- Interactive navigation elements and action blocks
- Dynamic flash elements that are inserted in content pages
In fact, the method to create a widget in Magento 2 is almost the as same as building an optimized front-end extension with a simple module. Hence, there is no complexity since customization for widgets is much simpler than the helloworld module.
Please follow the 4 simple steps below for create a Magento 2 widget:
- Step 1: Initialize widget
- Step 2: Create a widget template file
- Step 3: Create a widget block class
- Step 4: Post widget
Step 1: Initialize Widget
Create a file VendorName/Module/etc/widget.xml
with the following content.
saveCopyzoom_out_map<?xml version="1.0" ?>
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:helloworld:Magento_Widget:etc/widget.xsd">
<widget class="VendorName\Module\Block\Widget\Posts" id="vendorName_module_posts">
<label>Blog Posts</label>
<description>Posts</description>
<parameters>
<parameter name="posts" sort_order="10" visible="true" xsi:type="text">
<label>Custom Posts Label</label>
</parameter>
</parameters>
</widget>
</widgets>
Step 2: Create a Widget Template File
Create a file with the path VendorName/Module/view/frontend/templates/widget/posts.phtml
, and add this code to it.
saveCopyzoom_out_map<?php if($block->getData('posts')): ?>
<h2 class='posts'><?= $block->getData('posts'); ?></h2>
<p>This is blog widget. Perform your logic here.</p>
<?php endif; ?>
Step 3: Create a Widget Block Class
Create block file at VendorName/Module/Block/Widget/Posts.php
saveCopyzoom_out_map<?php
namespace VendorName\Module\Block\Widget;
use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface;
class Posts extends Template implements BlockInterface
{
protected $_template = "widget/posts.phtml";
}
?>
Step 4: Post Widget
Before posting the widget, you should flush cache by opening SSH terminal and run following command in the root directory of Magento 2.
saveCopyzoom_out_mapphp bin/magento cache:flush
- Then go to
Admin > Content > Pages > Homepage > Edit
- In the Content tab, click on
Insert Widget
icon and you will see theBlog posts
in the widget list.
That's it!!
We hope this simple article is helped you to know How to create a widget in Magento 2.
Do comment below in case if you need any help on this. Don’t forget to bookmarke this for you feature refrence.
P.S. share this post with other.