How to create a new widget (Magento 2)
Custom widget
Widgets provide powerful features in Magento 2, that is used to add dynamic or static content to store’s pages.
Create a new widget
Create a new widget step:
1. Declaring the widget
2. Adding widget parameters
3. Check the widget
4. Create the block
5. Create the template
6. Check the Frontend
Declaring the widget
now create a file named etc/widget.xml
that define basic information about the widget such as Name, description, Block Class.
Karabiner/Widget/etc/widget.xml<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
<widget class="Karabiner\Widget\Block\Widget\Test" id="karabiner_test_widget">
<label>New Widget</label>
<description>This is a New Widget</description>
<parameters>
...
</parameters>
<containers>
...
</containers>
</widget>
</widgets>
We need to also add a dependency to Magento_Widget in the module.xml
file.
Karabiner/Widget/etc/module.xml...
<sequence>
<module name="Magento_Widget" />
</sequence>
...
Adding widget parameters
As a parameter, we are able to use any of these field types:
text
select
multiselect
block
Add a text and a select field:
Karabiner/Widget/etc/widget.xml<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
<widget class="Karabiner\Widget\Block\Widget\Test" id="karabiner_test_widget">
...
<parameters>
<parameter name="title" xsi:type="text" required="true" visible="true" sort_order="10">
<label>Label</label>
</parameter>
<parameter name="size" xsi:type="select" visible="true" required="true" sort_order="20">
<label translate="true">Size</label>
<options>
<option name="s" value="S">
<label>S</label>
</option>
<option name="m" value="M" selected="true">
<label>M</label>
</option>
<option name="l" value="L">
<label>L</label>
</option>
</options>
</parameter>
</parameters>
</widget>
</widgets>
Check the widget
after run cache clear comand php bin/magento cache:flush
go to Admin panel > Content > Pages > Homepage(or any page) > Edit
In the Content tab, click on Insert Widget icon.
Create the block
Create the block class that we provided on the widget’s initialization, responsible for rendering it on the frontend.
Karabiner/Widget/Block/Widget/Test.phpnamespace Karabiner\Widget\Block\Widget;
use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface;
class Test extends Template implements BlockInterface
{
protected $_template = "widget/test.phtml";
}
Create the template
And finally, create the template that will be used for showing the widget’s data on the frontend.
Karabiner/widget/view/frontend/templates/widget/test.phtml<?php
/** \Karabiner\Widget\Block\Widget\Test $block */
?>
<h3><?= $block->escapeHtml($block->getData('title')) ?></h3>
<h3><?= $block->escapeHtml(__('Size:')) ?> <?= $block->escapeHtml($block->getData('size')) ?></h3>
Check the Frontend
Clean the Magento cache with the following command:php bin/magento cache:flush
The widget is now shown on the frontend.
Reference
이 문제에 관하여(How to create a new widget (Magento 2)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/moaazfarag/items/cc74ba4c8fcab7fdbbf9
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Create a new widget step:
1. Declaring the widget
2. Adding widget parameters
3. Check the widget
4. Create the block
5. Create the template
6. Check the Frontend
Declaring the widget
now create a file named
etc/widget.xml
that define basic information about the widget such as Name, description, Block Class.Karabiner/Widget/etc/widget.xml
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
<widget class="Karabiner\Widget\Block\Widget\Test" id="karabiner_test_widget">
<label>New Widget</label>
<description>This is a New Widget</description>
<parameters>
...
</parameters>
<containers>
...
</containers>
</widget>
</widgets>
We need to also add a dependency to Magento_Widget in the module.xml
file.Karabiner/Widget/etc/module.xml
...
<sequence>
<module name="Magento_Widget" />
</sequence>
...
Adding widget parameters
As a parameter, we are able to use any of these field types:
text
select
multiselect
block
Add a text and a select field:
Karabiner/Widget/etc/widget.xml
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
<widget class="Karabiner\Widget\Block\Widget\Test" id="karabiner_test_widget">
...
<parameters>
<parameter name="title" xsi:type="text" required="true" visible="true" sort_order="10">
<label>Label</label>
</parameter>
<parameter name="size" xsi:type="select" visible="true" required="true" sort_order="20">
<label translate="true">Size</label>
<options>
<option name="s" value="S">
<label>S</label>
</option>
<option name="m" value="M" selected="true">
<label>M</label>
</option>
<option name="l" value="L">
<label>L</label>
</option>
</options>
</parameter>
</parameters>
</widget>
</widgets>
Check the widget
after run cache clear comand
php bin/magento cache:flush
go to Admin panel > Content > Pages > Homepage(or any page) > EditIn the Content tab, click on Insert Widget icon.
Create the block
Create the block class that we provided on the widget’s initialization, responsible for rendering it on the frontend.
Karabiner/Widget/Block/Widget/Test.php
namespace Karabiner\Widget\Block\Widget;
use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface;
class Test extends Template implements BlockInterface
{
protected $_template = "widget/test.phtml";
}
Create the template
And finally, create the template that will be used for showing the widget’s data on the frontend.
Karabiner/widget/view/frontend/templates/widget/test.phtml
<?php
/** \Karabiner\Widget\Block\Widget\Test $block */
?>
<h3><?= $block->escapeHtml($block->getData('title')) ?></h3>
<h3><?= $block->escapeHtml(__('Size:')) ?> <?= $block->escapeHtml($block->getData('size')) ?></h3>
Check the Frontend
Clean the Magento cache with the following command:
php bin/magento cache:flush
The widget is now shown on the frontend.Reference
이 문제에 관하여(How to create a new widget (Magento 2)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/moaazfarag/items/cc74ba4c8fcab7fdbbf9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)