How to create Magento 2 widget

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/Magewallet/ContactWidget/etc/module.xml
app/code/Magewallet/ContactWidget/etc/widget.xml
app/code/Magewallet/ContactWidget/registration.php
app/code/Magewallet/ContactWidget/Block/Widget/Mwcontact.php
app/code/Magewallet/ContactWidget/view/frontend/templates/widget/contact_widget.phtml

I have used [Magewallet] 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! Enjoy Magento 2!! Enjoy Magewallet!!!

Magento 2 – How to load product by id

As you know there are so many alternate methods to get product details by given id in Magento 1.x. This code snippet will be very useful at many custom development with Magento.

Lets check the code used in Magento 1.x.

List of some methods to get various product details like Short description, Name, Price and Product URL etc.

Download Free New Order Notification Extension

Now lets see how to get product details by id in Magento 2.x. You can load the product by product id simply as below

Enjoy cool stuff! Enjoy Magento 2!! Enjoy Magewallet!!!