Comment créer des widgets Magento 2 personnalisés

Les widgets permettent aux administrateurs de magasins Magento 2 d'ajouter du contenu statique/dynamique aux pages et aux blocs CMS, offrant de nombreuses fonctionnalités et une mise en œuvre simple. Les widgets sont des composants réutilisables qui peuvent être ajoutés dans n'importe quel bloc CMS de Magento 2.

Par conséquent, ils permettent aux développeurs de Magento 2 et aux administrateurs de magasins d'ajouter des interfaces et des fonctionnalités interactives dans le front-end sans avoir à en savoir beaucoup sur la programmation. Bien sûr, ils doivent encore connaître Magento pour créer un widget.

Le but de cet article est de montrer comment créer des widgets dans Magento 2, en mettant l'accent sur les widgets personnalisés.

Widgets Magento 2

Magento 2 est la dernière version de Magento, l'une des principales plateformes de commerce électronique aujourd'hui. Les widgets jouent un rôle important dans Magento 2, notamment du point de vue des fonctionnalités. En plus d'offrir plus de fonctionnalités côté utilisateur, les widgets Magento aident les administrateurs à ajouter du contenu statique ou dynamique aux pages et aux blocs CMS.

Mais, d'un point de vue technique… Qu'est-ce qu'un widget Magento ?

Un widget Magento 2 est essentiellement une extension Magento conçue avec un ensemble d'options de configuration avancées. En raison d'une plus grande flexibilité et d'un meilleur contrôle, ils sont utilisés pour fournir des informations et du contenu marketing via le panneau d'administration de Magento. L'un des avantages des widgets Magento 2 est que vous pouvez les "appeler" de n'importe où sur le site.

Les widgets permettent également aux administrateurs d'ajouter des interfaces et des fonctionnalités interactives dans le front-end Magento, sans avoir à coder (en fait, sans même savoir coder).

Magento 2 propose plusieurs types de widgets

Avant de passer à l'implémentation, regardons de plus près la gamme standard de widgets supportés dans Magento 2 :

• Produits récemment comparés - Vous devez avoir observé ce widget lors de la navigation sur les produits de vos sites de commerce électronique préférés. Ce widget est utilisé pour afficher les produits récemment consultés ou comparés dans la barre latérale d'une page de catalogue. Ils peuvent également apparaître dans votre boutique en fonction du thème. L'un des points cruciaux est que le nombre de produits répertoriés dans chaque bloc peut être configuré.
• Commandes et retours - Chaque fois que vous achetez un produit en ligne, il existe un widget indispensable qui vous permet d'accéder rapidement aux commandes et aux retours. Si un utilisateur souhaite examiner les produits commandés ou retournés, il peut remplir les détails nécessaires tels que l'ID de commande, la dernière date de facturation, la recherche de la commande par, l'e-mail, etc.
• Liste des produits du catalogue — Il s'agit d'un autre widget largement utilisé ; tout le monde connaît les sections "produits en vedette" sur les sites de commerce électronique, car presque tous les sites en ont une. Les produits présentés sont généralement placés sur la page d'accueil à des fins de promotion du produit. Le produit particulier est affiché avec de brefs détails tels que le prix, les fonctionnalités et les options telles que l'ajout au panier, l'ajout à la liste de souhaits et l'ajout à une fonction de comparaison.
• Catalog Product Link — L'objectif principal du widget Catalog Product Link est de permettre aux administrateurs de gérer les liens des produits, y compris les produits connexes, les ventes croisées, les ventes incitatives et les produits groupés. Lorsque vous visitez la page de lien des produits du catalogue, vous verrez différentes catégories de catalogue initiées par une introduction. Vous y trouverez des liens de produits de catalogue avec divers sous-liens, tels que l'attribution de liens de produits de catalogue, les attributs de liens de produits de catalogue, les suppressions de liens de produits de catalogue, les types de liens de produits de catalogue, etc.
• Lien de catégorie de catalogue - Dans les sites Web de commerce électronique, en particulier ceux basés sur les produits, vous ne trouverez aucune pénurie de widgets de lien de catégorie de catalogue.
• Widget de bloc personnalisé - Il est possible de combiner des blocs, des widgets et des pages personnalisées pour afficher des parties du catalogue ou d'autres informations que les clients pourraient trouver utiles.

Ceux-ci peuvent être utilisés pour améliorer l'expérience utilisateur et ajouter des fonctionnalités au magasin. Les blocs et les widgets sont des éléments importants de la plupart des sites Web de commerce électronique. Ils permettent aux utilisateurs de générer et de contrôler rapidement du contenu, et peuvent être utilisés pour effectuer des actions telles que :

• Ajouter des blocs dynamiques/informatifs dans les barres latérales
• Ajouter des bannières dans les pages CMS
• Ajouter des menus personnalisés
• Ajouter des interfaces utilisateur interactives

Le cas des widgets personnalisés Magento 2

Tout site Web ou page Web a besoin de nombreuses fonctionnalités pour fonctionner correctement et attirer plus de visiteurs, et créer une expérience utilisateur attrayante est un must dans le commerce électronique. C'est là que les widgets Magento 2 personnalisés entrent en jeu, et c'est ce qu'ils sont censés faire.

