Comment implémenter un widget personnalisé dans Magento 2

How to Implement a Custom Widget in Magento 2

If you're diving into Magento 2 development, you'll quickly realize that widgets are one of the most powerful tools at your disposal. They allow you to create reusable blocks of contenu that peut être easily managed from the Magento panneau d'administration. Whether you're looking to display a custom banner, a product slider, or any other dynamic contenu, widgets can save you a ton of time and effort.

Dans cet article, nous'll walk through the process of creating a custom widget in Magento 2. By the end, you'll have a solid understanding of comment implement your own widgets and integrate them into your store.

What is a Widget in Magento 2?

Avant we jump into the code, let's clarify what a widget is in the context of Magento 2. A widget is essentially a reusable block of contenu that peut être inserted into various parts of your store, tel que the homepage, page de catégories, or even individual page produits. Widgets are managed through the Magento panneau d'administration, making it easy for non-technical utilisateurs to update contenu without touching the code.

Step 1: Create a Module

First things first, we need to create a custom module for our widget. If you're not familiar with creating modules in Magento 2, don't worry—it's straightforward. Voici comment you can do it:

1. Create the répertoire du structure du module:

app/code/Magefine/CustomWidget

2. Create the registration.php fichier:

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

3. Create the module.xml fichier in the etc répertoire:

<?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="Magefine_CustomWidget" setup_version="1.0.0"/>
</config>

With these fichiers in place, your module is ready to go. Run les éléments suivants command to enable it:

php bin/magento setup:upgrade

Step 2: Define the Widget

Now that our module is set up, we need to define the widget itself. This involves creating a widget XML fichier that Magento will use to recognize and display our widget in the panneau d'administration.

1. Create the widget.xml fichier in the etc répertoire:

<?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 id="magefine_customwidget" class="Magefine\CustomWidget\Block\Widget\CustomWidget">
        <label>Custom Widget</label>
        <description>This is a custom widget created by Magefine.</description>
        <parameters>
            <parameter name="title" xsi:type="text" visible="true" required="true">
                <label>Title</label>
            </parameter>
            <parameter name="content" xsi:type="textarea" visible="true" required="true">
                <label>Content</label>
            </parameter>
        </parameters>
    </widget>
</widgets>

In this XML fichier, we've defined a widget with two paramètres: title and content. These paramètres sera editable from the Magento panneau d'administration when you add the widget to a page.

Step 3: Create the Widget Block

Ensuite, we need to create a classe de bloc that will handle the rendering of our widget. This block will use the paramètres defined in the widget.xml fichier to generate the widget's output.

1. Create the classe de bloc in app/code/Magefine/CustomWidget/Block/Widget/CustomWidget.php:

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

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

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

    public function getTitle()
    {
        return $this->getData('title');
    }

    public function getContent()
    {
        return $this->getData('content');
    }
}

This classe de bloc extends Magento's Template class and implements the BlockInterface. It also defines two méthodes, getTitle() and getContent(), which sera used to retrieve the widget's paramètres.

Step 4: Create the Template File

Now that we have our classe de bloc, we need to create a fichier de template that will define the HTML structure of our widget.

1. Create the fichier de template in app/code/Magefine/CustomWidget/view/frontend/templates/widget/custom_widget.phtml:

<div class="custom-widget">
    <h2><?= $block->getTitle() ?></h2>
    <p><?= $block->getContent() ?></p>
</div>

This fichier de template simply outputs the title and contenu of the widget within a div element. Vous pouvez customize this HTML structure to fit your specific needs.

Step 5: Add the Widget to a Page

With everything in place, it's time to add our custom widget to a page in Magento. Voici comment you can do it:

1. Log in to the Magento panneau d'administration.
2. Navigate to Content > Pages.
3. Edit or create a new page.
4. In the contenu editor, click on the Insert Widget button.
5. Select your custom widget from the list.
6. Fill in the title and contenu champs.
7. Save the page and pavis it to see your custom widget in action.

Step 6: Customize and Extend

Now that you have a basic custom widget, you can start customizing and extending it to fit your specific needs. Par exemple, you could add more paramètres, tel que an image upload champ, or integrate with other Magento fonctionnalités like liste de produitss or client data.

Here's an exemple of how you could add an image paramètre to your widget:

1. Update the widget.xml fichier to include an image paramètre:

<parameter name="image" xsi:type="image" visible="true" required="false">
    <label>Image</label>
</parameter>

2. Update the classe de bloc to include a méthode for retrieving the image URL:

public function getImageUrl()
{
    return $this->getData('image');
}

3. Update the fichier de template to display the image:

<div class="custom-widget">
    <h2><?= $block->getTitle() ?></h2>
    <?php if ($block->getImageUrl()): ?>
        <img src="<?= $block->getImageUrl() ?>" alt="<?= $block->getTitle() ?>" />
    <?php endif; ?>
    <p><?= $block->getContent() ?></p>
</div>

With these changes, your widget will now support an optional image, which peut être uploaded and managed through the Magento panneau d'administration.

Conclusion

Creating a custom widget in Magento 2 is a powerful way to add dynamic, reusable contenu to your store. By following the étapes outlined in this post, you can create a basic widget and extend it to meet your specific needs. Whether you're looking to display custom banners, product sliders, or any other type of contenu, widgets provide a flexible and utilisateur-friendly solution.

If you're looking for more advanced fonctionnalités or need help with your Magento 2 store, be sure to check out the extensions and hosting solutions available at magefine.com. Our team is dedicated to helping you get the most out of your Magento store.

Happy coding!