Tagxml

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

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

[Magento] Insérer un bloc statique créé en backoffice dans un gabarit de page depuis un fichier de layout xml et un fichier de template phtml

Admettons qu’on souhaite insérer un bloc statique dans la partie header d’une page. Il y a 3 étapes à suivre :

Editer le fichier de layout

Rendez-vous dans le répertoire /app/design/frontend/default/_nom_du_theme_/layout/ et localiser le fichier page.xml. Dans ce fichier, localiser le code se référant au header de la page (dans le thème par défaut) :

Et ajoutez-y le code suivant :

La méthode setBlockId permet de déclarer l’ID du bloc statique créé en back-office à ajouter.
Ne pas oublier :

  • de renseigner correctement les attributs name= »nb.headband » et as= »nbHeadband »
  • de renseigner correctement l’ID du bloc statique créé en back-office

Editer le fichier de template

Rendez-vous ensuite dans le répertoire /app/design/frontend/default/_nom_du_theme_/template/page/html/ et localiser le fichier header.phtml. Dans ce fichier, à l’endroit où vous souhaitez voir apparaître votre bloc statique, ajoutez la méthode suivante :

…où nbHeadband correspond à l’attribut as rensigné dans le fichier page.xml.

Créer le bloc statique en backoffice

Rendez-vous dans CMS > Blocs statiques et cliquez sur le bouton Ajouter un nouveau bloc. Le champ identifiant doit porter le même libellé que celui déclaré plus haut dans le fichier page.xml à savoir, pour notre exemple, nb-headband.

© 2020 FrontEndDeveloper

Theme by Anders NorénUp ↑