Étiquette : navigation

[Magento 2] Utiliser les layouts XML pour rendre visible la navigation du compte client sur toutes les pages du site

26/02/2021 / admin

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:

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

<argument name="block_css" xsi:type="string">account-nav</argument>

</arguments>

<argument name="css_class" xsi:type="string">nav items</argument>

</arguments>

<argument name="label" xsi:type="string" translate="true">My Account</argument>

<argument name="path" xsi:type="string">customer/account</argument>

</arguments>

</block>

</arguments>

</block>

<argument name="label" xsi:type="string" translate="true">Address Book</argument>

<argument name="path" xsi:type="string">customer/address</argument>

</arguments>

</block>

<argument name="label" xsi:type="string" translate="true">Account Information</argument>

<argument name="path" xsi:type="string">customer/account/edit</argument>

</arguments>

</block>

</arguments>

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

<?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>

<?xml version="1.0"?>

<body>

<argument name="block_css" xsi:type="string">account-nav</argument>

</arguments>

<argument name="css_class" xsi:type="string">nav items</argument>

</arguments>

<argument name="label" xsi:type="string" translate="true">My Account</argument>

<argument name="path" xsi:type="string">customer/account</argument>

</arguments>

</block>

</arguments>

</block>

<argument name="label" xsi:type="string" translate="true">Address Book</argument>

<argument name="path" xsi:type="string">customer/address</argument>

</arguments>

</block>

<argument name="label" xsi:type="string" translate="true">Account Information</argument>

<argument name="path" xsi:type="string">customer/account/edit</argument>

</arguments>

</block>

</arguments>

</block>

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

<?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>

<?xml version="1.0"?>

<head>

<title>My Account</title>

</head>

<body>

</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

magerun2 cache:clean layout

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 🙂

[Magento 2] Ajouter un lien de déconnexion dans le menu du dashboard compte client

08/06/2020 / admin

Ajouter le fichier Magento_Customer/layout/customer_account.xml dans le dossier de votre thème et y placer le code suivant:

<?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"><!--ifconfig="wishlist/general/active"-->
            <block class="Magento\Framework\View\Element\Html\Link\Current" name="customer-account-navigation-logout-link">
                <arguments>
                    <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>
                </arguments>
            </block>
        </referenceBlock>
    </body>
</page>

<?xml version="1.0"?>

<body>

<argument name="path" xsi:type="string">customer/account/logout</argument>

<argument name="label" xsi:type="string">Logout</argument>

</arguments>

</block>

</referenceBlock>

</body>

</page>

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

08/06/2020 / admin

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>

<?xml version="1.0"?>

<body>

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

<?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>

<?xml version="1.0"?>

<body>

<item name="class" xsi:type="string">icon-customer-nav icon-account</item>

</argument>

</arguments>

</referenceBlock>

<item name="class" xsi:type="string">icon-customer-nav icon-account</item>

</argument>

</arguments>

</referenceBlock>

<item name="class" xsi:type="string">icon-customer-nav icon-address-book</item>

</argument>

</arguments>

</referenceBlock>

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

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

<?xml version="1.0"?>

<body>

<item name="class" xsi:type="string">icon-customer-nav icon-newsletter</item>

</argument>

</arguments>

</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"/>

<?xml version="1.0"?>

<body>

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
                    ]
                ]
            );
        }

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';

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>

<?xml version="1.0"?>

<body>

<argument name="label" xsi:type="string" translate="true">Privacy Settings</argument>

<argument name="path" xsi:type="string">gdpr/customer/settings</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>

</type>

</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>

<?xml version="1.0"?>

</type>

</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>

<?xml version="1.0"?>

<body>

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

Tutoriel de base pour ajouter, supprimer ou ré-organiser l’ordre des entrées du menu de navigation du compte client. Version PDF – mageplaza.com-Magento 2 My Account Menu Navigation Links Add Delete Re-order Custom Links

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:

<?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>

<?xml version="1.0"?>

<body>

<argument name="label" xsi:type="string" translate="true">Address Book</argument>

<argument name="path" xsi:type="string">customer/address</argument>

<item name="class" xsi:type="string">address-book</item>

</argument>

</arguments>

</block>

<argument name="path" xsi:type="string">newsletter/manage</argument>

<argument name="label" xsi:type="string" translate="true">Newsletter Subscriptions</argument>

</arguments>

</block>

<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

- 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)

<!-- 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"/>

