Hello Everyone,
In this blog, we will learn how to create a custom widget in Magento 2.
Widget is a feature of Magento to display dynamic content to page and block.
By default, Magento 2 provides widgets like CMS Page Link, CMS Static Block, Orders, and returns, etc.
But sometimes we also need to create our custom widget.
Without wasting your time, let us guide you straight away. Follow the easy steps given below to Create a Custom Widget in Magento 2.
STEPS FOR CREATE CUSTOM WIDGET IN MAGENTO 2
Step 1: Create widget.xml file
app/code/Vendor/Extension/etc/widget.xml
<?xml version="1.0" encoding="UTF-8"?>
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
<widget id="magecurious_custom_widget" class="Vendor\Extension\Block\Widget\Widget">
<label>Magecurious Custom Widget</label>
<description></description>
<parameters>
<parameter name="title" xsi:type="text" visible="true" required="true">
<label translate="true">Title</label>
</parameter>
<parameter name="description" xsi:type="block" visible="true" required="true">
<label translate="true">Description</label>
<block class="Vendor\Extension\Block\Adminhtml\Widget\TextArea"/>
</parameter>
</parameters>
</widget>
</widgets>
Step 2: Create a Widget.php file
app/code/Vendor/Extension/Block/Widget/Widget.php
<?php
namespace Vendor\Extension\Block\Widget;
use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface;
class Widget extends Template implements BlockInterface
{
protected $_template = "Magecurious_HelloWorld::widget/widget.phtml";
}
Step 3: Create TextArea.php file
app/code/Vendor/Extension/Block/Adminhtml/Widget/TextArea.php
<?php
namespace Vendor\Extension\Block\Adminhtml\Widget;
use Magento\Framework\Data\Form\Element\AbstractElement;
class TextArea extends \Magento\Backend\Block\Template
{
/**
* @var \Magento\Framework\Data\Form\Element\Factory
*/
protected $elementFactory;
/**
* @param \Magento\Backend\Block\Template\Context $context
* @param \Magento\Framework\Data\Form\Element\Factory $elementFactory
* @param array $data
*/
public function __construct(
\Magento\Backend\Block\Template\Context $context,
\Magento\Framework\Data\Form\Element\Factory $elementFactory,
array $data = []
) {
$this->elementFactory = $elementFactory;
parent::__construct($context, $data);
}
/**
* Prepare chooser element HTML
*
* @param \Magento\Framework\Data\Form\Element\AbstractElement $element Form Element
* @return \Magento\Framework\Data\Form\Element\AbstractElement
*/
public function prepareElementHtml(AbstractElement $element)
{
$input = $this->elementFactory->create("textarea", ['data' => $element->getData()]);
$input->setId($element->getId());
$input->setForm($element->getForm());
$input->setClass("widget-option input-textarea admin__control-text");
if ($element->getRequired()) {
$input->addClass('required-entry');
}
$element->setData('after_element_html', $input->getElementHtml());
return $element;
}
}
Step 4: Create widget.phtml file
app/code/Vendor/Extension/view/frontend/templates/widget/widget.phtml
<div class="maincontent">
<div class="title">
<span class="widget-title"><?php echo __("Title : "); ?></span>
<span class="widget-title-val"><?php echo $block->getData('title'); ?></span>
</div>
<div class="description">
<span class="widget-desc"><?php echo __("Description : "); ?></span>
<span class="widget-desc-val"><?php echo $block->getData('description'); ?></span>
</div>
</div>
Step 5: Finally run the below commands
$ php bin/magento cache: clean
$ php bin/magento cache: flush
Step 6: Output:
Go to content -> Elements -> Widgets -> Add Widgets
Use the Layout update option to display the widget on the home page:
In the front area:
Final Thoughts:
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.
So quickly go to the comment box and tell me how you like this blog.
Stay tuned with us on our site to get new updates on Magento.
Thanks for reading and visiting our site.
