Créer un widget custom dans Magento 2 peut être utile, notamment car cette solution permet de placer un bloc statique de manière beaucoup plus sélective (on peut cibler une catégorie unique du catalogue par exemple) et depuis l’interface d’admin.
Dans ce billet:
- Créer un widget custom dans Magento 2
- Afficher un widget dans une seule catégorie du catalogue
- Afficher un widget dans une page CMS custom: [Magento 2] Afficher des widgets sur n’importe quelle page du site (CMS custom, category, product, …)
- [Magento 2] Ajouter un sélecteur d’image ou un champ WYSIWYG dans un widget custom
- [Magento 2] Initiation à l’injection de dépendances en créant un widget custom qui permet l’upload d’une image et l’ajout d’un lien vers une page CMS
- Ajouter un bloc statique dans un widget custom Magento 2
- [Magento 2] Utiliser le source model Yesno pour faire apparaître de manière dynamique et sous condition un champ caché dans un widget custom
- Une liste de ressources en ligne intéressantes sur le sujet
Créer un widget custom dans Magento 2
Je me suis inspiré de la doc officielle et d’un autre tuto pour arriver à mes fins, la doc officielle étant incomplète et les exemples de code erronés!
On part du principe qu’on crée un widget pour le vendor Sodifrance et le module Pdv.
Initialiser le widget
app/code/Sodifrance/Pdv/registration.php
|
1 2 3 4 5 6 |
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Sodifrance_Pdv', __DIR__ ); |
app/code/Sodifrance/Pdv/etc/widget.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd"> <widget class="Sodifrance\Pdv\Block\Widget\Test" id="pdv_test_widget"> <label>Test Widget</label> <description>This is a test widget!!!</description> <parameters> <parameter name="title" xsi:type="text" required="true" visible="true" sort_order="10"> <label>Label</label> </parameter> <parameter name="size" xsi:type="select" visible="true" required="true" sort_order="20"> <label translate="true">Size</label> <options> <option name="s" value="S"> <label>S</label> </option> <option name="m" value="M" selected="true"> <label>M</label> </option> <option name="l" value="L"> <label>L</label> </option> </options> </parameter> </parameters> </widget> </widgets> |
Créer un template pour le widget
app/code/Sodifrance/Pdv/view/frontend/templates/widget/test.phtml
|
1 2 3 4 5 |
<?php /** \Sodifrance\Pdv\Block\Widget\Test $block */ ?> <h3><?= $block->escapeHtml($block->getData('title')) ?></h3> <h3><?= $block->escapeHtml(__('Size:')) ?> <?= $block->escapeHtml($block->getData('size')) ?></h3> |
Créer un block pour le widget
app/code/Sodifrance/Pdv/Block/Widget/Test.php
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php namespace Sodifrance\Pdv\Block\Widget; use Magento\Framework\View\Element\Template; use Magento\Widget\Block\BlockInterface; class Test extends Template implements BlockInterface { protected $_template = "widget/test.phtml"; } |
Ajouter une dépendance au module Magento_Widget dans le fichier module.xml
app/code/Sodifrance/Pdv/etc/module.xml
|
1 2 3 4 5 6 7 8 9 |
<?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="Sodifrance_Pdv" setup_version="1.0.0"> <sequence> <module name="MGS_ThemeSettings" /> <module name="Magento_Widget" /> </sequence> </module> </config> |
Commandes à exécuter
Appliquer la dépendance de module déclarée dans le fichier module.xml:
|
1 2 |
$ n98-magerun2 module:disable Sodifrance_Pdv $ n98-magerun2 module:enable Sodifrance_Pdv |
Flusher les caches:
|
1 |
$ n98-magerun2 cache:flush |
Accès BO à votre widget custom
- Contenu > Widgets > Ajouter un widget
- Choisir le type de widget dans la liste déroulante: « Test Widget »
Pour afficher un widget dans une seule catégorie du catalogue:
- Contenu > Widgets > Ajouter un widget
- Choisir le type de widget et le thème de design
- Remplir les champs obligatoires de la section « Propriétés du front office »
- Dans la section « Mises à jour d’agencements » > Ajouter une mise à jour d’agencements
- Display on: catégorie ancrée
- Catégories: Spécifique à Categories
- Cliquer sur l’icône « Ouvrir le sélecteur »
- Déplier l’arbre de catégories/sous-catégories et cocher la ou les catégories dans laquelle le widget doit s’afficher; il ne s’affichera pas dans les autres
Ajouter un bloc statique dans un widget custom Magento 2
[Magento 2] Inclure un bloc statique depuis un champ WYSIWYG (nouvelle fenêtre).
Une liste de ressources en ligne intéressantes sur le sujet
Dépôts Git de démonstration, proof of concepts, etc …
- Magento 2: Widgets – This module is to demonstrate the different fields available for Magento 2 widgets. The idea is to use this as a base or reference for creating your own widgets. There is an example widget provided which has all the possible field types available.
Tutoriels
- inchoo.net – Magento 2 custom widget. Now we will see how we can create a custom one, or even better, how to extend the core one. For this example I picked default catalog product listing widget that I will extend with sorting fields for better customization of this widget.