Magento Guide<\/a><\/p>\nSo, here is the list of files we\u2019ll create step by step:<\/p>\n
– app\/code\/Hiddentechies\/ContactWidget\/etc\/module.xml
\n– app\/code\/Hiddentechies\/ContactWidget\/etc\/widget.xml
\n– app\/code\/Hiddentechies\/ContactWidget\/registration.php
\n– app\/code\/Hiddentechies\/ContactWidget\/Block\/Widget\/Mwcontact.php
\n– app\/code\/Hiddentechies\/ContactWidget\/view\/frontend\/templates\/widget\/contact_widget.phtml<\/p>\n
I have used [Hiddentechies] as module Vendor Name and [ContactWidget] as extension name.<\/p>\n
Lets start step by step process of creating widget for Magento 2.<\/p>\n
1) etc\/module.xml<\/p>\n
<?xml version=\"1.0\"?>\r\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Module\/etc\/module.xsd\">\r\n <module name=\"Hiddentechies_ContactWidget\" setup_version=\"1.0.0\" \/>\r\n<\/config><\/pre>\n2) etc\/widget.xml<\/p>\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n\r\n<widgets xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:module:Magento_Widget:etc\/widget.xsd\">\r\n <widget id=\"custom_widget\" class=\"Hiddentechies\\ContactWidget\\Block\\Widget\\Mwcontact\">\r\n <label translate=\"true\">Hiddentechies - Contact Widget<\/label>\r\n <description>Hiddentechies - Sample Contact Widget<\/description>\r\n <parameters>\r\n <parameter name=\"name\" xsi:type=\"text\" visible=\"true\" required=\"true\" sort_order=\"0\" >\r\n <label translate=\"true\">Name<\/label>\r\n <\/parameter>\r\n <parameter name=\"address\" xsi:type=\"textarea\" visible=\"true\" sort_order=\"10\">\r\n <label translate=\"true\">Address<\/label>\r\n <\/parameter>\r\n <parameter name=\"mobile\" xsi:type=\"text\" visible=\"true\" source_model=\"Magento\\Config\\Model\\Config\\Source\\Yesno\" sort_order=\"20\">\r\n <label translate=\"true\">Mobile No<\/label>\r\n <\/parameter>\r\n <parameter name=\"website\" xsi:type=\"text\" visible=\"true\" sort_order=\"30\">\r\n <label translate=\"true\">Website URL<\/label>\r\n <\/parameter>\r\n <\/parameters>\r\n <\/widget>\r\n<\/widgets><\/pre>\n3) registration.php<\/p>\n
<?php\r\n\r\nuse \\Magento\\Framework\\Component\\ComponentRegistrar;\r\n\r\nComponentRegistrar::register(\r\n ComponentRegistrar::MODULE, \r\n 'Hiddentechies_ContactWidget',\r\n __DIR__\r\n);\r\n<\/pre>\n4) Block\/Widget\/Mwcontact.php<\/p>\n
<?php\r\nnamespace Hiddentechies\\ContactWidget\\Block\\Widget;\r\n\r\nclass Mwcontact extends \\Magento\\Framework\\View\\Element\\Template implements \\Magento\\Widget\\Block\\BlockInterface\r\n{\r\n protected function _construct()\r\n {\r\n parent::_construct();\r\n $this->setTemplate('widget\/contact_widget.phtml');\r\n }\r\n}<\/pre>\n5) view\/frontend\/templates\/widget\/contact_widget.phtml<\/p>\n
<div class=\"contact-widget\">\r\n <table>\r\n <tr>\r\n <td>Name<\/td>\r\n <td><?php echo $this->getData('name'); ?><\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Address<\/td>\r\n <td><?php echo $this->getData('address'); ?><\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Mobile<\/td>\r\n <td><?php echo $this->getData('mobile'); ?><\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Website URL<\/td>\r\n <td><?php echo $this->getData('website'); ?><\/td>\r\n <\/tr>\r\n <\/table>\r\n<\/div><\/pre>\nThats it. Now add this widget to app\/code folder and run upgrade command. Clear your cache and try to add this widget to any CMS page. You can see result on CMS page on frontend.<\/p>\n
Enjoy cool stuff!<\/p>\n","protected":false},"excerpt":{"rendered":"
Magento has been the benchmark set amongst the e\u00ad-commerce frameworks available in the market. Magento Widgets are small Magento extensions with a predefined set of configuration options. Using them the store administrators can enrich the front-end blocks functionality. They provide great control and flexibility in creating informational and marketing content. Personally I see the widgets… <\/p>\n
Continue Reading<\/a><\/div>\n","protected":false},"author":1,"featured_media":4826,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[59],"tags":[10,38,129,196],"_links":{"self":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts\/2849"}],"collection":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/comments?post=2849"}],"version-history":[{"count":3,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts\/2849\/revisions"}],"predecessor-version":[{"id":10507,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts\/2849\/revisions\/10507"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/media\/4826"}],"wp:attachment":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/media?parent=2849"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/categories?post=2849"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/tags?post=2849"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}