Testé fonctionnel Magento 2.4!
Nous souhaitons que la navigation du compte soit visible depuis n’importe quelle page du site, et pas uniquement dans les pages du compte client (à condition d’être connecté à un compte, bien-sûr ;)).
- Attention: déplacer la navigation du compte client sur toutes les pages d’une boutique Magento 2 va demander à fournir des efforts d’adaptation côté code XML, mais également au minimum côté LESS et PHTML, voire un peu de JS pour obtenir un affichage optimal (selon l’UI attendue). Ce billet va se concentrer uniquement sur la manière de faire côté layout XML, seule ré-exploitable en l’état d’un projet à l’autre.
- Attention #2: cette manipulation demande un minimum de connaissances et de conpréhension des concepts de base des layouts dans Magento 2, donc si ce n’est pas acquis ou fait, documentez-vous au préalable.
L’intérêt de procéder via XML est multiple:
- Nous déplaçons une zone de l’interface utilisateur de la manière la plus propre en regard des bonnes pratiques Magento 2.
- Nous allons de ce fait profiter des fonctionnalités d’héritage et d’extension natives offertes par Magento 2.
- Lorsqu’un élément de ce menu sera ajouté ultérieurement (toujours selon les bonnes pratiques Magento 2) par vous ou un autre développeur (via l’installation d’un module tiers par exemple, ou le développemnt d’un module custom), celui-ci sera mis à jour automatiquement sans nécessiter une quelconque intervention de notre part.
- Idem si un élément est à supprimer de ce menu ou si un module tiers est désactivé ou désinstallé: le menu sera mis à jour sans notre intervention.
Déclaration native du block menu du compte client dans un layout XML du module Customer de Magento 2
Le <block [...] name="sidebar.main.account_nav" [...] />
qui initie l’affichage du menu du compte client est, out-of-the-box, déclaré dans la pile des layout XML dans le fichier /vendor/magento/module-customer/view/frontend/layout/customer_account.xml. Le code complet, qui contient uniquement les entrées liées au module Customer, est le suivant:
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 |
<block class="Magento\Framework\View\Element\Template" name="sidebar.main.account_nav" template="Magento_Theme::html/collapsible.phtml" before="-"> <arguments> <argument name="block_css" xsi:type="string">account-nav</argument> </arguments> <block class="Magento\Customer\Block\Account\Navigation" name="customer_account_navigation" before="-"> <arguments> <argument name="css_class" xsi:type="string">nav items</argument> </arguments> <block class="Magento\Customer\Block\Account\SortLinkInterface" name="customer-account-navigation-account-link"> <arguments> <argument name="label" xsi:type="string" translate="true">My Account</argument> <argument name="path" xsi:type="string">customer/account</argument> <argument name="sortOrder" xsi:type="number">250</argument> </arguments> </block> <block class="Magento\Customer\Block\Account\Delimiter" name="customer-account-navigation-delimiter-1" template="Magento_Customer::account/navigation-delimiter.phtml"> <arguments> <argument name="sortOrder" xsi:type="number">200</argument> </arguments> </block> <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> </arguments> </block> <block class="Magento\Customer\Block\Account\SortLinkInterface" name="customer-account-navigation-account-edit-link"> <arguments> <argument name="label" xsi:type="string" translate="true">Account Information</argument> <argument name="path" xsi:type="string">customer/account/edit</argument> <argument name="sortOrder" xsi:type="number">180</argument> </arguments> </block> <block class="Magento\Customer\Block\Account\Delimiter" name="customer-account-navigation-delimiter-2" template="Magento_Customer::account/navigation-delimiter.phtml"> <arguments> <argument name="sortOrder" xsi:type="number">130</argument> </arguments> </block> </block> </block> |
Déplacer la déclaration du block sidebar.main.account_nav
à la hauteur du thème
Pour rappel: nous souhaitons que la navigation du compte soit visible depuis n’importe quelle page du site, et pas uniquement dans les pages du compte client.
Nous allons pour ce faire déplacer la déclaration du block
sidebar.main.account_nav
à la hauteur de notre thème.
Dans votre thème (et si il n’existe pas déjà), créer le fichier app/design/frontend/MyVendor/mytheme/Magento_Theme/layout/default.xml
et copiez/collez-y l’intégralité du block
sidebar.main.account_nav
. Dans l’exemple ci-dessous, je l’ai affecté au container
after.body.start
, mais vous pouvez l’affecter à un autre container, y-compris un container custom que vous auriez créer vous-même pour les besoins spécifiques à votre mise en page.
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 46 47 48 49 50 51 52 |
<?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> <referenceContainer name="after.body.start"> <!-- navigation du compte client --> <block class="Magento\Framework\View\Element\Template" name="sidebar.main.account_nav" template="Magento_Theme::html/collapsible.phtml" before="-"> <arguments> <argument name="block_css" xsi:type="string">account-nav</argument> </arguments> <block class="Magento\Customer\Block\Account\Navigation" name="customer_account_navigation" before="-"> <arguments> <argument name="css_class" xsi:type="string">nav items</argument> </arguments> <block class="Magento\Customer\Block\Account\SortLinkInterface" name="customer-account-navigation-account-link"> <arguments> <argument name="label" xsi:type="string" translate="true">My Account</argument> <argument name="path" xsi:type="string">customer/account</argument> <argument name="sortOrder" xsi:type="number">250</argument> </arguments> </block> <block class="Magento\Customer\Block\Account\Delimiter" name="customer-account-navigation-delimiter-1" template="Magento_Customer::account/navigation-delimiter.phtml"> <arguments> <argument name="sortOrder" xsi:type="number">200</argument> </arguments> </block> <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> </arguments> </block> <block class="Magento\Customer\Block\Account\SortLinkInterface" name="customer-account-navigation-account-edit-link"> <arguments> <argument name="label" xsi:type="string" translate="true">Account Information</argument> <argument name="path" xsi:type="string">customer/account/edit</argument> <argument name="sortOrder" xsi:type="number">180</argument> </arguments> </block> <block class="Magento\Customer\Block\Account\Delimiter" name="customer-account-navigation-delimiter-2" template="Magento_Customer::account/navigation-delimiter.phtml"> <arguments> <argument name="sortOrder" xsi:type="number">130</argument> </arguments> </block> </block> </block> <!-- fin: navigation du compte client --> </referenceContainer> </body> </page> |
Router la déclaration intiale du block sidebar.main.account_nav"
vers notre thème
Attention: si on compile nos XMLs en l’état, nous allons avoir un conflit entre le layout du module Customer du core de Magento 2 et le layout default.xml
de notre thème, car <block class="Magento\Framework\View\Element\Template" name="sidebar.main.account_nav"
est déclaré deux fois!
Dans votre thème (et si il n’existe pas déjà), créer le fichier app/design/frontend/MyVendor/mytheme/Magento_Customer/layout/customer_account.xml
et y placer le code suivant:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd" label="Customer My Account (All Pages)" design_abstraction="custom"> <head> <title>My Account</title> </head> <body> <attribute name="class" value="account"/> <move element="sidebar.main.account_nav" destination="sidebar.main" after="-" /> <referenceContainer name="sidebar.main"></referenceContainer> </body> </page> |
Ici, le <move element="sidebar.main.account_nav" destination="sidebar.main" after="-" />
permet d’indiquer à Magento 2 que la déclaration initiale du block sidebar.main.account_nav"
a été déplacée du module Customer du core au module Theme de notre thème.
Commande à exécuter avant de rafraîchir nos pages dans le navigateur
1 |
magerun2 cache:clean layout |
Conclusion
Le menu du compte devrait désormais (et à condition d’être connecté à un compte client) s’afficher dans n’importe quelle page de votre site, à l’endroit indiqué dans le layout XML default.xml
de votre thème.
Comme indiqué en début de billet, l’affichage est probablement plus qu’àpproximatif et c’est à vous de jouer côté LESS, PHTML et JS pour adapter tout ça 🙂