Taglayout

[Magento 2] Afficher de manière dynamique la base URL d’un store dans un bloc statique, un template PHTML, un layout XML

Note: billet amené à être enrichi au gré de mes besoins.

Doc officielle: Using Markup Tags in Links

Blocs CMS statiques

Documentation

Templates PHTML

Testé fonctionnel Magento 2.4:

Layouts XML

Pas testé:

[Magento 2] Ajouter des blocs enfants via les layouts XML et la fonction getChildHtml dans un template PHTML

Note: voir ici pour les méthodes communément disponibles pour la variable $block. Elles vous permettront de récupérer pas mal d’infos disponibles dans n’importe quel template PHTML.

Fonctionnel Magento 2.4. Sources:

app/code/Magento/Sales/view/frontend/layout/sales_order_view.xml

Dans le DOM, les block imbriqués seront inclus à l’endroit où se trouve déclarée la fonction dans le PHTML du referenceContainer:

Comment afficher un child block en particulier?

[Magento 2] Déplacer un éléments existant dans un layout XML avec la balise Move

Déplacer le titre de page element="page.main.title" dans les pages du compte client

Par défaut dans Magento 2 (version 2.4 lors de mes tests) le titre de page n’est pas posé au même endroit dans le DOM/layout de l’ensemble des pages du compte client.

Exemple pour la page « Modifier les informations du compte »

Pour cette page, on va surcharger le fichier vendor/magento/module-customer/view/frontend/layout/customer_account_edit.xml pour y ajouter la ligne de code suivante:

Problème: avec cette surcharge, nous avons impacté uniquement la page de modification des informations du compte. Si je me rends, par exemple, dans la page « Carnet d’adresses » le titre de page n’est logiquement pas posé au même endroit que dans la page que nous venons de surcharger.

Exemple pour homogénéïser la position du titre sur l’ensemble des pages du compte client

Procéder de la même manière que pour la page « Modifier les informations du compte », mais placer la balise move dans une surcharge du fichier vendor/magento/module-customer/view/frontend/layout/default.xml:

Déplacer les notifications element="page.messages" dans les pages du compte client

Note: en général, cette modification va de pair avec le déplacement du titre de page.

Ces notifications apparaissent lorsque l’utilisateur enregistre des actions de modification via l’un des formulaires de son compte client.

On va surcharger (si ce n’est pas déjà fait) le fichier vendor/magento/module-customer/view/frontend/layout/customer_account_edit.xml pour y ajouter la ligne de code suivante:

Ici, modifier la valeur de before="" si besoin.

[Magento 2] Utilisation de before et after sur les containers dans les layout xml

Doc officielle: Layout instructions

Le truc à retenir est que les attributs before et after applicables sur les balises container et block des layouts XML de Magento 2 ont BESOIN d’un contexte pour fonctionner. Exemple:

Pas bon:

L’attribut before ne fonctionnera PAS! Votre block cart.product.slider ne s’affichera pas ou s’affichera au mauvais endroit (ou au bon endroit sur un malentendu… jusqu’à la prochaine modification de layout que vous effectuerez).

Bon:

L’attribut before fonctionnera!

Vous avez saisi la différence entre les deux samples de code ci-dessus?

La ligne <referenceContainer name="content"> précise un contexte, une parenté. Les containers cart.product.slider.container et page.bottom.container sont des enfants directs du container content.

[Magento 2] Afficher une liste produits par sous-catégories sur la page principale d’une catégorie

Par défaut, Magento 2 utilise un template PHTML unique pour afficher les listes produits d’une catégorie et de ses sous-catégories. Il s’agit du fichier vendor/magento/module-catalog/view/frontend/templates/product/list.phtml.

L’un des problèmes posé par ce mode de fonctionnement réside dans le fait qu’on se retrouve avec une page catégorie principale/main qui affiche, dans une liste unique, tous les produits contenus dans cette catégorie ainsi que ses sous-catégories et ceux sans aucun distingo. Ce qui nous donne, de manière très schématisée:

Le code décrit dans ce billet va permettre d’obtenir ceci:

Création d’un Helper: app/code/Pdv/Catalog/Helper/Data.php

