How to create custom widget via Install?
-
24-01-2021 - |
题
I need to create widget category link via Upgrade. How to do this?
解决方案
Custom widget can not be created alone with a Install or Upgrade script. You need to create a module for it.
Below are the simple steps to create a widget via a module:
- Create app/code/Stack/CustomWidget/registration.php and paste below code in it:
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Stack_CustomWidget',
__DIR__
);
- Create app/code/Stack/CustomWidget/module.xml and paste below code in it:
<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Stack_CustomWidget" setup_version="1.0.0"/>
</config>
- Next, you’ll need to create a widget.xml configuration file under app/code/Stack/CustomWidget/etc/ folder with the following code:
<?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="Stack\CustomWidget\Block\Widget\Samplewidget" id="stack_customwidget_samplewidget">
<label>Stack 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="textarea">
<label>Content</label>
</parameter>
</parameters>
</widget>
</widgets>
In the <widget>
tag, I have declared a block class, Stack\CustomWidget\Block\Widget\Samplewidget that instructs our widget to use the particular template.
- Now create Samplewidget.php in
app/code/Stack/CustomWidget/Block/Widget/
directory with the following code:
<?php
namespace Stack\CustomWidget\Block\Widget;
use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface;
class Samplewidget extends Template implements BlockInterface
{
protected $_template = "widget/samplewidget.phtml";
}
- Finally, create a widget template file samplewidget.phtml in app/code/Stack/CustomWidget/view/frontend/templates/widget with the following code:
<?php if($block->getData('widgettitle')): ?>
<h2 class='stack-title'><?php echo $block->getData('widgettitle'); ?></h2>
<?php endif; ?>
<?php if($block->getData('widgetcontent')): ?>
<h2 class='stack-content'><?php echo $block->getData('widgetcontent'); ?></h2>
<?php endif; ?>
Here, as you can see that I have picked up the value from fields by calling $block->getData('parameter'); where the parameters are widgettitle and widgetcontent.
Now, login to your Magento 2 Admin panel and navigate to Content > Pages to see the widget in action.