Taglayout

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

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

[Magento 1.9] Ajouter une zone dans un gabarit de page et y affecter un bloc PHTML

Dans mon exemple, je souhaite ajouter sur la page d’accueil de mon site une zone entre le Header et le Main pour y glisser un slider donc le code se trouve dans app/design/frontend/package/theme/template/page/html/home_slider.phtml.

Etape #1: ajouter un slot (emplacement) dans page.xml

Dans le fichier app/design/frontend/package/theme/template/layout/page.xml repérer le gabarit de page dans lequel vous souhaitez ajouter une zone:

…et ajoutez-y ceci pour créer l’emplacement home_slider_area:

Note pour moi-même: ici, je crée une zone (soit-disant) dans le gabarit 2columns-left.phtml, mais j’édite plus tard le gabarit 1column.phtml et ça fonctionne quand-même…

Etape #2: ajouter le bloc PHTML du slider en page d’accueil, dans le slot que j’ai créé précédemment

Dans le fichier app\design\frontend\package\theme\layout\local.xml, ajouter ceci:

Etape #3:

Dans app\design\frontend\package\theme\template\page\1column.phtml ajouter la ligne suivante:

[Bootstrap] Un breakpoint à 480px pour une prise en charge du rendu en orientation paysage sur périphériques mobiles (smartphones).

Source : Introduces a new break point ‘xs1’ at 480px.

Utilisation :

Vous obtenez une batterie de nouvelles classes nommées d’après le modèle Bootstrap col-xs1-1, col-xs1-2, col-xs1-3, etc.. qui vous permettront de cibler les périphériques mobiles type smartphones en orientation paysage.

Ces boîtes s’organiseront en mode 1×4 on 0 > 479px, 2×2 on 480 > 767px, 4×1 on 767 > *px.

Mise en place :

Dans la CSS Bootstrap, intercaler entre les styles définis pour les classes .col-xs- et .col-sm- :

Intercaler entre .hidden-xs et .hidden-sm :

© 2020 devfrontend.info

Theme by Anders NorénUp ↑