Basically, Magento widget is a Magento extension with definite functionality in your store.<\/p>\n\n\n\n
The default Magento supports the following types of widget:<\/p>\n\n\n\n
The Magento widgets assist in better user experience and functionality of the store. Apart from these default widgets and its functionality, you may need advanced features. Creating a c<\/em>ustom <\/em><\/strong>widget in Magento 2<\/strong><\/em> is like developing an independent extension. Customize a widget to extend the functionality of the core widgets or create your own custom widget in Magento 2.<\/strong><\/em><\/p>\n\n\n\n Widgets are useful in the administration to add interactive interfaces and features in the front-end of Magento 2 store. Learn how to create a custom widget in Magento 2<\/strong><\/em> by following the steps assembled here.<\/p>\n\n\n\n Initially, we need to create the module setup file.<\/p>\n\n\n\n Create file app\/code\/Meetanshi\/CustomWidget\/etc\/module.xml. <\/strong><\/em>Paste the following code snippet in that file.<\/p>\n\n\n\n Create the widget file app\/code\/Meetanshi\/CustomWidget\/etc\/widget.xml<\/em> <\/strong>with content.<\/p>\n\n\n\n The first code:<\/em><\/p>\n\n\n\n app\/code\/Meetanshi\/CustomWidget\/Model\/Config\/Source\/Gender.php<\/strong><\/em><\/p>\n\n\n\n Meetanshi\\CustomWidget\\Block\\Widget\\ContactInformations<\/em><\/strong><\/em><\/strong> is declared in the above code snippet. In this file, we assign custom template file inside _toHtml() <\/strong>method<\/p>\n\n\n\n A Magento 2 store needs a lot of features to function smoothly and to attract more visitors. Having an appealing user experience is essential in E-commerce and that\u2019s where widgets come into the picture!<\/p>\n\n\n\nCode to Create Custom Widget in Magento 2:<\/h2>\n\n\n\n
File setup\/Our module<\/h3>\n\n\n\n
<?xml version=\"1.0\"?>\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"..\/..\/..\/..\/..\/lib\/internal\/Magento\/Framework\/Module\/etc\/module.xsd\">\n <module name=\"Meetanshi_CustomWidget\" setup_version=\"1.0.0\">\n <\/module>\n<\/config><\/pre>\n\n\n\n
Widget Declaration File<\/h3>\n\n\n\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?> \n<widgets xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"..\/..\/..\/Magento\/Widget\/etc\/widget.xsd\">\n <widget id=\"meetanshi_customwidget\" class=\"Meetanshi\\CustomWidget\\Block\\Widget\\ContactInformations\">\n <label translate=\"true\">Contact Informations Widget<\/label>\n <description>Widget in Magento2<\/description>\n <parameters>\n <parameter name=\"fullname\" xsi:type=\"text\" visible=\"true\" sort_order=\"0\" >\n <label translate=\"true\">Full Name<\/label>\n <\/parameter>\n <parameter name=\"age\" xsi:type=\"text\" visible=\"true\" sort_order=\"10\" >\n <label translate=\"true\">Age<\/label>\n <\/parameter>\n <parameter name=\"gender\" xsi:type=\"select\" source_model=\"Meetanshi\\CustomWidget\\Model\\Config\\Source\\Gender\" visible=\"true\" sort_order=\"10\" >\n <label translate=\"true\">Gender<\/label>\n <\/parameter>\n <\/parameters>\n <\/widget>\n<\/widgets><\/pre>\n\n\n\n
\n
To create the model file:<\/h3>\n\n\n\n
<?php\nnamespace Meetanshi\\CustomWidget\\Model\\Config\\Source;\n\nclass Gender implements \\Magento\\Framework\\Option\\ArrayInterface\n{\n public function toOptionArray()\n {\n return [\n ['value' => 'mal', 'label' => __('Male')],\n ['value' => 'female', 'label' => __('Female')]];\n }\n}<\/pre>\n\n\n\nTo create the block file:<\/h3>\n\n\n\n
<?php\nnamespace Meetanshi\\CustomWidget\\Block\\Widget;\n\nclass ContactInformations extends \\Magento\\Framework\\View\\Element\\Template implements \\Magento\\Widget\\Block\\BlockInterface\n{\n public function _toHtml()\n {\n $this->setTemplate('widget\/contact_informations.phtml');\n }\n}<\/pre>\n\n\n\nTo create the template file<\/h3>\n\n\n\n
<?php\n$fullname = $this->getData('fullname');\n$age = $this->getData('age');\n$gender = $this->getData('gender');\n?>\n<ul>\n <?php if($fullname){ ?>\n <li><?php echo $fullname ?><\/li>\n <?php } ?>\n <?php if($age){ ?>\n <li><?php echo $age ?><\/li>\n <?php } ?>\n <?php if($gender){ ?>\n <li>\n <?php if($gender){\n echo __('Male')\n }else{\n echo __('Female');\n } ?>\n <\/li>\n <?php } ?>\n<\/ul><\/pre>\n\n\n\n\n