How to Create a Custom Widget in Magento 2
Widget is a greater tool to insert or edit content into a CMS Page Block or Page, so I am so happy to bring you Create Widget in Magento 2 topic. Reading the post will help you understand: “What are the widgets in Magento 2?” and “How to use them on Magento 2 store”. With this simple instruction, it is easy to create and customize new custom widgets in Magento 2.
What is the widget in Magento 2?
Firstly, we all will get to know the definition of Widget in Magento 2.
Widgets are the powerful functionalities in Magento 2 configuration. As a store admin, you can take the advantage of the widget to improve the storefront under the lively interface. The widgets allow showing static information or dynamic content to CMS pages or blocks. You can add widgets in any CMS block of Magento 2 to display such content or elements, for example:
- 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
The customization of the widgets in Magento 2 is similar to an optimized front-end extension with a simple module. It’s hassle-free to create a Magento 2 widget because it is the same as when you create a HelloWorld excepting from some additional files. Hence, although you don’t have any experience in programming, it is easy to improve your storefront with the dynamic blocks of content.
Here are available default widgets:
- CMS Static Block
- CMS Page Link
- Recently Compared Products
- Recently Viewed Products
- Catalog Products List
- Catalog Product Link
- Catalog New Products List
- Catalog Category Link
With this guide below, you can create your own widget in Magento 2 easily and quickly.
4 steps to creating a widget in Magento 2
- Step 1: Declare widget
- Step 2: Create a widget template file
- Step 3: Create widget Block class
- Step 4: Flush cache and posts
Step 1: Declare widget widget.xml
Create a file etc/widget.xml
with the following content
<?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="Mageplaza\HelloWorld\Block\Widget\Posts" id="mageplaza_helloworld_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 in Magento 2
File: view/frontend/templates/widget/posts.phtml
<?php if($block->getData('posts')): ?>
<h2 class='posts'><?php echo $block->getData('posts'); ?></h2>
<p>This is sample widget. Perform your code here.</p>
<?php endif; ?>
Step 3: Create widget Block class
Create block file: Block/Widget/Posts.php
<?php
namespace Mageplaza\HelloWorld\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: Flush cache and posts
- You should flush Magento cache, read this tutorial: Flush Magento cache
- Run a posts.
Go to admin panel > Content > Pages > Home page > Edit
In Content
tab, click on Insert Widget
icon
You will see the Blog posts
in widget list
Conclusion
Though it requires no high level of programming for the store admins to add features and interactive content to the website by widgets, they still need to understand how it works in Magento 2 to create a widget. This guide gets you through the process of utilizing widgets from the functionality standpoint to streamline your Magento 2 store. If you have any questions, let us know in the comment section. Thanks for reading.
Related Post
- How to create a simple Hello World module for Magento 2
- Magento 2 Block Template Ultimate Guides
- How to Create Module in Magento 2
- How to Create Controller in Magento 2
- How to create CRUD Models in Magento 2
- How to Create Magento 2 Block, Layout and Templates
- Configuration - System.xml
- How To Create Admin Menu In Magento 2
- Admin ACL
- Admin Grid
People also searched for
- magento 2 widget
- magento 2 create widget
- magento 2 create widget programmatically
- magento 2 custom widget
- magento 2 create custom widget
- create widget magento 2
- widget magento 2
- how to create widget in magento 2
- magento2 widget
- create widget in magento 2
- magento 2 add widget programmatically
- magento 2 widget tutorial
- magento 2 widget parameters
- magento 2 custom widget product list
- magento 2 widget.xml
- widgets magento 2
- magento 2 widget template
- devdocs magento2
- magento widgets
- 2.3.x, 2.4.x