Testé fonctionnel Magento 2.3.x.
Un fichier layout/customer_account.xml devrait être présent dans chaque module proposant des fonctionnalités pour le compte client. Si ce n’est pas le cas, voir ici Pas de layout customer_account.xml dans votre module? Créez-en un!.
Mauvaises pratiques liées à l’utilisation des layouts customer_account.xml
ATTENTION: sachant que la surcharge d’un layout customer_account.xml dans votre thème ne peut se faire que dans un module donné, les blocs impactés doivent impérativement être invoqués à l’aide de la balise referenceBlock et NON PAS recréés à l’aide de la balise block.
- Ne pas centraliser toutes les entrées (émanant de différents modules) dans un layout unique
customer_account.xml alors qu’il faudrait surcharger autant de fichiers customer_account.xml que nécessaires dans votre thème. On perd ainsi en modularité.
- Ne pas recréer un
block pour chaque entrée de menu (même pour ceux qui existent déjà et sont déclarés dans leurs modules respectifs) au lieu de faire une référence au bloc existant via <referenceBlock>. Ceci a pour effet d’alourdir le code et les performances puisqu’au lieu d’utiliser le bloc précédemment déclaré, on en créer un second qui a la même utilité. Pire, si le bloc référencé initialement dans le module est désactivé, l’entrée de menu apparaîtra toujours dans le compte client puisqu’un second bloc a pris les commandes.
Code de base pour un layout customer_account.xml
Pour toutes les entrées qui devront s’intégrer dans le menu de navigation du compte client:
|
|
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceBlock name="customer_account_navigation"> </referenceBlock> </body> </page> |
Les entrées qui composent le menu
Mon compte, informations du compte et carnet d’adresses (et « se déconnecter »)
- Fichier parent:
vendor/magento/magento-customer/view/frontend/layout/customer_account.xml
- Surcharge:
app/code/design/frontend/MyVendor/mytheme/Magento_Customer/layout/customer_account.xml
Ici, « se déconnecter » est un bloc qui n’a pas encore fait l’objet d’une initialisation dans un layout customer_account.xml enfant. Nous utilisons donc block au lieu de referenceBlock pour signifier son initialisation.
Pour les trois autres entrées, elles sont déjà présentes dans le layout vendor/magento/magento-customer/view/frontend/layout/customer_account.xml que nous surchargeons. Nous utilisons donc referenceBlock pour signifier qu’on surcharge des valeurs précédemment déclarées dans un layout parent.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceBlock name="customer_account_navigation"> <!-- Existing blocks --> <referenceBlock name="customer-account-navigation-account-link"> <arguments> <argument name="sortOrder" xsi:type="number">250</argument> <argument name="attributes" xsi:type="array"> <item name="class" xsi:type="string">icon-customer-nav icon-account</item> </argument> </arguments> </referenceBlock> <referenceBlock name="customer-account-navigation-account-edit-link"> <arguments> <argument name="sortOrder" xsi:type="number">240</argument> <argument name="attributes" xsi:type="array"> <item name="class" xsi:type="string">icon-customer-nav icon-account</item> </argument> </arguments> </referenceBlock> <referenceBlock name="customer-account-navigation-address-link"> <arguments> <argument name="sortOrder" xsi:type="number">230</argument> <argument name="attributes" xsi:type="array"> <item name="class" xsi:type="string">icon-customer-nav icon-address-book</item> </argument> </arguments> </referenceBlock> <!-- New block! Logout --> <block class="Magento\Framework\View\Element\Html\Link\Current" name="customer-account-navigation-logout-link"> <arguments> <argument name="css_class" xsi:type="string">logout</argument> <argument name="path" xsi:type="string">customer/account/logout</argument> <argument name="label" xsi:type="string">Logout</argument> <argument name="sortOrder" xsi:type="number">1</argument> <argument name="attributes" xsi:type="array"> <item name="class" xsi:type="string">icon-customer-nav icon-croix</item> </argument> </arguments> </block> </referenceBlock> </body> </page> |
Abonnements aux lettres d’information
- Fichier parent:
vendor/magento/magento-newsletter/view/frontend/layout/customer_account.xml
- Surcharge:
app/code/design/frontend/MyVendor/mytheme/Magento_Newsletter/layout/customer_account.xml
Cette entrée fait référence à une fonctionnalité hors module customer puisqu’elle est apportée par le module newsletter. Il est de ce fait conseillé, pour d’avantage de modularité, de la surcharger dans un layout customer_account.xml propre au module Newsletter.
|
|
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceBlock name="customer_account_navigation"> <referenceBlock class="Magento\Customer\Block\Account\SortLinkInterface" name="customer-account-navigation-newsletter-subscriptions-link"> <arguments> <argument name="sortOrder" xsi:type="number">220</argument> <argument name="attributes" xsi:type="array"> <item name="class" xsi:type="string">icon-customer-nav icon-newsletter</item> </argument> </arguments> </referenceBlock> </referenceBlock> </body> </page> |
Faites ensuite de-même pour toutes les entrées relatives à d’autres modules.
Supprimer/Masquer des entrées précédemment référencées
Ces entrées s’affichent dans votre menu et vous souhaiter les masquer.
|
|
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <!-- Existing links/features to be removed --> <referenceBlock name="customer-account-navigation-downloadable-products-link" remove="true"/> <referenceBlock name="customer-account-navigation-wish-list-link" remove="true"/> <!-- Existing delimiters to be removed --> <referenceBlock name="customer-account-navigation-delimiter-1" remove="true"/> <referenceBlock name="customer-account-navigation-delimiter-2" remove="true"/> |
Pas de layout customer_account.xml dans votre module? Créez-en un! (Amasty Gdpr)
Dans certains cas, une entrée est présente dans le menu en sidebar du compte client, mais elle n’est pas ajoutée via un layout customer_account.xml. Nous avons mis le doigt sur unemùauvaise pratique, mais comment retrouver les informations qui nous permettront de créer nous-même ce fichier?
Dans notre IDE, faire une recherche sur customer_account_navigation (qui constitue le referenceBlock principal du menu du compte client dans customer_account.xml, celui qui concentre toutes les entrées) nous a permis de trouver le block PHP app/vendor/amasty/module-gdpr/Block/AccountLinkPlugin.php.
Nous avons dans le code de ce block de quoi renseigner les <argument name="path" et <argument name="label":
|
|
if (!$subject->getLayout()->hasElement(self::LINK_BLOCK_NAME)) { $subject->getLayout()->createBlock( $linkClass, self::LINK_BLOCK_NAME, [ 'data' => [ 'path' => 'gdpr/customer/settings', 'label' => __('Privacy Settings'), 'sortOrder' => self::SORT_ORDER ] ] ); } |
On voit que 'sortOrder' => self::SORT_ORDER fait référence à une variable. Elle est disponible dans le même fichier, plus haut:
|
|
class AccountLinkPlugin { const SORT_ORDER = 175; const INSERT_AFTER = 'customer-account-navigation-account-edit-link'; const LINK_BLOCK_NAME = 'customer-account-amasty-gdpr-settings'; const LINK_BLOCK_ALIAS = 'amasty-gdpr-link'; |
Les informations INSERT_AFTER, LINK_BLOCK_NAME et LINK_BLOCK_ALIAS peuvent tout à fait être exploitées dans la création du template customer_account.xml dont je fournis un modèle juste en-dessous:
app/design/frontend/MyVendor/mytheme/Amasty_Gdpr/layout/customer_account.xml:
|
|
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceBlock name="customer_account_navigation"> <block class="Magento\Customer\Block\Account\SortLinkInterface" name="customer-account-amasty-gdpr-settings" as="amasty-gdpr-link"> <arguments> <argument name="label" xsi:type="string" translate="true">Privacy Settings</argument> <argument name="path" xsi:type="string">gdpr/customer/settings</argument> <argument name="sortOrder" xsi:type="number">175</argument> </arguments> </block> </referenceBlock> </body> </page> |
Supprimer l’entrée Amasty Gdpr du menu du compte client
Encore un cas un peu particulier, car la chose n’est pas faisable depuis un layout XML en référençant un block existant et en lui mettant l’attribut remove="true". Il va falloir désactiver le plugin!
Dans le fichier vendore/amasty/module-gdpr/etc/frontend/di.xml, repérer les deux blocs de code suivants:
|
|
<type name="Magento\Framework\View\Element\Html\Links"> <plugin name="amasty-gdpr-html-links" type="Amasty\Gdpr\Block\AccountLinkPlugin"/> </type> <type name="Magento\Customer\Block\Account\Navigation"> <plugin name="amasty-gdpr-account-navigation" type="Amasty\Gdpr\Block\AccountLinkPlugin"/> </type> |
Il faudra soit créer un module spé, soit rajouter ces deux blocs de code (en ajoutant pour chacun le paramètre disabled="true") dans un module spé déjà existant. Dans mon exemple, je choisis la deuxième solution.
Dans app/code/MyVendor/mymodulespé/etc/frontend/ je crée un fichier di.xml dans lequel je colle ceci:
|
|
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <type name="Magento\Framework\View\Element\Html\Links"> <plugin name="amasty-gdpr-html-links" type="Amasty\Gdpr\Block\AccountLinkPlugin" disabled="true"/> </type> <type name="Magento\Customer\Block\Account\Navigation"> <plugin name="amasty-gdpr-account-navigation" type="Amasty\Gdpr\Block\AccountLinkPlugin" disabled="true"/> </type> </config> |
Ajouter des liens spécifiques/custom (vers un pages CMS par exemple)
Attention: pour des blocs qui ne sont pas déjà déclarés ailleurs ou des pages CMS.
|
|
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceBlock name="customer_account_navigation"> <!-- Custom links to be added --> <block class="Magento\Framework\View\Element\Html\Link\Current" name="customer-account-navigation-custom-link" after="-" > <arguments> <argument name="label" xsi:type="string" translate="true">My Custom Label TEST</argument> <argument name="path" xsi:type="string">my-custom-path-test</argument> </arguments> </block> |
Ancienne version du billet
ATTENTION: ne pas utiliser cette méthode qui comporte deux soucis majeurs liés aux mauvaises pratiques dépeintes plus haut.
Ressources en ligne:
Localiser tous les ajouts d’entrées dans le menu de navigation du compte client de Magento 2 (liées à des fonctionnalités du core ou à des modules/plugins/fonctionnalités spécifiques)
Les diverses entrées du menu de navigation du compte client dans Magento 2 se gèrent via des fichiers de layout customer_account.xml présents dans chacun des modules dont les fonctionnalités respectives doivent être accessibles depuis le-dit menu.
Faire une recherche sur les fichiers nommés customer_account.xml permet de trouver toutes les entrées incluses dans le menu de navigation du compte (sidebar). Pour rajouter une entrée supplémentaire liée à une fonctionnalité/un module, il faut créer un fichier customer_account.xml dans le module concerné et faire, par exemple, comme pour (module du core) vendor/magento/module-downloadable/view/frontend/layout/customer_account.xml.
Supprimer des entrées ou en ajouter des nouvelles
Créer un fichier customer_account.xml dans app/design/frontend/MyVendor/mytheme/Magento_Customer/layout:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <!-- Existing links/features to be removed --> <referenceBlock name="customer-account-navigation-downloadable-products-link" remove="true"/> <referenceBlock name="customer-account-navigation-wish-list-link" remove="true"/> <!-- Existing delimiters to be removed --> <referenceBlock name="customer-account-navigation-delimiter-1" remove="true"/> <referenceBlock name="customer-account-navigation-delimiter-2" remove="true"/> <referenceBlock name="customer_account_navigation"> <!-- Existing links/features to be re-ordered --> <block class="Magento\Customer\Block\Account\SortLinkInterface" name="customer-account-navigation-address-link"> <arguments> <argument name="label" xsi:type="string" translate="true">Address Book</argument> <argument name="path" xsi:type="string">customer/address</argument> <argument name="sortOrder" xsi:type="number">190</argument> <!-- Ajouter une classe spécifique à l'élément A --> <argument name="attributes" xsi:type="array"> <item name="class" xsi:type="string">address-book</item> </argument> </arguments> </block> <block class="Magento\Customer\Block\Account\SortLinkInterface" ifconfig="newsletter/general/active" name="customer-account-navigation-newsletter-subscriptions-link"> <arguments> <argument name="path" xsi:type="string">newsletter/manage</argument> <argument name="label" xsi:type="string" translate="true">Newsletter Subscriptions</argument> <argument name="sortOrder" xsi:type="number">189</argument> </arguments> </block> <!-- Custom links to be added --> <block class="Magento\Framework\View\Element\Html\Link\Current" name="customer-account-navigation-custom-link" after="-" > <arguments> <argument name="label" xsi:type="string" translate="true">My Custom Label TEST</argument> <argument name="path" xsi:type="string">my-custom-path-test</argument> </arguments> </block> </referenceBlock> </body> </page> |
Liste des blocs les plus communs:
|
|
- customer-account-navigation-customer-balance-link : Store credit - customer-account-navigation-downloadable-products-link : Downloadable product link - customer-account-navigation-newsletter-subscriptions-link : Subscription link - customer-account-navigation-billing-agreements-link : Billing agreement link - customer-account-navigation-product-reviews-link : Product review link - customer-account-navigation-my-credit-cards-link : My credit card link - customer-account-navigation-account-link : Account link - customer-account-navigation-account-edit-link : Account edit link - customer-account-navigation-address-link : Address link - customer-account-navigation-orders-link : Orders link - customer-account-navigation-wish-list-link : Wish list link - customer-account-navigation-gift-card-link : Gift card link - customer-account-navigation-giftregistry-link : Gift registry - customer-account-navigation-reward-link : Reward points - customer-account-navigation-checkout-sku-link : Order by SKU |
Supprimer les principales entrées du menu de navigation du compte client de Magento 2 (liées à des fonctionnalités du core de l’édition CE)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!-- Remove Account Dashboard--> <referenceBlock name="customer-account-navigation-account-link" remove="true"/> <!-- Remove Account Information--> <referenceBlock name="customer-account-navigation-account-edit-link" remove="true"/> <!-- Remove Address Book--> <referenceBlock name="customer-account-navigation-address-link" remove="true"/> <!-- Remove My Orders--> <referenceBlock name="customer-account-navigation-orders-link" remove="true"/> <!-- Remove My Downloadable Products--> <referenceBlock name="customer-account-navigation-downloadable-products-link" remove="true"/> <!-- Remove Newsletter Subscriptions--> <referenceBlock name="customer-account-navigation-newsletter-subscriptions-link" remove="true"/> <!-- Remove My Credit Cards--> <referenceBlock name="customer-account-navigation-my-credit-cards-link" remove="true"/> <!-- Remove Billing Agreements--> <referenceBlock name="customer-account-navigation-billing-agreements-link" remove="true"/> <!-- Remove My Product Reviews--> <referenceBlock name="customer-account-navigation-product-reviews-link" remove="true"/> <!-- Remove My Wish List--> <referenceBlock name="customer-account-navigation-wish-list-link" remove="true"/> |