{"id":1406,"date":"2024-04-26T17:49:52","date_gmt":"2024-04-26T12:19:52","guid":{"rendered":"https:\/\/magecurious.com\/blog\/?p=1406"},"modified":"2025-01-28T13:41:20","modified_gmt":"2025-01-28T08:11:20","slug":"how-to-create-custom-widget-in-magento-2","status":"publish","type":"post","link":"https:\/\/magecurious.com\/blog\/how-to-create-custom-widget-in-magento-2\/","title":{"rendered":"How To Create A Custom Widget In Magento 2"},"content":{"rendered":"\n

Hello Everyone,           <\/p>\n\n\n\n

In this blog, we will learn how to create a custom widget in Magento 2.<\/p>\n\n\n\n

Widget is a feature of Magento to display dynamic content to page and block.<\/p>\n\n\n\n

By default, Magento 2 provides widgets like CMS Page Link, CMS Static Block, Orders, and returns, etc.<\/p>\n\n\n\n

But sometimes we also need to create our custom widget.<\/p>\n\n\n\n

Without wasting your time, let us guide you straight away. Follow the easy steps given below to Create a Custom Widget in Magento 2<\/a>. <\/p>\n\n\n\n

STEPS FOR CREATE CUSTOM WIDGET IN MAGENTO 2<\/h2>\n\n\n\n

Step 1: Create widget.xml file<\/strong><\/p>\n\n\n\n

app\/code\/Vendor\/Extension\/etc\/widget.xml<\/strong><\/p>\n\n\n

\n<?xml version="1.0" encoding="UTF-8"?>\n\n<widgets xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance"\n\n\u00a0\u00a0\u00a0\u00a0xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc\/widget.xsd">\n\n\u00a0\u00a0\u00a0\u00a0<widget id="magecurious_custom_widget" class="Vendor\\Extension\\Block\\Widget\\Widget">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label>Magecurious Custom Widget<\/label>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<description><\/description>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<parameters>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<parameter name="title" xsi:type="text" visible="true" required="true">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label translate="true">Title<\/label>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/parameter>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<parameter name="description" xsi:type="block" visible="true" required="true">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label translate="true">Description<\/label>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<block class="Vendor\\Extension\\Block\\Adminhtml\\Widget\\TextArea"\/>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/parameter>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/parameters>\n\n\u00a0\u00a0\u00a0<\/widget>\n\n<\/widgets>\n<\/pre><\/div>\n\n\n
Step 2: Create a Widget.php file<\/strong><\/p>\n\n\n\n
app\/code\/Vendor\/Extension\/Block\/Widget\/Widget.php<\/strong><\/p>\n\n\n
\n<?php\n\nnamespace Vendor\\Extension\\Block\\Widget;\n\nuse Magento\\Framework\\View\\Element\\Template;\n\nuse Magento\\Widget\\Block\\BlockInterface;\n\nclass Widget extends Template implements BlockInterface\n\n{\n\n\u00a0\u00a0\u00a0protected $_template = "Magecurious_HelloWorld::widget\/widget.phtml";\n\n}\n<\/pre><\/div>\n\n\n
Step 3: Create TextArea.php file<\/strong><\/p>\n\n\n\n
app\/code\/Vendor\/Extension\/Block\/Adminhtml\/Widget\/TextArea.php<\/strong><\/p>\n\n\n
\n<?php\n\nnamespace Vendor\\Extension\\Block\\Adminhtml\\Widget;\n\nuse Magento\\Framework\\Data\\Form\\Element\\AbstractElement;\n\nclass TextArea extends \\Magento\\Backend\\Block\\Template\n\n{\n\n\u00a0\u00a0\u00a0\u00a0\/**\n\n\u00a0\u00a0\u00a0\u00a0\u00a0* @var \\Magento\\Framework\\Data\\Form\\Element\\Factory\n\n\u00a0\u00a0\u00a0\u00a0\u00a0*\/\n\n\u00a0\u00a0\u00a0\u00a0protected $elementFactory;\n\n\u00a0\u00a0\u00a0\u00a0\/**\n\n\u00a0\u00a0\u00a0\u00a0\u00a0* @param \\Magento\\Backend\\Block\\Template\\Context $context\n\n\u00a0\u00a0\u00a0\u00a0\u00a0* @param \\Magento\\Framework\\Data\\Form\\Element\\Factory $elementFactory\n\n\u00a0\u00a0\u00a0\u00a0\u00a0* @param array $data\n\n\u00a0\u00a0\u00a0\u00a0\u00a0*\/\n\n\u00a0\u00a0\u00a0\u00a0public function __construct(\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\\Magento\\Backend\\Block\\Template\\Context $context,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\\Magento\\Framework\\Data\\Form\\Element\\Factory $elementFactory,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0array $data = []\n\n\u00a0\u00a0\u00a0\u00a0) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->elementFactory = $elementFactory;\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0parent::__construct($context, $data);\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\/**\n\n\u00a0\u00a0\u00a0\u00a0\u00a0* Prepare chooser element HTML\n\n\u00a0\u00a0\u00a0\u00a0\u00a0*\n\n\u00a0\u00a0\u00a0\u00a0\u00a0* @param \\Magento\\Framework\\Data\\Form\\Element\\AbstractElement $element Form Element\n\n\u00a0\u00a0\u00a0\u00a0\u00a0* @return \\Magento\\Framework\\Data\\Form\\Element\\AbstractElement\n\n\u00a0\u00a0\u00a0\u00a0\u00a0*\/\n\n\u00a0\u00a0\u00a0\u00a0public function prepareElementHtml(AbstractElement $element)\n\n\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$input = $this->elementFactory->create("textarea", ['data' => $element->getData()]);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$input->setId($element->getId());\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$input->setForm($element->getForm());\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$input->setClass("widget-option input-textarea admin__control-text");\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if ($element->getRequired()) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$input->addClass('required-entry');\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$element->setData('after_element_html', $input->getElementHtml());\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return $element;\n\n\u00a0\u00a0\u00a0\u00a0}\n\n}\n<\/pre><\/div>\n\n\n
Step 4: Create widget.phtml file<\/strong><\/p>\n\n\n\n
app\/code\/Vendor\/Extension\/view\/frontend\/templates\/widget\/widget.phtml<\/strong><\/p>\n\n\n
\n<div class="maincontent">\n\n\u00a0\u00a0\u00a0\u00a0<div class="title">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class="widget-title"><?php echo __("Title : "); ?><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class="widget-title-val"><?php echo $block->getData('title'); ?><\/span>\n\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\n\u00a0\u00a0\u00a0\u00a0<div class="description">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class="widget-desc"><?php echo __("Description : "); ?><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class="widget-desc-val"><?php echo $block->getData('description'); ?><\/span>\n\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\n<\/div>\n<\/pre><\/div>\n\n\n
Step 5: Finally run the below commands<\/strong><\/p>\n\n\n
\n$ php bin\/magento cache: clean\n\n$ php bin\/magento cache: flush\n<\/pre><\/div>\n\n\n
Step 6: Output:<\/strong><\/p>\n\n\n\n
Go to content -> Elements -> Widgets -> Add Widgets<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
<\/div>\n\n\n\n
Use the Layout update option to display the widget on the home page:<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
<\/div>\n\n\n\n
In the front area:<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
<\/div>\n\n\n\n
Final Thoughts:<\/p>\n\n\n\n
So this was the easiest way which we have told you in this blog. This is how you can Create a Custom Widget in Magento 2. Hope you liked the blog.<\/p>\n\n\n\n
So quickly go to the comment box and tell me how you like this blog.<\/p>\n\n\n\n
Stay tuned with us on our site to get new updates on Magento.<\/strong><\/p>\n\n\n\n
Thanks for reading and visiting our site.<\/p>\n\n\n
      
          
        How useful was this post?      <\/p>              
        Click on a star to rate it!      <\/p>        
      
                      
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>              <\/ul>    <\/div>    
    <\/p>