- File setup/Our module
- Widget declaration File
- Let’s create the model file
- Let’s create the block file
- Create the template file
Previously on our general Tutorial of How to use Magento 2 CMS (Content Management System), we already have a good time with basic knowledge of using this powerful feature. Now we will go down in detail with the Magento 2 Widget inside it.
Magento 2 widget will allow the site administrator to insert admin contact information such as full name, age, gender….etc. And you can create Magento 2 widget via Widget Instance or add in the editor section of CMS Page => Block. We’ll use common field types in Magento 2 widgets such as text and dropdown.
I assume that you’ll familiar with the structure of the Magento 2 module. So let’s start:
Contents
First, let’s take a look at the main structure which we’ll need to implement for our custom Magento 2 widget.
| 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 |
app/code/Magestore/CustomWidget/etc/module.xml: file setup of our module
app/code/Magestore/CustomWidget/etc/widget.xml: a widget declaration file used to declare widget information and parameters.
File setup/Our module
First we need create the module setup file. Create file app/code/Magestore/CustomWidget/etc/module.xml and paste the following contents in that file. We have used Magestore as our module Vendor Name and CustomWidget as our module name.
|
1 2 3 4 5 |
<?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="Magestore_CustomWidget" setup_version="1.0.0"> </module> </config> |
Widget declaration File
Create the widget file app/code/Magestore/CustomWidget/etc/widget.xml with content
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?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="magestore_customwidget" class="Magestore\CustomWidget\Block\Widget\ContactInformations"> <label translate="true">Contact Informations Widget</label> <description>Widget in Magento2</description> <parameters> <parameter name="fullname" xsi:type="tehttps://magento2tutorial.magestore.com/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="Magestore\CustomWidget\Model\Config\Source\Gender" visible="true" sort_order="10" > <label translate="true">Gender</label> </parameter> </parameters> </widget> </widgets> |
The first code:
- Declare our widget with the unique identification is magestore_customwidget and the class attribute is used to map to widget file app/code/Magestore/CustomCode/Block/Widget/ContactInformations.php
- The field description will show description, introduce about module when created.
- We need to declare all the option of module inside the field tag “parameters”
- And the source_model attribute maps to the model file app/code/Magestore/CustomWidget/Model/Config/Source/Gender.php, where we’ll get our options for the drop-down
And then, let’s create the model file
app/code/Magestore/CustomWidget/Model/Config/Source/Gender.php
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php namespace Magestore\CustomWidget\Model\Config\Source; class Gender implements \Magento\Framework\Option\ArrayInterface { public function toOptionArray() { return [ ['value' => 'mal', 'label' => __('Male')], ['value' => 'female', 'label' => __('Female')]]; } } |
Next, let’s create the block file
Magestore\CustomWidget\Block\Widget\ContactInformations which is declared above code. In this file, we assign custom template file inside _toHtml() method
|
1 2 3 4 5 6 7 8 9 10 |
<?php namespace Magestore\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'); } } |
Finally, create the template file
- Magestore\CustomWidget\view\frontend\widget\contact_informations.phtml – which will show all widget data on site.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?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 clear all the caches from the backend of Magento or delete folder var/cache.
- After that, go to Administrator Page => Content => Pages and add a new Page using Add New page button, then click Widget icon in Content Tab and you need fill information for all field.
- Save CMS page and go to the front end of page to check your widget.
Thanks !
And let’s try more of our Magento 2 tutorials with Magento 2 Demo to become an Magento 2 Experts!