Le guide du débutant des blocs et widgets Magento

Les blocs et les widgets sont les principales fonctionnalités de mise en page de Magento. Ces deux fonctionnalités sont très étroitement liées et sont souvent utilisées ensemble.

Une façon de penser aux blocs est qu'ils sont des mini-pages. Un bloc peut également contenir du texte, des images, des vidéos et plus encore. Mais comme les blocs sont plus petits, vous les verrez sur les bords de votre site. Les blocs sont souvent insérés dans les en-têtes, les barres latérales et les pieds de page.

Cependant, les blocs sont placés à l'aide de widgets. Vous créez d'abord un bloc, puis vous utilisez un widget pour décider où ce bloc sera affiché.

Passons en revue quelques exemples et montrons comment les blocs et les widgets fonctionnent dans Magento.

Ce guide est tiré de Magento 2 Explained, le livre le plus vendu pour Magento 2. Nous utilisons l'exemple d'un magasin appelé "Orangeville" dans ce livre, vous le verrez donc référencé ici.

Création de blocs Magento expliquée

Passons en revue le processus de création de notre premier bloc. Celui-ci contiendra un lien HTML.

• Allez dans "Contenu", puis "Blocs".
• Cliquez sur "Ajouter un nouveau bloc" dans le coin supérieur droit.

• Entrez "Liens clés" comme "Titre du bloc". C'est ce que les visiteurs verront à l'écran.
• Entrez "key_links" comme identifiant. Cette chaîne est ce que Magento utilise pour identifier le bloc, mais les visiteurs ne le verront jamais.

• Cliquez sur l'icône de puce dans la barre d'outils de l'éditeur :

• Saisissez "À propos d'Orangeville" sous forme de puce :
• Sélectionnez le texte "À propos d'Orangeville" et cliquez sur l'icône de lien.

• Vous verrez maintenant une fenêtre contextuelle. Entrez l'URL de votre page "À propos d'Orangeville". Si vous n'êtes pas sûr de ce que c'est, vous pouvez ouvrir votre site Magento dans un nouvel onglet de navigateur et trouver l'URL, qui est probablement example.com/about-orangeville/.
• Cliquez sur "Insérer".
• Vous avez maintenant un lien "À propos d'Orangeville" dans votre bloc :

• Cliquez sur "Enregistrer le bloc".

Création de widgets Magento expliquée

Nous avons maintenant le défi de placer votre bloc dans la conception de votre site. C'est là que les widgets de Magento sont utiles. Dans Magento, un bloc n'est qu'un élément de contenu. C'est le widget qui contrôle le placement du bloc.

Cependant, ce n'est pas tout ce qu'un widget peut faire. Un widget peut placer nos nouveaux blocs simples, mais il peut également placer de nombreuses autres fonctionnalités.

• Allez dans "Contenu", puis "Widgets".
• Cliquez sur "Ajouter un widget".
• Pour "Type", choisissez "CMS Static Block".
• Pour "Thème de conception", choisissez "Magento Luma".
• Cliquez sur "Continuer".

• Entrez "Key Orangeville Links" pour le "Widget Title".
• Sous "Attribuer aux vues de la boutique", sélectionnez "Toutes les vues de la boutique".

Ensuite, nous allons contrôler sur quelles URL ce bloc apparaît.

• Cliquez sur "Ajouter une mise à jour de la mise en page".

• Choisissez "Toutes les pages".

• Choisissez "CMS Footer Links" pour l'option "Container".

Ces deux choix, "Toutes les pages" et "Liens de pied de page CMS", n'ont peut-être pas encore beaucoup de sens pour vous. Cependant, nous terminerons la création du widget et plus tard dans le chapitre, dans la section intitulée "Magento Widget Placement Explained", nous expliquerons plus en détail pourquoi nous avons fait ces choix.

Sous "Mises à jour de la mise en page", nous allons faire un deuxième choix pour savoir où placer notre widget.

• Choisissez "Tous les types de produits".
• Choisissez à nouveau "CMS Footer Links".
• Après avoir ajouté ces deux options, votre écran ressemblera à l'image ci-dessous.

A ce stade, vous avez créé le Widget et indiqué à Magento où il doit apparaître sur votre site : ce Widget apparaîtra sur toutes nos Pages et tous nos Produits.

Il est maintenant temps de choisir le contenu du widget, qui sera le bloc que vous avez créé précédemment.

• Cliquez sur "Options de widget" dans la barre latérale.
• Cliquez sur "Sélectionner un bloc".

• Vous pouvez maintenant choisir le bloc "Liens clés" que vous avez créé précédemment :

• Cliquez sur "Enregistrer".
• Visitez le devant de votre site et vous verrez que votre lien est maintenant publié dans le pied de page. Vous avez créé un bloc avec le contenu et l'avez publié dans un widget.

Créer ensemble des blocs et des widgets

Il y a certainement des étapes délicates lors de la création de blocs et de widgets. Essayons donc tout ce processus ensemble. Nous allons créer un deuxième Bloc et le placer sur notre site à l'aide d'un Widget. Ce bloc dira aux gens que nous avons une garantie de satisfaction à 100 %.