[jQuery] Une navigation responsive par onglets en vue Desktop et accordéon en vue Mobile

07/09/2016 / admin

Demo sur jsfiddle.net.

HTML

<p class="desktop">desktop</p>
<p class="mobile">mobile</p>

<ul class="facet-nav">
  <li class="facet-nav-item">
    <a class="link level0" href="#">Lorem ipsum</a>
    <ul class="facet-nav-sublevel is-closed">
      <li><a class="link" href="#">one</a></li>
      <li><a class="link" href="#">two</a></li>
    </ul>
  </li>
  <li class="facet-nav-item">
    <a class="link level0" href="#">Dolor</a>
    <ul class="facet-nav-sublevel is-closed">
      <li><a class="link" href="#">three</a></li>
      <li><a class="link" href="#">four</a></li>
      <li><a class="link" href="#">five</a></li>
      <li><a class="link" href="#">six</a></li>
    </ul>
  </li>
  <li class="facet-nav-item">
    <a class="link level0" href="#">Sit amet</a>
    <ul class="facet-nav-sublevel is-closed">
      <li><a class="link" href="#">seven</a></li>
      <li><a class="link" href="#">eight</a></li>
      <li><a class="link" href="#">nine</a></li>
    </ul>
  </li> 
</ul>
<p>Lorem ipsum dolor sit amet ...</p>

<p class="desktop">desktop</p>

<p class="mobile">mobile</p>

<a class="link level0" href="#">Lorem ipsum</a>

</ul>

</li>

<a class="link level0" href="#">Dolor</a>

<li><a class="link" href="#">three</a></li>

</ul>

</li>

<li><a class="link" href="#">seven</a></li>

<li><a class="link" href="#">eight</a></li>

</ul>

</li>

</ul>

<p>Lorem ipsum dolor sit amet ...</p>

SASS

.facet-nav{
  &-item{
    > .link{
      display: block;     
    }
  }
  &-sublevel.is-closed{
    display: none;
  }
  &-sublevel{
    display: block;
  }
}
@media screen and (max-width: 767px){
}
@media screen and (min-width: 768px){
  .facet-nav{
    display: table;
    &-item{
      display: table-cell;
    }
  }
}

// skin
.facet-nav{
  border: 1px solid tomato;
  padding: 5px;
  &-item{
    > .link{
      border: 1px solid tomato;
      padding: 15px;
      &.is-active{
        background: pink;
      }
    }
  }
}
@media screen and (max-width: 767px){
  .desktop{display: none;}
}
@media screen and (min-width: 768px){
  .mobile{display:none;}
  .facet-nav{
    &-sublevel{
      position: absolute;
      left: 0;
      width: 100%;
      background: pink;
    }
  }
}

