Tagcategory

[Magento 2] Afficher un layout différent selon une catégorie spécifique

Astuce testée fonctionnelle Magento 2.3!

Afficher un page layout différent selon une catégorie de produits spécifique

Ce que je veux: j’ai plusieurs catégories de produits dans ma boutique Magento 2. L’affichage des listes produits de l’une de ces catégories (la catégorie Abonnements dans ce tutoriel) doit bénéficier d’un affichage complètement différent par rapport aux listes produits des autres catégories de mon site Magento 2, dont l’affichage restera « standard ».

Nativement, c’est l’articulation du layout vendor/magento/module-catalog/view/frontend/layout/catalog_category_view.xml et du template vendor/magento/module-catalog/view/frontend/templates/product/list.phtml qui génèrent l’affichage de l’ensemble des listes produits dans les pages du catalogue d’une boutique Magento 2.

Nous allons créer un nouveau page layout XML qui servira à rediriger vers un template PHTML de liste spécifique. Une action en backoffice sera nécessaire pour affecter ce nouveau page layout aux catégories concernées.

Conventions pour ce tuto: je pars du principe qu’il existe un Vendor/theme Sodifrance/pdv dans votre arborescence de fichiers et que la catégorie pour laquelle nous cherchons à surcharger l’affichage s’appelle Abonnements.

Commencer par déclarer un nouveau page layout XML dans votre thème

Chemin vers ce fichier: app/design/frontend/Sodifrance/pdv/Magento_Theme/layouts.xml

Créer ensuite le nouveau page layout XML abonnements_subcategory.xml correspondant

Source: Magento2: Add a new page layout.

Nous allons créer un page layout XML spécifique app/design/frontend/Sodifrance/pdv/Magento_Theme/page_layout/abonnements_subcategory.xml.

L'<update handle="empty"/> et le contenu du <referenceContainer name="page.wrapper"> sont copiés/collés du page layout vendor/magento/module-theme/view/frontend/page_layout/1column.xml dont je veux reprendre les bases. Aucun merge n’étant prévu par Magento 2 à ce niveau (jusqu’à ce qu’on me contredise, je ne peux déclarer nulle part que mon nouveau layout abonnements_subcategory.xml doit hériter d’un parent existant column1.xml), je suis obligé de faire du copier/coller, sinon mon front-end n’affiche plus rien…

Créer un template PHTML custom list_abonnements.pthml dans votre thème

Ce template sera une surcharge du fichier vendor/magento/module-catalog/view/frontend/templates/product/list.phtml, située dans app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/list_abonnements.phtml et dans laquelle vous consignerez les spécificités d’affichage liées à la catégorie Abonnements de votre boutique.

Je ne vous mets pas d’exemple de code ici. Votre projet n’aura pas les mêmes spécificités que le mien.

Enfin, rajouter un referenceContainer à notre list_abonnements.phtml spécifique

Source: Different list.phtml for categorys in the backend of Magento 2.1.7.

Sur les bases du fichier app/design/frontend/Sodifrance/pdv/Magento_Theme/page_layout/abonnements_subcategory.xml crée précédemment, nous allons ajouter un referenceContainer à notre template PHTML de liste spécifique app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/list_abonnements.phtml.

Affecter le nouveau layout à vos catégories via l’interface d’admin

En backoffice: Catalogue > Catégories > choisir une catégorie ou une sous-catégorie dans l’arborescence de votre catalogue > volet Design > champ Agencement > sélectionner votre page layout ([PDV] Abonnements (sous-catégorie) dans mon exemple).


Autre méthode

Source: Different template for different categories in magento 2 [category_id layout handle in M2].

Il ne s’agit pas à proprement parler d’un override. Il faut créer un fichier XML catalog_category_view_id_{{id}}.xml sous app/design/frontend/<vendorName>/<themeName>/Magento_Catalog/layout/, où {{id}} est l’ID de votre catégorie (visible en admin sous Catalogue > Catégories > choisir la catégorie/sous-catégorie).

Commande à exécuter pour voir les modifs en front: $ n98-magerun2 cache:clean.

[Magento 2] Créer un widget custom et l’utiliser pour afficher un bloc statique dans une catégorie unique du catalogue

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

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

app/code/Sodifrance/Pdv/etc/widget.xml

Créer un template pour le widget

app/code/Sodifrance/Pdv/view/frontend/templates/widget/test.phtml

Créer un block pour le widget

app/code/Sodifrance/Pdv/Block/Widget/Test.php

Ajouter une dépendance au module Magento_Widget dans le fichier module.xml

app/code/Sodifrance/Pdv/etc/module.xml

Commandes à exécuter

Appliquer la dépendance de module déclarée dans le fichier module.xml:

Flusher les caches:

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.

© 2021 devfrontend.info

Theme by Anders NorénUp ↑