• Allez dans "Contenu", puis "Blocs".
• Cliquez sur "Ajouter un nouveau bloc".
• Titre : Satisfaction garantie
• Identifiant : garantie

• Saisissez le texte de votre bloc. J'ai écrit "Ici à Orangeville, votre satisfaction est notre priorité absolue. Si vous n'êtes pas satisfait, nous vous rembourserons votre argent."

Ensuite, nous allons télécharger une image pour notre bloc.

• Placez votre curseur dans la zone de contenu principale, sous le texte que vous venez d'écrire.
• Cliquez sur l'icône de l'arborescence dans la barre d'outils de votre éditeur.
• Lorsque vous voyez la boîte contextuelle, cliquez sur l'icône de la petite boîte.
• Trouvez une image que vous pouvez télécharger. J'ai choisi un badge 100%.

• Cliquez sur "Insérer un fichier".
• Description de l'image : Garantie de satisfaction
• Cliquez sur "Insérer".

• Vous avez maintenant un bloc qui contient à la fois du texte et votre nouvelle image.
• Cliquez sur "Enregistrer le bloc" pour terminer la création de ce bloc.

Ensuite, créons le widget qui affichera ce bloc sur notre site.

• Allez dans "Contenu", puis "Widgets".
• Cliquez sur "Ajouter un widget".
• Type : bloc statique CMS
• Thème de conception : Magento Luma

• Titre du widget : Satisfaction garantie
• Attribuer aux vues de la boutique : Toutes les vues de la boutique

• Mise à jour de la mise en page : catégories d'ancrage
• Conteneur : barre latérale principale
• Cliquez sur "Options du widget" et choisissez le bloc "Satisfaction garantie" que vous venez de créer.

• Cliquez sur "Enregistrer".
• Visitez le devant de votre site. Cliquez sur l'un des liens de catégorie dans le menu du haut. Dans l'image ci-dessous, j'ai cliqué sur "Fruit". Vous verrez maintenant votre bloc de garantie dans la barre latérale gauche :

Le placement du widget Magento expliqué

Une question courante que je reçois des apprenants de Magento concerne le placement des widgets.

Comment savez-vous choisir "CMS Footer Links" ou "Sidebar Main" pour le conteneur ? Après tout, il y a 22 choix différents, comme vous pouvez le voir sur l'image ci-dessous.

Quelle est la différence entre "En-tête de page après" et "En-tête de page après en haut" ? Quelle est la différence entre "Pied de page" et "Conteneur de pied de page" ? Ces noms sont si similaires qu'ils peuvent certainement prêter à confusion.

Malheureusement, il n'y a aucun moyen sûr de le dire à l'avance, bien que le nom vous donne une bonne idée de l'emplacement :

• Après l'en-tête de page : il se trouve probablement dans le menu principal.
• Contenu principal en bas : il s'agit probablement du bas de la partie centrale de l'écran, sous nos produits ou le contenu de la page.
• Haut de la page : cela apparaîtra en haut des pages, mais pas sur les écrans des produits.

Il convient de noter que ces options changent, même sur le même site. Si vous essayez de placer un bloc et de choisir "Tous les types de produits" pour les "Options de mise en page" de votre widget, vous obtiendrez un ensemble de choix différent, illustré dans l'image ci-dessous. Ces options fournissent des emplacements qui n'ont de sens que pour les écrans de vos produits. Par exemple, vous voyez maintenant des choix qui incluent "Conteneur de liens sociaux du produit" et "Vérifier les champs du formulaire avant". Ces placements de widgets n'ont de sens que sur les écrans de produits.

En revanche, cette liste peut parfois être beaucoup plus courte. Dans la prochaine partie de ce chapitre, nous verrons que certains Widgets ne sont livrés qu'avec trois options de conteneur.

Il n'y a donc aucun moyen garanti de savoir exactement où votre widget apparaîtra si vous choisissez un conteneur particulier. Il y aura des tests et des expérimentations au fur et à mesure que vous testerez ces différentes options.

Résumé des blocs et widgets Magento

Les blocs et les widgets vous permettent d'ajouter de nouveaux éléments au design de votre site. Cependant, certains éléments de votre site ne peuvent pas être facilement modifiés ou remplacés depuis l'interface d'administration de Magento. Ils semblent devoir être des blocs et des widgets, mais Magento ne les a pas créés de cette façon. J'ai donc créé une page avec des instructions pour mettre à jour certains de ces éléments par défaut.

Si vous êtes prêt à en savoir plus sur Magento, consultez Magento 2 expliqué, le livre le plus vendu pour Magento 2.

Nous avons également d'autres excellents tutoriels Magento en ligne, notamment :

• Le guide du débutant pour comprendre les taxes de Magento
• Images de base, petites, miniatures et échantillons dans Magento
• Découvrez ce que sont les index Magento 2 et comment vous pouvez les gérer