.facet-nav{

&-item{

> .link{

display: block;

}

&-sublevel.is-closed{

display: none;

}

&-sublevel{

display: block;

}

@media screen and (max-width: 767px){

}

@media screen and (min-width: 768px){

.facet-nav{

display: table;

&-item{

display: table-cell;

}

// skin

.facet-nav{

border: 1px solid tomato;

padding: 5px;

&-item{

> .link{

border: 1px solid tomato;

padding: 15px;

&.is-active{

background: pink;

}

@media screen and (max-width: 767px){

.desktop{display: none;}

}

@media screen and (min-width: 768px){

.mobile{display:none;}

.facet-nav{

&-sublevel{

position: absolute;

left: 0;

width: 100%;

background: pink;

}

jQuery

$(document).ready(function(){
	var ulFacetNav = $('ul.facet-nav');
	var liFacetNavItem = $('li.facet-nav-item');
	var aFacetNavItemLevel0Link = $('a.level0');
  var facetNavTargetElements = $('ul.facet-nav'); // la navigation ne doit pas se fermer au clic sur ces éléments

  // on réinitialise le DOM à l'état initial (pour refermer la nav, notamment)
  function DOMreset(){
  		ulFacetNav.removeAttr('style');
      aFacetNavItemLevel0Link.each(function(){
      	$(this).removeClass('is-active');
      });
      $('ul.facet-nav-sublevel').each(function(){
      	$(this).addClass('is-closed');
      });  
  }
 
  // au clic à l'extérieur de la nav, cette dernière se referme
  $(document).on('click', function(){
  	DOMreset();
  });
  
  // la navigation ne doit pas se fermer au clic sur ces éléments
	facetNavTargetElements.on('click', function(e){
  	e.stopPropagation();
  });

  // vue Mobile (nav accordion)
  enquire.register("screen and (max-width: 767px)", {
    match : function() {
    	ulFacetNav.removeClass('is-desktop-nav').addClass('is-mobile-nav');
 			DOMreset();
      
      liFacetNavItem.off('click', '.level0').on('click', '.level0', function(e){
        $(this).toggleClass('is-active').next('ul.facet-nav-sublevel').toggleClass('is-closed');
        e.preventDefault();
      });
    },
    unmatch : function() {}
	});
	
  // vue Desktop (nav tabs)
  enquire.register("screen and (min-width: 768px)", {
    match : function() {
    	ulFacetNav.removeClass('is-mobile-nav').addClass('is-desktop-nav');
      DOMreset();

      liFacetNavItem.off('click', '.level0').on('click', '.level0', function(e){
        if($(this).hasClass('is-active')){
        	DOMreset();
        }
        else{
        	DOMreset();
          $(this).toggleClass('is-active').next('ul.facet-nav-sublevel').toggleClass('is-closed');
          var getOpenedFacetNavSublevelHeight = $(this).next('ul.facet-nav-sublevel').height();
          ulFacetNav.css('margin-bottom', getOpenedFacetNavSublevelHeight);        
        }
        e.preventDefault();
      });
		},
    unmatch : function() {}
	});
});

$(document).ready(function(){

var ulFacetNav = $('ul.facet-nav');

var liFacetNavItem = $('li.facet-nav-item');

var aFacetNavItemLevel0Link = $('a.level0');

var facetNavTargetElements = $('ul.facet-nav'); // la navigation ne doit pas se fermer au clic sur ces éléments

// on réinitialise le DOM à l'état initial (pour refermer la nav, notamment)

function DOMreset(){

ulFacetNav.removeAttr('style');

aFacetNavItemLevel0Link.each(function(){

$(this).removeClass('is-active');

});

$('ul.facet-nav-sublevel').each(function(){

$(this).addClass('is-closed');

});

}

// au clic à l'extérieur de la nav, cette dernière se referme

$(document).on('click', function(){

DOMreset();

});

// la navigation ne doit pas se fermer au clic sur ces éléments

facetNavTargetElements.on('click', function(e){

e.stopPropagation();

});

// vue Mobile (nav accordion)

enquire.register("screen and (max-width: 767px)", {

match : function() {

ulFacetNav.removeClass('is-desktop-nav').addClass('is-mobile-nav');

DOMreset();

liFacetNavItem.off('click', '.level0').on('click', '.level0', function(e){

$(this).toggleClass('is-active').next('ul.facet-nav-sublevel').toggleClass('is-closed');

e.preventDefault();

});

unmatch : function() {}

});

// vue Desktop (nav tabs)

enquire.register("screen and (min-width: 768px)", {

match : function() {

ulFacetNav.removeClass('is-mobile-nav').addClass('is-desktop-nav');

DOMreset();

liFacetNavItem.off('click', '.level0').on('click', '.level0', function(e){

if($(this).hasClass('is-active')){

DOMreset();

}

else{

DOMreset();

$(this).toggleClass('is-active').next('ul.facet-nav-sublevel').toggleClass('is-closed');

var getOpenedFacetNavSublevelHeight = $(this).next('ul.facet-nav-sublevel').height();

ulFacetNav.css('margin-bottom', getOpenedFacetNavSublevelHeight);

}

e.preventDefault();

});

unmatch : function() {}

});

[jQuery] Centrer horizontalement la partie déroulée d’un menu sur un libellé dont la largeur peut varier

25/05/2016 / admin

TODO : gérer les limites droite/gauche de la page.

Markup HTML :

<li class="js-facet">
	<div class="">
		<a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="btn-facet">
			Shop by Prix<span class="caret"></span>
		</a>
		<div class="js-facet-values">
		</div>
	</div>
</li>

Shop by Prix<span class="caret"></span>

</a>

</div>

</li>

Code jQuery :

var facetValuesElement = $('.js-facetnav-refinements .js-facet');

// DO: Partie déroulée du dropdown centrée horizontalement par rapport à la largeur du libellé de premier niveau du menu
var nav_sub_item_width = 370;
facetValuesElement.each(function() {
    var nav_primary_item_width = $(this).outerWidth();
    var wanted_value = (nav_sub_item_width / 2) - (nav_primary_item_width / 2);
    $(this).find('.js-facet-values').css({
    	'width': nav_sub_item_width+'px',
    	'margin-left': -wanted_value
    });
});

// UNDO: Partie déroulée du dropdown centrée horizontalement par rapport à la largeur du libellé de premier niveau du menu
facetValuesElement.each(function() {
	$(this).attr('style', '');
});

var facetValuesElement = $('.js-facetnav-refinements .js-facet');

// DO: Partie déroulée du dropdown centrée horizontalement par rapport à la largeur du libellé de premier niveau du menu

var nav_sub_item_width = 370;

facetValuesElement.each(function() {

var nav_primary_item_width = $(this).outerWidth();

var wanted_value = (nav_sub_item_width / 2) - (nav_primary_item_width / 2);

$(this).find('.js-facet-values').css({

'width': nav_sub_item_width+'px',

'margin-left': -wanted_value

});

// UNDO: Partie déroulée du dropdown centrée horizontalement par rapport à la largeur du libellé de premier niveau du menu

facetValuesElement.each(function() {

$(this).attr('style', '');

});

[LESS][Mixin] Une navigation simple en mode « inline » avec les guards

27/02/2015 / admin

Une navigation simple en mode « inline » incluant un séparateur entre chaque entrée :

ul.mon-menu {
  .simple-inline-nav("|"; 6px);
}

ul.mon-menu {

.simple-inline-nav("|"; 6px);

}

Résultat : entrée 1 | entrée 2 | entrée 3

Une navigation simple en mode « inline » incluant un séparateur entre chaque entrée et un séparateur supplémentaire devant la première entrée :

ul.mon-menu {
  .simple-inline-nav("|"; 6px; add-first);
}

ul.mon-menu {

.simple-inline-nav("|"; 6px; add-first);

}

Résultat : | entrée 1 | entrée 2 | entrée 3

Une navigation simple en mode « inline » incluant un séparateur entre chaque entrée et un séparateur supplémentaire derrière la dernière entrée :

ul.mon-menu {
  .simple-inline-nav("|"; 6px; add-last);
}

ul.mon-menu {

.simple-inline-nav("|"; 6px; add-last);

}

Résultat : entrée 1 | entrée 2 | entrée 3 |

Une navigation simple en mode « inline » incluant un séparateur entre chaque entrée et deux séparateurs supplémentaires placés respectivement devant et derrière la première et la dernière entrée :

ul.mon-menu {
  .simple-inline-nav("|"; 6px; add-both);
}

ul.mon-menu {

.simple-inline-nav("|"; 6px; add-both);

}

Résultat : | entrée 1 | entrée 2 | entrée 3 |

/*
  Simple Inline Nav mixin

  Usage :

  1. Getting a simple inline nav with a separator between each menu entries :
      .simple-inline-nav("|"; 6px);
      =>  entry 1 | entry 2 | entry 3
  2. Getting a simple inline nav with a separator between each entries and a separator before the first entry :
      .simple-inline-nav("|"; 6px; add-first);
      =>  | entry 1 | entry 2 | entry 3
  3. Getting a simple inline nav with a separator between each entries and a separator after the last entry :
      .simple-inline-nav("|"; 6px; add-last);
      =>  entry 1 | entry 2 | entry 3 |
  4. Getting a simple inline nav with a separator between each entries and separators before and after the first and the last entries :
      .simple-inline-nav("|"; 6px; add-both);
      =>  | entry 1 | entry 2 | entry 3 |
*/

.simple-inline-nav(@separator; @padding) {
  > li {
    display: inline-block;
    padding-right: @padding;

    &:after {
      content: @separator;
      margin-left: @padding;
    }
  }

  > li:last-child {
    padding-right: 0;

    &:after {
        content: "";
    }
  }
}

.simple-inline-nav(@separator; @padding; @additional-separator) when (@additional-separator = add-first) {
  .simple-inline-nav(@separator; @padding);
  > li:first-child {
    padding-left: @padding;

    &:before {
      content: @separator;
      margin-right: @padding;
    }
  }
}

.simple-inline-nav(@separator; @padding; @additional-separator) when (@additional-separator = add-last) {
  .simple-inline-nav(@separator; @padding);
  > li:last-child {
    padding-right: @padding;

    &:after {
      content: @separator;
      margin-left: @padding;
    }
  }
}

.simple-inline-nav(@separator; @padding; @additional-separator) when (@additional-separator = add-both) {
  .simple-inline-nav(@separator; @padding);
  > li:first-child {
    padding-left: @padding;

    &:before {
      content: @separator;
      margin-right: @padding;
    }
  }

  > li:last-child {
    padding-right: @padding;

    &:after {
      content: @separator;
      margin-left: @padding;
    }
  }
}

Simple Inline Nav mixin

Usage :

1. Getting a simple inline nav with a separator between each menu entries :

.simple-inline-nav("|"; 6px);

=> entry 1 | entry 2 | entry 3

2. Getting a simple inline nav with a separator between each entries and a separator before the first entry :

.simple-inline-nav("|"; 6px; add-first);

=> | entry 1 | entry 2 | entry 3

3. Getting a simple inline nav with a separator between each entries and a separator after the last entry :

.simple-inline-nav("|"; 6px; add-last);

=> entry 1 | entry 2 | entry 3 |

4. Getting a simple inline nav with a separator between each entries and separators before and after the first and the last entries :

.simple-inline-nav("|"; 6px; add-both);

=> | entry 1 | entry 2 | entry 3 |

.simple-inline-nav(@separator; @padding) {

> li {

display: inline-block;

padding-right: @padding;

&:after {

content: @separator;

margin-left: @padding;

}

> li:last-child {

padding-right: 0;

&:after {

content: "";

}

.simple-inline-nav(@separator; @padding; @additional-separator) when (@additional-separator = add-first) {

.simple-inline-nav(@separator; @padding);

> li:first-child {

padding-left: @padding;

&:before {

content: @separator;

margin-right: @padding;

}

.simple-inline-nav(@separator; @padding; @additional-separator) when (@additional-separator = add-last) {

.simple-inline-nav(@separator; @padding);

> li:last-child {

padding-right: @padding;

&:after {

content: @separator;

margin-left: @padding;

}

.simple-inline-nav(@separator; @padding; @additional-separator) when (@additional-separator = add-both) {

.simple-inline-nav(@separator; @padding);

> li:first-child {

padding-left: @padding;

&:before {

content: @separator;

margin-right: @padding;

}

> li:last-child {

padding-right: @padding;

&:after {

content: @separator;

margin-left: @padding;

}

L’intérêt de procéder via XML est multiple:

Déclaration native du block menu du compte client dans un layout XML du module Customer de Magento 2

Déplacer la déclaration du block sidebar.main.account_nav à la hauteur du thème

Router la déclaration intiale du block sidebar.main.account_nav" vers notre thème

Commande à exécuter avant de rafraîchir nos pages dans le navigateur

Conclusion

Mauvaises pratiques liées à l’utilisation des layouts customer_account.xml

Code de base pour un layout customer_account.xml

Les entrées qui composent le menu

Mon compte, informations du compte et carnet d’adresses (et « se déconnecter »)

Abonnements aux lettres d’information

Supprimer/Masquer des entrées précédemment référencées

Pas de layout customer_account.xml dans votre module? Créez-en un! (Amasty Gdpr)

app/design/frontend/MyVendor/mytheme/Amasty_Gdpr/layout/customer_account.xml:

Supprimer l’entrée Amasty Gdpr du menu du compte client

Ajouter des liens spécifiques/custom (vers un pages CMS par exemple)

Ancienne version du billet

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)

Supprimer des entrées ou en ajouter des nouvelles

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)

HTML

SASS

jQuery

Une navigation simple en mode « inline » incluant un séparateur entre chaque entrée :

Une navigation simple en mode « inline » incluant un séparateur entre chaque entrée et un séparateur supplémentaire devant la première entrée :

Une navigation simple en mode « inline » incluant un séparateur entre chaque entrée et un séparateur supplémentaire derrière la dernière entrée :

Une navigation simple en mode « inline » incluant un séparateur entre chaque entrée et deux séparateurs supplémentaires placés respectivement devant et derrière la première et la dernière entrée :

Déplacer la déclaration du block `sidebar.main.account_nav` à la hauteur du thème

Router la déclaration intiale du block `sidebar.main.account_nav"` vers notre thème

Mauvaises pratiques liées à l’utilisation des layouts `customer_account.xml`

Code de base pour un layout `customer_account.xml`

Pas de layout `customer_account.xml` dans votre module? Créez-en un! (Amasty Gdpr)

`app/design/frontend/MyVendor/mytheme/Amasty_Gdpr/layout/customer_account.xml`: