How to build Magento 2 Widgets

You are seeking the way of creating Widgets in Magento 2?

There are some methods which will help you to build Magento 2 Widgets listed are:

  • File Setup/Our module
  • Widgets declaration file
  • Lets build the model file
  • Lets build the block file
  • build a temple file

In our previous tutorial we have seen about how to use Magento 2 CMS(content  Management System), Now we will go  down in aspect with the Magento 2 Widget inside it.

Magento 2 Widgets will permit the site admin to add admin contact information such as full Name, age, gender…etc. moreover you can create Magento 2 widget through widget instance or include in the editor part of CMS page->block. We will make use of common field types in Magento 2 widgets such as text and dropdown.

  1. File setup/Our module
  2. Widget declaration File
  3. let’s create the model file
  4. let’s create the block file
  5. create the template file

I guess that you’ll well-known about the structure of Magento 2 module. So let’s start:

First, let’s see the key structure which we’ll need to execute for our customer Magento 2 widgets.

app/code/Webnexs/CustomWidget/etc/module.xml

file setup for our module

app/code/Webnexs/CustomWidget/etc/widget.xml

a widget declaration file used to declare widgets information and parameters.

 File setup/our module

First we have to build a module setup file. Build a file

app/code/Webnexs/CustomWidget/etc/module.xml

and paste the following contents in that file. We have used “webnexs” as our component retailer name and “customer widget” as our component name.

Widget declaration file

Build the widget file

app/code/Webnexs/CustomWidget/etc/widget.xml

with content.

First code:

  • Declare our widget with our only one of its kind identification is webnexs customwidget and the class feature is used to plot the widget file.
app/code/Webnexs/CustomCode/Block/Widget/ContactInformations.php
  • The field description will show some description, introduce about the module when created.
  • We need to state all the choice of component inside the field label “parameters”.
  • And the source model element plot to the model file
  • app/code/Webnexs/CustomWidget/Model/Config/Source/Gender.php
  • where we will get our choice for the drop-down.

  Let’s build the model file

app/code/Webnexs/CustomWidget/Model/Config/Source/Gender.php

lets build the block file

Wenexs\CustomWidget\Block\Widget\ContactInformations 

Which is declared above code? In this file, we assign custom template file inside _toHtml() method .

Let’s build the template file

Webnexs\CustomWidget\view\frontend\widget\contact_informations.phtml

Which will illustrate all the widgets data on site?

  • Now, you need to clear all the caches from the backend of magento or delete a folder var/cache.
  • Then, go to admin page->content->pages and attach new page using attach new page button. Then click widget icon in content tab and you need to load all information for all field.
  • Save CMS page and go to the front end of page to ensure your widgets.

The above mentioned are some methods to build Magento 2 widgets. for more try our Magento tutorial with Magento 2 demo.

Last Update: July 24, 2018  

February 2, 2018   151   Nandini R    CMS    
Total 2 Votes:
0

Tell us how can we improve this post?

+ = Verify Human or Spambot ?

Leave a Reply

Your email address will not be published. Required fields are marked *

Facebook
Google+
http://www.webnexs.com/blog/kb/build-magento-2-widgets
Twitter
LinkedIn