Étiquette : customer account

[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 block (une page) au compte client via un layout XML

29/07/2020 / admin

Dans votre module, dans view/frontend/layout/ ou dans un thème dans Vendor_Module/layout/, rajouter un layout XML contenant ceci:

<?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">
<update handle="customer_account"/>
    <body>
        <referenceContainer name="content">
            <!-- ici votre block -->
        </referenceContainer>
    </body>
</page>

<?xml version="1.0"?>

<body>

</referenceContainer>

</body>

</page>

<update handle="customer_account"/> fait référence au layout global des pages du compte client (dans le module Customer, layout/customer_account.xml).

<referenceContainer name="content"> fait référence à la zone content de la page.

[Magento 2] Utiliser l’Argument Attributes et l’Item Class dans un Layout XML pour ajouter une classe spécifique à un élément du menu de navigation du compte client

08/06/2020 / admin

Problématique: ajouter des icônes devant chaque entrée du menu de navigation du compte client. Cette opération s’effectue en plusieurs étapes:

Dans un layout XML

Dans un fichier app/design/frontend/MyVendor/mytheme/Magento_Customer/layout/customer_account.xml, nous allons utiliser les attributs <argument name="attributes" et <item name="class pour affecter des classes CSS à l’élément a d’une entrée de menu (dans mon exemple, l’entrée Mon compte apparenant au module Magento_Customer et les classes icon-customer-nav icon-account):

<referenceBlock name="customer_account_navigation">
    <referenceBlock name="customer-account-navigation-account-link" template="Magento_Customer::account/customer-nav-link.phtml">
        <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>
</block>

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

</argument>

</arguments>

</referenceBlock>

</block>

A ce stade nous avons un problème: les classes s’ajoutent sur l’élément a et on voit bien nos icônes, sauf lorsque l’entrée de menu en question est en current et que l’élément a est remplacé par un strong. Il perd alors les classes que nous lui avons affecté.

Dans un template PHTML

Nous allons créer un fichier app/design/frontend/MyVendor/mytheme/Magento_Customer/templates/account/customer-nav-link.phtml qui va venir surcharger le markup généré au départ par le block vendor/magento/framework/View/Element/Html/link/Current.php.

Ce fichier va permettre que les valeurs que nous avons renseigné précédemment pour les attributs <argument name="attributes" et <item name="class dans le fichier app/design/frontend/MyVendor/mytheme/Magento_Customer/layout/customer_account.xml puissent être également affectées à l’élément strong lorsqu’il remplace le lien pour signifier la page current.

Notre fichier complet:

<?php
/**
 * @var block \Magento\Framework\View\Element\Html\Link\Current
 */

$attributesHtml = '';
$attributes = $block->getAttributes();
if ($attributes) {
    foreach ($attributes as $attribute => $value) {
        $attributesHtml .= ' ' . $attribute . '="' . $block->escapeHtml($value) . '"';
    }
}

if ( $block->isCurrent() ) { ?>
    <li class="nav item current">
        <strong <?= $attributesHtml ?>>
            <?= $block->escapeHtml(__($block->getLabel())) ?>
        </strong>
    </li>
<?php } else { ?>
    <li class="nav item <?= $block->getIsHighlighted() ? 'current' : ''?>">
        <a href="<?= $block->escapeHtml($block->getHref()) ?>"
            <?= $block->getTitle() ? ' title="' . $block->escapeHtml(__($block->getTitle())) . '"' : ''; ?>
            <?= $attributesHtml ?>
        >

        <?php if ($block->getIsHighlighted()) : ?>
            <strong>
        <?php endif; ?>
                <?= $block->escapeHtml(__($block->getLabel())); ?>
        <?php if ($block->getIsHighlighted()) : ?>
            </strong>
        <?php endif; ?>

        </a>
    </li>
<?php } ?>

<?php

/**

* @var block \Magento\Framework\View\Element\Html\Link\Current

$attributesHtml = '';

$attributes = $block->getAttributes();

if ($attributes) {

foreach ($attributes as $attribute => $value) {

$attributesHtml .= ' ' . $attribute . '="' . $block->escapeHtml($value) . '"';

}

if ( $block->isCurrent() ) { ?>

>

<?= $block->escapeHtml(__($block->getLabel())) ?>

</li>

<?php } else { ?>

<li class="nav item <?= $block->getIsHighlighted() ? 'current' : ''?>">

<a href="<?= $block->escapeHtml($block->getHref()) ?>"

<?= $block->getTitle() ? ' title="' . $block->escapeHtml(__($block->getTitle())) . '"' : ''; ?>

<?= $attributesHtml ?>

<?php if ($block->getIsHighlighted()) : ?>

<?php endif; ?>

<?= $block->escapeHtml(__($block->getLabel())); ?>

<?php if ($block->getIsHighlighted()) : ?>

<?php endif; ?>

</a>

</li>

<?php } ?>

Explications (sommaires…)

Ici, toutes les références à $this qu’on peut trouver dans Current.php sont replacées par $block dans customer-nav-link.phtml.

La partie haute:

$attributesHtml = '';
$attributes = $block->getAttributes();
if ($attributes) {
    foreach ($attributes as $attribute => $value) {
        $attributesHtml .= ' ' . $attribute . '="' . $block->escapeHtml($value) . '"';
    }
}

$attributesHtml = '';

$attributes = $block->getAttributes();

if ($attributes) {

foreach ($attributes as $attribute => $value) {

$attributesHtml .= ' ' . $attribute . '="' . $block->escapeHtml($value) . '"';

}

…est une référence à la fonction privée getAttributesHtml() dans Current.php. On voit plus bas que l’attribut et ses valeurs sont affectées aux éléments strong et a:

if ( $block->isCurrent() ) { ?>
    <li class="nav item current">
        <strong <?= $attributesHtml ?>>
        [..]
    </li>
<?php } else { ?>
    <li class="nav item <?= $block->getIsHighlighted() ? 'current' : ''?>">
        <a href="<?= $block->escapeHtml($block->getHref()) ?>"
            [...]
            <?= $attributesHtml ?>
        >
            [...]
        </a>
    </li>
<?php } ?>

if ( $block->isCurrent() ) { ?>

>

[..]

</li>

<?php } else { ?>

<li class="nav item <?= $block->getIsHighlighted() ? 'current' : ''?>">

<a href="<?= $block->escapeHtml($block->getHref()) ?>"

[...]

<?= $attributesHtml ?>

[...]

</a>

</li>

<?php } ?>

Faire appel à notre template PHTML dans le layout XML

Afin que notre surcharge PHP soit prise en compte, il faut déclarer notre template app/design/frontend/MyVendor/mytheme/Magento_Customer/templates/account/customer-nav-link.phtml dans le layout app/design/frontend/MyVendor/mytheme/Magento_Customer/layout/customer_account.xml, au niveau du bloc référencé (il faut le faire pour chaque bloc):

<referenceBlock name="customer-account-navigation-account-link" template="Magento_Customer::account/customer-nav-link.phtml">

1	<referenceBlock name="customer-account-navigation-account-link" template="Magento_Customer::account/customer-nav-link.phtml">

A savoir: l'argument name="attributes" peut reçevoir des item name="" totalement custom/spécifiques. Exemple:

<referenceBlock name="customer-account-navigation-account-link">
    <arguments>
       <argument name="label" xsi:type="string" translate="true">Account Dashboard</argument>
       <argument name="path" xsi:type="string">customer/account</argument>
       <argument name="sortOrder" xsi:type="number">250</argument>
       <argument name="attributes" xsi:type="array">
          <item name="mobile" xsi:type="string">hidden</item>
       </argument>
    </arguments>
</referenceBlock>

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

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

<item name="mobile" xsi:type="string">hidden</item>

</argument>

</arguments>

</referenceBlock>

…et ensuite dans votre CSS:

@media (max-width: 767px) {
   *[mobile="hidden"] {
      display: none !important;
   }
}

@media (max-width: 767px) {

*[mobile="hidden"] {

display: none !important;

}

[Magento 2] Créer une page monsite.com/customer/account/activate/

19/02/2020 / admin

Les fichiers que nous allons devoir créer (MyVendor et MyModule doivent commencer par une Majuscule):

app/code/MyVendor/MyModule/Block/Activate.php
app/code/MyVendor/MyModule/Controller/Account/Activate.php
app/code/MyVendor/MyModule/etc/frontend/routes.xml
app/code/MyVendor/MyModule/view/frontend/layout/customer_account_activate.xml
app/code/MyVendor/MyModule/view/frontend/templates/activate.phtml

app/code/MyVendor/MyModule/Block/Activate.php

<?php
/**
 * Copyright © 2020 MyVendor. All rights reserved.
 * See COPYING.txt for license details.
 */
namespace MyVendor\MyModule\Block;

/**
 * MyModule activate block
 *
 * @category   MyVendor
 * @package    MyVendor_MyModule
 * @author     MyVendor Magento Team <magento@team.fr>
 */
class Activate extends \Magento\Framework\View\Element\Template
{

}

<?php

/**

* See COPYING.txt for license details.

namespace MyVendor\MyModule\Block;

/**

* MyModule activate block

* @category MyVendor

* @package MyVendor_MyModule

* @author MyVendor Magento Team <magento@team.fr>

class Activate extends \Magento\Framework\View\Element\Template

{

}

app/code/MyVendor/MyModule/Controller/Account/Activate.php

<?php
/**
 * Copyright © 2020 MyVendor. All rights reserved.
 * See COPYING.txt for license details.
 */
namespace MyVendor\MyModule\Controller\Account;

/**
 * MyModule activate view action
 *
 * @category   MyVendor
 * @package    MyVendor_MyModule
 * @author     MyVendor Magento Team <magento@team.fr>
 */
class Activate extends \Magento\Framework\App\Action\Action
{
    /**
     * @var \Magento\Framework\View\Result\PageFactory $resultPageFactory
     */
    protected $resultPageFactory;

    /**
     * Summary constructor
     *
     * @param \Magento\Framework\App\Action\Context      $context
     * @param \Magento\Framework\View\Result\PageFactory $resultPageFactory
     */
    public function __construct(
        \Magento\Framework\App\Action\Context $context,
        \Magento\Framework\View\Result\PageFactory $resultPageFactory
    ) {
        $this->resultPageFactory = $resultPageFactory;
        parent::__construct(
            $context
        );
    }

    /**
     * @return \Magento\Framework\Controller\Result\Redirect|\Magento\Framework\View\Result\Page
     */
    public function execute()
    {
        /** @var \Magento\Framework\View\Result\Page $resultPage */
        $resultPage = $this->resultPageFactory->create();
        $resultPage->getConfig()->getTitle()->set(__('Activate my account'));
        return $resultPage;
    }
}

<?php

/**

* See COPYING.txt for license details.

namespace MyVendor\MyModule\Controller\Account;

/**

* MyModule activate view action

* @category MyVendor

* @package MyVendor_MyModule

* @author MyVendor Magento Team <magento@team.fr>

class Activate extends \Magento\Framework\App\Action\Action

{

/**

* @var \Magento\Framework\View\Result\PageFactory $resultPageFactory

protected $resultPageFactory;

/**

* Summary constructor

* @param \Magento\Framework\App\Action\Context $context

* @param \Magento\Framework\View\Result\PageFactory $resultPageFactory

public function __construct(

\Magento\Framework\App\Action\Context $context,

\Magento\Framework\View\Result\PageFactory $resultPageFactory

) {

$this->resultPageFactory = $resultPageFactory;

parent::__construct(

$context

);

}

/**

* @return \Magento\Framework\Controller\Result\Redirect|\Magento\Framework\View\Result\Page

public function execute()

{

/** @var \Magento\Framework\View\Result\Page $resultPage */

$resultPage = $this->resultPageFactory->create();

$resultPage->getConfig()->getTitle()->set(__('Activate my account'));

return $resultPage;

}

