“Dropdown Field” is a select box and we have defined a custom source: Ht\\Mymodule\\Model\\Source\\Dropdownoptions<\/p>\n
So, we need to create the source file as well.<\/p>\n
File path: app\/code\/Ht\/Mymodule\/Model\/Source\/Dropdownoptions.php<\/p>\n
<?php\r\n\r\nnamespace Ht\\Mymodule\\Model\\Source;\r\n\r\nclass Dropdownoptions implements \\Magento\\Framework\\Option\\ArrayInterface \r\n{\r\n public function toOptionArray() \r\n {\r\n return [\r\n ['value' => '1', 'label' => __('Option 1')],\r\n ['value' => '2', 'label' => __('Option 2')]\r\n ];\r\n }\r\n}<\/pre>\nNext step is to create a custom block that our widget will use.<\/p>\n
File Path: app\/code\/Ht\/Mymodule\/Block\/Widget\/Mymodule.php<\/p>\n
<?php\r\n\r\nnamespace Ht\\Mymodule\\Block\\Widget;\r\n\r\nuse Magento\\Framework\\View\\Element\\Template;\r\nuse Magento\\Widget\\Block\\BlockInterface;\r\n\r\nclass Mymodule extends Template implements BlockInterface {\r\n\r\n protected $_template = \"widget\/mymodule.phtml\";\r\n\r\n}<\/pre>\nIn block file we have added template file path for widget. In this template file you can get widget option’s values.<\/p>\n
File Path: app\/code\/Ht\/Mymodule\/view\/frontend\/templates\/widget\/mymodule.phtml<\/p>\n
<?php\r\n\r\nif ($block->getData('text_field')) {\r\n echo $block->getData('text_field') . '<br\/>';\r\n}\r\n\r\nif ($block->getData('dropdown_field')) {\r\n echo $block->getData('dropdown_field') . '<br\/>';\r\n}\r\n\r\nif ($block->getData('yes_no_field')) {\r\n echo $block->getData('yes_no_field') . '<br\/>';\r\n}<\/pre>\nWe done with the widget. So now flush the cache and check for the widget.<\/p>\n
Login to Admin panel and Go to Content > Pages\/Blocks. And add new or edit existing CMS page and CMS static block.<\/p>\n
In Content tab, click on “Insert Widget…” button.<\/p>\n
<\/p>\n
![\"Magento](\"https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2019\/09\/insert-widget.png\")
<\/p>\n
<\/p>\n
You will see the “Ht Mymodule Widget” in widget list. Select the widget and add\/select values to fields.<\/p>\n
<\/p>\n
![\"Magento](\"https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2019\/09\/select-widget.png\")
<\/p>\n
![\"Magento](\"https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2019\/09\/widget-options.png\")
<\/p>\n
You will get code like like below in CMS page or static block.<\/p>\n
{{widget type=\"Ht\\Mymodule\\Block\\Widget\\Mymodule\" text_field=\"Hello World\" dropdown_field=\"1\" yes_no_field=\"1\"}}<\/pre>\nAt final, Clear the cache and check for the result.<\/p>\n
Thats it. Enjoy Magento 2!!<\/p>\n","protected":false},"excerpt":{"rendered":"
In this post I am going to explain how to create custom widget in magento 2. First we will create the widget configuration file widget.xml, that contains all widget fields. So, create the widget.xml file with following content. File Path: 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=”my_module_widget” class=”Ht\\Mymodule\\Block\\Widget\\Mymodule”> <label translate=”true”>Ht Mymodule Widget<\/label> <description>Ht… <\/p>\n