Les widgets sont de plus petits ensembles de code que nous pouvons ajouter au magasin. En utilisant de simples liens vers du code dynamique, les widgets peuvent afficher toutes sortes de données utiles conçues pour aider les visiteurs et améliorer leur expérience. La possibilité de stimuler l'engagement à l'aide de widgets réutilisables à faible coût signifie évidemment beaucoup, mais parfois, il ne s'agit pas seulement de choisir et d'ajouter un widget prêt à l'emploi.

L'utilisation de la fonctionnalité Custom Widget dans Magento 2 nous permet de créer nos propres modèles de widgets. Un widget personnalisé peut parfois offrir un moyen encore meilleur d'éditer ou d'ajouter du contenu de qualité à l'intérieur des blocs ou des pages CMS.

Cependant, avant de passer aux widgets personnalisés, nous devons examiner un cas d'utilisation standard pour les widgets dans Magento 2. Examinons quelque chose de basique et largement utilisé, par exemple :

Comment ajouter une nouvelle liste de produits à la page d'accueil à l'aide d'un widget

Ce widget simple nous permet d'ajouter une nouvelle liste de produits partout où cela est nécessaire sur le site Web, et il existe différentes manières de répertorier les nouveaux produits dans Magento 2.

Pour ajouter une liste de produits Magento à la page d'accueil, il vous suffit de suivre un processus simple :

• Connectez-vous à la page d'administration de Magento 2 et allez dans Contenu > Widget

• Cliquez sur le bouton Ajouter un widget . Après cela, nous serons redirigés vers l'onglet Paramètres , où nous devons sélectionner les options et les thèmes de type et de conception .

• Nous pouvons voir la capture d'écran ci-dessous, dans laquelle nous avons déjà sélectionné la liste des nouveaux produits du catalogue que nous afficherons sur le front-end.

• Nous avons sélectionné LUMA comme option de thème de conception.

• Après avoir sélectionné les deux valeurs, nous devons passer à la deuxième étape, où nous devons remplir les propriétés de la vitrine. Nous devons maintenant définir le titre du widget et les propriétés de la vitrine, telles que le titre du widget et la vue du magasin . Nous utilisons Toptal New Product List et All Store Views .