Note: j’avais déjà créé ce Helper pour récupérer les Simple Products associés à un Configurable Product. Consulter le billet en question pour de plus amples infos si vous ne souhaitez pas exploiter tout le code ci-dessous. Ce Helper étend vendor/magento/module-catalog/Helper/Data.php.

Rajouts par rapport au Helper existant:

Sous la ligne namespace Pdv\Catalog\Helper;:

Sous la ligne protected $typeConfigurableResourceModel; // 1. Du nom du model dont je veux injecter la propriété de la classe:

Dans le constructeur, sous la ligne \Magento\ConfigurableProduct\Model\ResourceModel\Product\Type\Configurable $typeConfigurableResourceModel // 2. Demande à Magento une instance de mon configurable ressource model (EN RAJOUTANT UNE VIRGULE en fin de la ligne existante):

Sous la ligne $this->typeConfigurableResourceModel = $typeConfigurableResourceModel; // 3. ...et mappe le paramètre du constructeur avec la propriété de la classe:

Le commentaire:

…est enrichi comme suit:

Et la fonction getCurrentCategory() qui suit…

…est remaniée en:

app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/list_abonnements_category.phtml

Ce template PHTML se contente de boucler, autant de fois qu’il y a de sous-catégories, sur le template Magento_Catalog::product/list_abonnements_subcategory.phtml qui est une version custom du template vendor/magento/module-catalog/view/frontend/templates/product/list.phtml.

L’équivalent de ce fichier list_abonnements_subcategory.phtml DOIT exister dans votre projet. Si vous n’avez pas besoin d’en créer un spécifique, vous pouvez boucler sur le template par défaut fourni par Magento 2. Dans le code ci-dessus: ->setTemplate("Magento_Catalog::product/list.phtml"). Edit: il faut en créer un spécifique pour exploiter notre Helper.

app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/list_abonnements_subcategory.phtml

Ce template PHTML doit partir de vendor/magento/module-catalog/view/frontend/templates/product/list.phtml. Il est impératif de rajouter les lignes suivantes en haut de fichier, sous la ligne $hoverChange = $themeSettingConfig->getStoreConfig('themesettings/catalog/hover_change');:

app/design/frontend/Sodifrance/pdv/Magento_Theme/page_layout/abonnements_category.xml

Reportez-vous à ce billet pour voir comment afficher un layout différent selon une catégorie spécifique. Cette étape est indispensable pour faire pointer notre catégorie vers notre template PHTML spécifique app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/list_abonnements_category.phtml. Un exemple de code pour ce fichier ci-dessous:

Vous voudrez aussi créer le layout XML app/design/frontend/Sodifrance/pdv/Magento_Theme/page_layout/abonnements_subcategory.xml

…pour fairez pointer les sous-catégories vers le template PHTML .

Externaliser le code JS

Afin que le code JS initialement présent au bas du fichier list.phtml ne soit pas exécuté autant de fois qu’il existe de sous-catégories, il a été externalisé dans un fichier app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/list_abonnements_js.phtml et déclaré de la sorte dans nos layouts XML spécifiques:

app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/list_abonnements_js.phtml

Le code de ce fichier, sorti de list.phtml:

[Magento 2] Surcharger override un layout ou un page layout XML

Ressources utiles:

Pour surcharger app/design/frontend/Mgs/supro/Magento_Catalog/layout/catalog_category_view.xml (qui est déjà une surcharge) dans un thème, il faut créer l’arborescence et le fichier suivants: app/design/frontend/Sodifrance/pdv/Magento_Catalog/layout/override/theme/Mgs/supro/catalog_category_view.xml.

Surcharger un page_layout

Un page_layout est un gabarit de mise en page. Exemple: 2columns-left, 2columns-right, .... On trouve ces gabarits par défaut dans vendor/magento/module-theme/view/frontend/page_layout/.

Si je veux surcharger le page_layout 2columns-left.xml

Je dois créer le fichier suivant: app/design/frontent/MyVendor/mytheme/Magento_Theme/page_layout/override/base/2columns-left.xml (attention à la partie override/base/).

[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.

© 2021 devfrontend.info

Theme by Anders NorénUp ↑