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_map
php 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 the Blog 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.