Tagxml

[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

Templates PHTML

nada for now …

Layouts XML

nada for now …

[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] Inclure un bloc statique depuis un champ WYSIWYG

Inclure un bloc statique depuis n’importe quel champ WYSIWYG (contenu de page CMS, etc…).

Exemple:

[Magento 2] Astuces, bonnes pratiques de manipulation des layouts XML

Doc officielle: Layout instructions, Common layout customization tasks.

Ajouter une zone pleine largeur et contenant des blocs statiques au-dessus du footer via un layout XML

Testé fonctionnel Magento 2.3.

Dans le fichier app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default.xml:

Dans le fichier app/design/frontend/<Vendor>/<theme>/Magento_Theme/templates/html/theme_reinsurance.phtml:

Depuis l’interface d’admin: Contenu > [Eléments] Blocs. Il faut avoir créé 3 blocs dont les identifiants sont:

  • reinsurance_besoindAide
  • reinsurance_vosGaranties
  • reinsurance_espaceAbonnes

Ajouter un bloc statique dans la sidebar (left ou right column)

Dans mon exemple, je veux ajouter le bloc statique avec l’ID 64 dans le container sidebar.additional de mes pages.

Je récupère le nom du referenceContainer dans le fichier vendor/magento/module-theme/view/frontend/page_layout/2columns-left.xml.

Dans le fichier app/design/frontend/MyVendor/mytheme/Magento_Theme/layout/default.xml:

[Magento 2] Afficher/masquer des fonctionnalités ou des modules depuis les layouts XML ou le fichier app/etc/config.php

Un grand nombre de fonctionnalités de Magento 2 peuvent s’activer/désactiver depuis un fichier layout XML dans le code source. Depuis le fichier app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default.xml de votre thème, par exemple. En voici une liste non exhaustive:

Désactiver la fonctionnalité de comparaison produit dans Magento 2

Testé fonctionnel Magento 2.3. Source: Magento 2: Safe and easiest way to disable Compare products & Wishlist Module.

Dans le fichier app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default.xml de votre thème, ajouter ceci:

Désactiver le module wishlist (produits favoris) dans Magento 2

Testé fonctionnel Magento 2.3. ATTENTION: erreurs PHP en front après un cache:clean avec un thème enfant du thème Supro. Peut se produire avec d’autres thèmes. Dans ce cas, se rabattre sur cette solution.

ATTENTION: lorsque vous désactivez des modules, veillez à exécuter la commande $ cache:clean de Magento 2 et à rafraîchir votre front pour vérifier que vos modifications passent sans générer d’erreurs.

Dans le fichier app/etc/confing.php repérer les trois modules Magento_Wishlist, Magento_WishlistAnalytics, Magento_WishlistGraphQl et les passer à 0 comme ceci:

Note: il est également possible de désactiver un module Magento 2 via une commande $ module:disable <nom_du_module>. En exécutant cette commande, le fichier config.php sera mis à jour automatiquement.

Supprimer la fonctionnalité wishlist (produits favoris) dans Magento 2

Testé fonctionnel Magento 2.3.

Préférer la solution ci-dessus si elle fonctionne, car elle permet une réactivation plus rapide de la fonctionnalité.

Dans le fichier app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default.xml de votre thème, ajouter ceci:

De la sidebar (dans le compte client par exemple)

Essayer d’abord juste avec le 1er:

Ce n’est pas fini! Il vous faudra ensuite trouver le ou les templates PHTML qui contiennent des résidus de la fonctionnalité Wishlist qui ne peuvent être retirés via un fichier layout XML. Dans le thème Luma, le template contient les classes action towishlist sur un élément a. Dans le thème Supro, le markup HTML <div class="top-wishlist">.

Désactiver les avis et les notes produit (reviews & rating)

Testé fonctionnel Magento 2.3.

Dans le fichier app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default.xml de votre thème, ajouter ceci:

Supprimer la navigation par filtres dans la liste produits

Masquer le titre principal d’une page

Afficher/masquer des entrées du menu en sidebar du compte client

[Magento 2] Ajouter, déplacer, supprimer des entrées dans le menu de navigation du compte client en sidebar.

Afficher/masquer l’encart reorder en sidebar et l’encart dernières commandes du dashboard client

Dans app/design/frontend/MyVendor/mytheme/Magento_Customer/layout/customer_account_index.xml:

© 2021 devfrontend.info

Theme by Anders NorénUp ↑