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
):
1 2 3 4 5 6 7 8 9 10 11 |
<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> |
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:
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 |
<?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 } ?> |
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:
1 2 3 4 5 6 7 |
$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
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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 } ?> |
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):
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:
1 2 3 4 5 6 7 8 9 10 |
<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> |
…et ensuite dans votre CSS:
1 2 3 4 5 |
@media (max-width: 767px) { *[mobile="hidden"] { display: none !important; } } |