How To Create a Custom Widget In Magento 2

How To Create a Custom Widget In Magento 2

Widgets are incredible features that allow you to add dynamic or static content to CMS pages and blocks in your Magento 2 website. They are reusable and essential tools that provide multiple functionalities that can be utilized in the CMS block of a Magento 2 store.

When added to the Magento store, Widgets enable visitors to surf and view your store with ease. They create eye-catching website templates and designs that enrich user experience while offering unprecedented control and flexibility on the admin panel.

This tutorial will help you create a custom widget on your Magento 2 store to boost visitors’ experience and improve navigation within the store.

Ready? Let’s get started.

Step 1 –
Creating A New Module

The first step when creating a custom widget in Magento 2 is establishing a new module. The module requires a module folder and a namespace, in our case, will use HostAdvice as the namespace and CustomWidget as the module folder name. The module folder will be located in the vendor folder titled app/code.

For the sake of this tutorial, we’ll use app/code/HostAdvicel/CustomWidget/composer.json. The composer will load this file when we run it, even though we’ll not be using the composer with the module.

Step 2 –
Creating registration.php

We need to register the module with Magento. To accomplish this, first, create a register.php in the location app/code/HostAdvice/CustomWidget/registration.php using the code below.

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Toptal_CustomWidget',
    __DIR__
);

Next, use the code below to create a registration file, module.xml in the location app/code/HostAdvice/CustomWidget/module.xml.

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
  <module name="Toptal_CustomWidget" setup_version="1.0.0"/>
</config>

Step 3 –
Initializing the widget

Once you create the required registration files, the next step is initializing the widget. Create a widget.xml configuration file in the location app/code/HostAdvice/CustomWidget/etc/widget.xml. Use the following command:

<?xml version="1.0" ?>
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
  <widget class="HostAdvice\CustomWidget\Block\Widget\Samplewidget" id="HostAdvice_customwidget_samplewidget">
    <label>HostAdvice Sample Widget</label>
    <description></description>
    <parameters>
      <parameter name="widgettitle" sort_order="10" visible="true" xsi:type="text">
        <label>Title</label>
      </parameter>
      <parameter name="widgetcontent" sort_order="20" visible="true" xsi:type="textarea">
        <label>Content</label>
      </parameter>
    </parameters>
    
  </widget>
</widgets>

In the command above, we’ve labeled two input fields, Title, and Content. Whenever, the new widget is called, the values of both fields will be displayed. Also, in the <widget> tag, we’ve declared the block class, HostAdvice\CustomWidget\Block\Widget\Samplewidget to direct the new widget to utilize the particular template.

Step 4 –
Creating A Widget Block

Next, create a block field titled Samplewidget.php, in the location HostAdvice/CustomWidget/Block/Widget/, using the code below:

<?php

namespace HostAdvicel\CustomWidget\Block\Widget;

use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface;

class Samplewidget extends Template implements BlockInterface
{

    protected $_template = "widget/samplewidget.phtml";

}

In the above command, HostAdvice\CustomWidget\Block\Widge\Samplewidget is properly declared and a custom template is assigned inside the $_template variable.

Now , we’ll use the command below to create a template file samplewidget.phtml, in the location HostAdvice/CustomWidget/view/frontend/templates/widget.

<?php if($block->getData('widgettitle')): ?>
            <h2 class='cloudways-title'><?php echo $block->getData('widgettitle'); ?></h2>
<?php endif; ?>
<?php if($block->getData('widgetcontent')): ?>
            <h2 class='cloudways-content'><?php echo $block->getData('widgetcontent'); ?></h2>
<?php endif; ?>
 In the above code, the widget parameters have been picked by calling $this->getData('widgettitle'); and $this->getData('widgetcontent'); values.

Step 5 –
Posting The Widget

By now, your custom widget is successfully created. Log in to Magento 2 admin area and select Content then Pages.

Click Select in the Homepage option and select Edit.

Expand the Content section and click the Insert Widget icon to post the custom widget.

This will take you to the Insert Widget area. Click the arrow in the Widget Type, select HostAdvice Sample Widget, from the dropdown list.

In the Widgets Options, enter the Content and Title to be displayed on the homepage, and click Insert Widget.

Lastly, to make any changes, flush the Magento 2 cache by launching the CLI and running the commands below:

php bin/magento cache:clean
php bin/magento cache:flush

Load your store’s front-end.

Conclusion

That’s it! You have successfully developed and posted a new custom widget in your Magento 2 store. The new widget will be crucial to your front-end operation since it offers more creative freedom and allow you to market your products with ease.

 

Check out these top 3 Magento hosting services:

Kamatera
£3.15 /mo
Starting price
Visit Kamatera
Rating based on expert review
  • User Friendly
    3.5
  • Support
    3.0
  • Features
    3.9
  • Reliability
    4.0
  • Pricing
    4.3
Hostinger
£2.35 /mo
Starting price
Visit Hostinger
Rating based on expert review
  • User Friendly
    4.7
  • Support
    4.7
  • Features
    4.8
  • Reliability
    4.8
  • Pricing
    4.7
FastComet
£1.41 /mo
Starting price
Visit FastComet
Rating based on expert review
  • User Friendly
    4.7
  • Support
    5.0
  • Features
    4.8
  • Reliability
    4.5
  • Pricing
    5.0

How to Create Bundle Products in Magento 2

This is an easy-to-follow tutorial written to help you create a bundle product o
2 min read
Idan Cohen
Idan Cohen
Marketing Expert

How To Create a New Product in Magento

This is tutorial is written to help you add new products to you Magento website
2 min read
liraz
liraz
Hosting Expert

How to Install Magento In Cpanel

Magento is an Open Source e-commerce web application. We will show users how to
2 min read
Avi Ilinsky
Avi Ilinsky
Hosting Expert

How to Set Up SSL/TLS Encryption on Magento

This article shows you how to set up SSL/TLS (HTTPS) encryption on Magento.
4 min read
Vladimir Rakov
Vladimir Rakov
Hosting Expert
HostAdvice.com provides professional web hosting reviews fully independent of any other entity. Our reviews are unbiased, honest, and apply the same evaluation standards to all those reviewed. While monetary compensation is received from a few of the companies listed on this site, compensation of services and products have no influence on the direction or conclusions of our reviews. Nor does the compensation influence our rankings for certain host companies. This compensation covers account purchasing costs, testing costs and royalties paid to reviewers.
Click to go to the top of the page
Go To Top