app/code/MyVendor/MyModule/etc/frontend/routes.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2020 MyVendor. All rights reserved.
 * See COPYING.txt for license details.
 *
 * @category   MyVendor
 * @package    MyVendor_MyModule
 * @author     MyVendor Magento Team <magento@team.fr>
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="standard">
        <route id="customer"><!-- URL qui commence par customer/ -->
            <module name="MyVendor_MyModule" before="Magento_Customer" />
        </route>
    </router>
</config>

<?xml version="1.0"?>

<!--

/**

* See COPYING.txt for license details.

* @category MyVendor

* @package MyVendor_MyModule

* @author MyVendor Magento Team <magento@team.fr>

-->

</route>

</router>

</config>

app/code/MyVendor/MyModule/view/frontend/layout/customer_account_activate.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">
    <update handle="customer_account"/>
    <body>
        <referenceContainer name="content">
            <block template="MyVendor_MyModule::activate.phtml" class="MyVendor\MyModule\Block\Activate" name="customer.account.activate" cacheable="false" />
        </referenceContainer>
    </body>
</page>

<?xml version="1.0"?>

<body>

</referenceContainer>

</body>

</page>

app/code/MyVendor/MyModule/view/frontend/templates/activate.phtml

<h1>activate.phtml</h1>

1	<h1>activate.phtml</h1>

Articles récents

Catégories

Archives

Méta

Étiquette : customer account

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

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

[Magento 2] Ajouter un block (une page) au compte client via un layout XML

[Magento 2] Utiliser l’Argument Attributes et l’Item Class dans un Layout XML pour ajouter une classe spécifique à un élément du menu de navigation du compte client

Dans un layout XML

Dans un template PHTML

Notre fichier complet:

Explications (sommaires…)

Faire appel à notre template PHTML dans le layout XML

[Magento 2] Créer une page monsite.com/customer/account/activate/

app/code/MyVendor/MyModule/Block/Activate.php

app/code/MyVendor/MyModule/Controller/Account/Activate.php

app/code/MyVendor/MyModule/etc/frontend/routes.xml

app/code/MyVendor/MyModule/view/frontend/layout/customer_account_activate.xml

app/code/MyVendor/MyModule/view/frontend/templates/activate.phtml

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

Dans un layout XML

Dans un template PHTML

Notre fichier complet:

Explications (sommaires…)

Faire appel à notre template PHTML dans le layout XML

app/code/MyVendor/MyModule/Block/Activate.php

app/code/MyVendor/MyModule/Controller/Account/Activate.php

app/code/MyVendor/MyModule/etc/frontend/routes.xml

app/code/MyVendor/MyModule/view/frontend/layout/customer_account_activate.xml

app/code/MyVendor/MyModule/view/frontend/templates/activate.phtml

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