Day 12/100: Adding a Custom Widget in Magento 2 ??

Welcome to Day 12 of my Magento 2 journey! Today, we’ll learn how to create a custom widget in Magento 2. Widgets allow users to easily add custom content or functionality to CMS pages, blocks, and layouts from the Magento admin panel.

Step-by-Step Guide to Creating a Custom Widget:

1) Create the widget.xml Configuration

Widgets in Magento 2 are defined through widget.xml. This file specifies the widget's parameters and settings.

Location:

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

Here’s the content for widget.xml:

<?xml version="1.0"?>
<widgets xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/widget.xsd">
    <widget id="pratdemon_customwidget" class="Pratdemon\CustomWidget\Block\Widget\CustomWidget" is_enabled="true">
        <label>Pratdemon Custom Widget</label>
        <description>This is a custom widget created for demonstration purposes.</description>
        <parameters>
            <parameter name="custom_text" xsi:type="text">
                <label>Custom Text</label>
                <description>Enter the custom text to display in the widget.</description>
                <required>true</required>
            </parameter>
        </parameters>
    </widget>
</widgets>        

• id="pratdemon_customwidget": Unique identifier for the widget.
• class="Pratdemon\CustomWidget\Block\Widget\CustomWidget": The block class that renders the widget.
• <parameter name="custom_text" xsi:type="text">: This defines a text input field in the admin, allowing users to enter custom text when configuring the widget.

2) Create the Widget Block Class

Next, create the block class that will handle rendering the widget.

Location:

app/code/Pratdemon/CustomWidget/Block/Widget/CustomWidget.php        

Here’s the content for CustomWidget.php:

<?php
namespace Pratdemon\CustomWidget\Block\Widget;

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

class CustomWidget extends Template implements BlockInterface
{
    protected $_template = 'widget/customwidget.phtml';

    public function getCustomText()
    {
        return $this->getData('custom_text');
    }
}        

• CustomWidget extends Template implements BlockInterface: The widget block must implement BlockInterface.
• The getCustomText() method retrieves the custom text entered by the user.

3) Create the Template File

This template will render the content of the widget on the frontend.

Location:

app/code/Pratdemon/CustomWidget/view/frontend/templates/widget/customwidget.phtml        

Here’s the content for customwidget.phtml:

<?php if ($block->getCustomText()): ?>
    <div class="custom-widget-text">
        <h2><?php echo $block->escapeHtml($block->getCustomText()); ?></h2>
    </div>
<?php endif; ?>        

This file checks if the custom text is set, and then it displays the text inside an HTML div block.

4) Module Registration and Declaration

Make sure your module is registered and declared correctly.

Module Registration (registration.php):

app/code/Pratdemon/CustomWidget/registration.php        

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

Module Declaration (module.xml):

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

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

5) Add the Widget in Admin Panel

Now, to use the widget:

1. Go to Content > Pages or Content > Blocks in the admin panel.
2. Select a CMS page or block, and in the content section, click the Insert Widget icon.
3. Select "Pratdemon Custom Widget" from the dropdown.
4. Enter the custom text you want to display.
5. Save and refresh the frontend to see the widget in action.

How the Custom Widget Works:

1. Admin Configuration (widget.xml):
2. Block Class (CustomWidget.php):
3. Template Rendering (customwidget.phtml):
4. Inserting the Widget:

That’s it! You’ve now created a fully functional custom widget in Magento 2. This widget can be easily configured by admins to display custom content on the frontend. Widgets are a powerful tool for creating reusable, configurable components that enhance the CMS capabilities of Magento.

Stay tuned for the next challenge as we explore more Magento 2 features!