Magento has been the benchmark set amongst the e­-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 plus WYSIWYG implementation as a great boost to site owner friendly backend section. In this post we’ll learn how to create and use widgets for Magento 2.

Some of the possible implementations of the Magento widgets are:

  • Get dynamic product data
  • Set lists with the recently viewed items
  • Marketing images placed on different Magento front-end locations
  • Embedded in content pages

and many more!!

I assume that you’ll familiar with the file structure of the Magento 2 extensions. If you a new Magento2 developer and you have no experience with Magento2 extension, you need to read the following tutorial

Magento Guide

So, here is the list of files we’ll create step by step:

– app/code/Hiddentechies/ContactWidget/etc/module.xml
– app/code/Hiddentechies/ContactWidget/etc/widget.xml
– app/code/Hiddentechies/ContactWidget/registration.php
– app/code/Hiddentechies/ContactWidget/Block/Widget/Mwcontact.php
– app/code/Hiddentechies/ContactWidget/view/frontend/templates/widget/contact_widget.phtml

I have used [Hiddentechies] as module Vendor Name and [ContactWidget] as extension name.

Lets start step by step process of creating widget for Magento 2.

1) etc/module.xml

2) etc/widget.xml

3) registration.php

4) Block/Widget/Mwcontact.php

5) view/frontend/templates/widget/contact_widget.phtml

Thats 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.

Enjoy cool stuff!