How to create Magento 2 widget? - Best Magento 2 tutorials

2 (40%) 85 votes

Right here is the methods you will comply with this How to create Magento 2 widget?:

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

1 First, let’s take a look at the main structure which we’ll need to implement for our custom Magento 2 widget.
2 File setup/Our module
3 Widget declaration File
4 And then, let’s create the model file
5 Next, let’s create the block file
6 Finally, create the template file

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.

<?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>

<?xml version="1.0"?>

</module>

</config>

Widget declaration File

Create the widget file app/code/Magestore/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="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>

<?xml version="1.0" encoding="UTF-8"?>

<label translate="true">Contact Informations Widget</label>

<description>Widget in Magento2</description>

</parameter>

</parameter>

<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

<?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')]];
    }
}

<?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

<?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');
    }
}

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

<?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>

<?php

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

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

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

<ul>

<?php if($fullname){ ?>

<?php } ?>

<?php if($age){ ?>

<?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!

How to Create Magento 2 Widget? – Magento 2.3

First, let’s take a look at the main structure which we’ll need to implement for our custom Magento 2 widget.

File setup/Our module

Widget declaration File

And then, let’s create the model file

Next, let’s create the block file

Finally, create the template file

Leave a Reply Cancel reply

First, let’s take a look at the main structure which we’ll need to implement for our custom Magento 2 widget.

File setup/Our module

Widget declaration File

And then, let’s create the model file

Next, let’s create the block file

Finally, create the template file

Related Articles

How to Use Magento 2 CMS (Content Management System) in Magento 2.3

How To Call a Static Block On CMC Page

Leave a Reply Cancel reply