• La partie la plus importante est la section Mises à jour de la mise en page , qui nous indiquera où ce widget va apparaître (par exemple, la page d'accueil, la page de liste, la page de paiement, etc.). Il est également possible de définir une zone dans laquelle le conteneur apparaîtra, par exemple, sous l'en-tête, au-dessus du pied de page, pied de page, etc.

Les paramètres de mise en page des mises à jour vous offrent les options suivantes :

• Afficher sur : Page spécifiée ou Toutes les pages.
• Page : Page d'accueil du CMS
• Conteneur : zone de contenu principale
• Modèle : Ici, vous pouvez sélectionner le style dans lequel vous souhaitez afficher les nouveaux produits Mode Grille ou Mode Liste

Une fois que nous avons sélectionné l'option Page spécifiée , nous pouvons procéder à la définition des propriétés, ce qui nous permet d'afficher le widget sur une page particulière. Ici, nous avons le menu déroulant Page , qui nous permet de sélectionner la page d'accueil du CMS . Ensuite, nous devons sélectionner le conteneur et le modèle que nous allons utiliser pour afficher le widget dans une section particulière.

Enfin, nous passons au dernier onglet, qui comprend les options de widget. Ici, nous pouvons définir la Condition , comme le type de produits qui vont être affichés, ou inclure des limites au nombre de produits, etc.

Si nous sélectionnons Tous les produits , le produit ajouté le plus récemment sera affiché dans cette section. Si nous sélectionnons Nouveaux produits , seuls les produits que nous avons marqués comme « Nouveaux » seront affichés dans cette section. Si nous voulons laisser nos clients contrôler la navigation pour plusieurs listes, nous devons définir le contrôle de la page d'affichage sur "Oui". Si nous avons sélectionné "Oui", alors il est nécessaire d'entrer le nombre de produits dans la liste.

Dans Nombre de produits à afficher , nous pouvons définir le nombre de produits pouvant être affichés dans la section Nouveaux produits . De plus, nous pouvons modifier les paramètres de durée de vie du cache si nécessaire.

Nous devons maintenant enregistrer ce widget et vider le cache de Magento 2. Cela peut être fait depuis l'administrateur ou la ligne de commande. Nous pouvons utiliser la commande suivante pour vider le cache :

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

Ensuite, nous pourrons voir les nouveaux produits sur la page d'accueil.

Comment créer un widget personnalisé dans Magento 2

Nous allons maintenant apprendre à créer des widgets personnalisés pour Magento 2. Les widgets personnalisés offrent le meilleur moyen d'ajouter et de modifier du contenu dans des blocs ou des pages CMS, car ils peuvent être adaptés à vos besoins.

Commençons par les bases. Nous savons tous comment créer un module, n'est-ce pas ? Juste au cas où vous ne seriez pas familiarisé avec la création de modules personnalisés dans Magento 2, nous avons un excellent tutoriel qui couvre le processus en profondeur.

Passons maintenant au processus étape par étape de création de widgets personnalisés dans Magento 2.

Tout d'abord, nous devons créer un nouveau module qui nécessitera un espace de noms et des dossiers de modules. Pour cet exemple, nous allons utiliser Toptal pour l'espace de noms et CustomWidget pour le nom du module. Commençons donc comme d'habitude avec composer.json , registration.php et etc/module.xml .

app/code/Toptal/CustomWidget/composer.json

Ce fichier sera chargé par Composer à chaque fois que nous l'exécuterons, même si nous n'utilisons pas réellement Composer avec notre module.

Nous devons maintenant enregistrer notre module auprès de Magento, nous devons donc créer le register.php à l'emplacement suivant : app/code/Toptal/CustomWidget/registration.php .

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

Maintenant, nous allons créer le dernier fichier d'enregistrement, module.xml .

app/code/Toptal/CustomWidget/etc/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>

Après avoir terminé l'étape d'enregistrement, nous créons ensuite le fichier de configuration widget.xml .

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

 <?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="Toptal\CustomWidget\Block\Widget\Samplewidget"> <label>Toptal 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>

Dans le code ci-dessus, nous obtenons le Title et le Content en tant que paramètres à afficher partout où le widget est appelé. La <widget> contient la classe de bloc Toptal\CustomWidget\Block\Widget\Samplewidget . Cette classe est ralentie dans Block/Widget/Samplewidget.php . La classe indique à nos widgets quel modèle utiliser.

L'extrait de code suivant montre comment définir un bloc pour le widget ; nous allons définir notre modèle ici. Voyons à quoi ça ressemble.

app/code/Toptal/CustomWidget/Block/Widget/Samplewidget.php

 <?php namespace Toptal\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"; }

Toptal\CustomWidget\Block\Widge\Samplewidget est déclaré au-dessus du code. Dans ce fichier, nous affectons un fichier de modèle personnalisé à l'intérieur de la variable $_template .

Ensuite, nous verrons ce que contient notre modèle de widget.

app/code/Toptal/CustomWidget/Block/view/frontend/templates/widget/samplewidget.phtml

 <?php if($block->getData('widgettitle')): ?> <h2 class='toptal-title'><?php echo $block->getData('widgettitle'); ?></h2> <?php endif; ?> <?php if($block->getData('widgetcontent')): ?> <h2 class='toptal-content'><?php echo $block->getData('widgetcontent'); ?></h2> <?php endif; ?>

Ici, nous pouvons voir comment récupérer la valeur des paramètres du widget. C'est simple:

$this->getData('widgettitle');

et

$this->getData('widgetcontent');

Quel est notre résultat final ? Laissez-moi vous montrer à quoi cela ressemble dans Magento Admin :

Maintenant, nous devons enregistrer ce widget et vider le cache. Comme indiqué précédemment, cela peut être fait depuis l'administrateur ou la ligne de commande, en utilisant php bin/magento cache:clean et php bin/magento cache:flush

Vous pouvez télécharger ce module simple ici. Ce n'est évidemment pas un modèle de widget Magento 2 complet, mais c'est toujours une aide à l'apprentissage. Si vous avez besoin de plus de ressources ou si vous êtes relativement nouveau sur Magento, la documentation officielle de Magento 2 est le point de départ évident.

Enfin, j'aimerais mentionner quelques blogs de développement personnels que j'ai trouvés très utiles. Alan Storm a probablement le contenu le plus didactique en matière d'apprentissage de Magento, et je pense que vous devriez également consulter le blog d'Alan Kent.

Widgets : une partie cruciale de la vue d'ensemble

Le but de cet article était de fournir un guide pour la création de widgets dans Magento 2, en commençant par un didacticiel de base étape par étape couvrant le développement de widgets Magento 2 et la création de widgets personnalisés. Je suis évidemment un fan de ce dernier, car les solutions personnalisées ont tendance à offrir plus de flexibilité et de fonctionnalité.

Les widgets Magento fournissent des fonctionnalités frontales cruciales, il n'est donc pas exagéré de dire que des widgets personnalisés intelligents peuvent vous aider à faire passer votre prochain projet Magento au niveau supérieur. Cela nous permet d'implémenter encore plus de fonctionnalités, d'ajouter différents types d'éléments à la page d'accueil à l'aide de différents widgets et, en fin de compte, ils offrent simplement aux développeurs une plus grande liberté de création.

Mais il ne s'agit pas seulement d'améliorer l'expérience utilisateur et les conversions, ou de créer un design impressionnant. Tous sont évidemment une priorité pour tout client, mais il y a des gains plus petits et moins évidents. Par exemple, les widgets Magento peuvent également faire gagner beaucoup de temps et de maux de tête du côté de l'administrateur, et chaque client cherche également à économiser des heures de travail.

Cependant, cela dépasse le cadre de cet article. Mon intention était de fournir un aperçu technique rapide, un didacticiel de widget Magento 2 facile à suivre, et non de discuter du retour sur investissement et du marketing.