How to build Magento 2 Widgets?-Magento 2.3

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.

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
    <module name="Webnexs_CustomWidget" setup_version="1.0.0">
    </module>
</config>

Widget declaration file

Build the widget file

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

with content.

<?xml version="1.0" encoding="UTF-8"?>
 
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../Magento/Widget/etc/widget.xsd">
 <widget id="Webnexs_customwidget" class="Webnexs\CustomWidget\Block\Widget\ContactInformations">
 <label translate="true">Contact Informations Widget</label>
 <description>Widget in Magento2</description>
 <parameters>
 <parameter name="fullname" xsi:type="tehttp://www.Webnexs.com/magento-2-tutorial/wp-admin/post-new.php#xt" visible="true" sort_order="0" >
 <label translate="true">Full Name</label>
 </parameter>
 <parameter name="age" xsi:type="text" visible="true" sort_order="10" >
 <label translate="true">Age</label>
 </parameter>
 <parameter name="gender" xsi:type="select" source_model="Webnexs\CustomWidget\Model\Config\Source\Gender" visible="true" sort_order="10" >
 <label translate="true">Gender</label>
 </parameter>
 </parameters>
 </widget>
</widgets>

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
<?php
namespace Webnexs\CustomWidget\Model\Config\Source;
 
class Gender implements \Magento\Framework\Option\ArrayInterface
{
 public function toOptionArray()
 {
 return [
 ['value' => 'mal', 'label' => __('Male')],
 ['value' => 'female', 'label' => __('Female')]];
 }
}

lets build the block file

Webnexs\CustomWidget\Block\Widget\ContactInformations 

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

<?php

namespace Webnexs\CustomWidget\Block\Widget;

 

class ContactInformations extends \Magento\Framework\View\Element\Template implements \Magento\Widget\Block\BlockInterface

{

public function _toHtml()

    {

     $this->setTemplate('widget/contact_informations.phtml');

    }

}

Let’s build the template file

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

Which will illustrate all the widgets data on site?

<?php

$fullname = $this->getData('fullname');

$age = $this->getData('age');

$gender = $this->getData('gender');

?>

<ul>

<?php if($fullname){ ?>

<li><?php echo $fullname ?></li>

<?php } ?>

<?php if($age){ ?>

<li><?php echo $age ?></li>

<?php } ?>

<?php if($gender){ ?>

<li>

<?php if($gender){

echo __('Male')

}else{

echo __('Female');

} ?>

</li>

<?php } ?>

</ul>
  • 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: October 22, 2019  

February 2, 2018   362   Nandini Ramachandran    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
Twitter
INSTAGRAM
LinkedIn