.png "How To Create Custom Dynamic Widget in Magento2")
Hello friends, I am going to share my best megento practice with you guys through this post. How To Create Custom Dynamic Widget in Magento2 And I hope that through this post you will get a lot of help in customizing the megento ecomm platform.
1) create a file widget.xml in etc folder : app/code/Mageget/CustomWidget/etc/widget.xml
<?xml version="1.0" ?>
<widgets
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
<widget class="Mageget\CustomWidget\Block\Widget\Samplewidget" id="mageget_customwidget_samplewidget">
<label>Cloudways Sample Widget</label>
<description></description>
<parameters>
<parameter name="widgettitle" sort_order="10" visible="true" xsi:type="text">
<label>Title</label>
</parameter>
<parameter name="widgetcontent" sort_order="20" visible="true" xsi:type="text">
<label>Content</label>
</parameter>
</parameters>
</widget>
</widgets>
2) create a file in Block/Widget folder : app/code/Mageget/CustomWidget/Block/Widget/Samplewidget.php
<?php
namespace Mageget\CustomWidget\Block\Widget;
use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface;
class Samplewidget extends Template implements BlockInterface
{
protected $_template = "samplewidget.phtml";
}
3) create a file in view/frontend/templates folder : app/code/Mageget/CustomWidget/view/frontend/templates/samplewidget.phtml
<?php if($block->getData('widgettitle')): ?>
<h2 class='cloudways-title'><?php echo $block->getData('widgettitle'); ?></h2>
<?php endif; ?>
<?php if($block->getData('widgetcontent')): ?>
<h2 class='cloudways-content'><?php echo $block->getData('widgetcontent'); ?></h2>
<?php endif; ?>
If You want to Pass TextArea in Your Weight Please Follow Bellow Steps : -
Set the field you want to be a text area to type=block, example:
<?xml version="1.0" ?>
<widgets
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
<widget class="Mageget\CustomWidget\Block\Widget\Samplewidget" id="mageget_customwidget_samplewidget">
<label>Cloudways Sample Widget</label>
<description></description>
<parameters>
<parameter name="widgettitle" sort_order="10" visible="true" xsi:type="text">
<label>Title</label>
</parameter>
<parameter name="text" xsi:type="block" required="true" visible="true" sort_order="3">
<label translate="true">Text</label>
<block class="Mageget\CustomWidget\Block\Adminhtml\Widget\TextField"/>
</parameter>
</widget>
</widgets>
Add a file in Block folder : app/code/Mageget\CustomWidget\Block\Adminhtml\Widget/TextField.php
<?php
namespace Mageget\CustomWidget\Block\Adminhtml\Widget;
Class TextField extends \Magento\Backend\Block\Template{
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(\Magento\Framework\Data\Form\Element\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;
}
}