Mois : juin 2020

[Magento 2] Mise à jour du prix final dans une fiche produit lorsqu’on vide dynamiquement via javascript une option sous forme de champ texte

29/06/2020 / admin

Je me suis retrouvé dans un cas extrêmement particulier dans lequel l’utilisateur pouvait, depuis une fiche produit, rajouter des options en cascade: il pouvait en premier lieu choisir une couleur de papier cadeau (+2,00 €).

Une fois le papier cadeau sélectionné (et seulement à cette condition), il pouvait choisir d’ajouter une étiquette avec un prénom (+0,50 €).

Ce champ étiquette était limité à 14 caractères. La fonctionnalité était gérée via un widget remaining-characters.js fourni dans Magento 2.

Problème: lorsque l’utilisateur avait renseigné choisi un papier cadeau et renseigné un prénom, le prix total s’incrémentait de la somme des deux options (+2,00 € +0,50 €). Mais lorsque l’utilisateur décidait finalement de ne pas prendre de papier cadeau en décochant l’option de couleur, seul le prix du papier se décrémentait (-2,00 €) et le prix total comprenait encore celui de l’option étiquette (+0,50 €).

Solution: le plug-in qui compte le nombre de caractères présents dans le champ écoute les événements change keyup paste:

_create: function () {
    [...]
    this.element.on('change keyup paste', this.updateCharacterCount.bind(this));
},

_create: function () {

[...]

this.element.on('change keyup paste', this.updateCharacterCount.bind(this));

Lorsqu’un utilisateur décoche l’option papier cadeau, on vide l'input text de l’option étiquette avec la méthode .val(''), mais de cette manière le plug-in qui écoute les événements change keyup paste n’a pas « capté » que le champ a été vidé et, de ce fait, ne remet pas le pric total à jour correctement.

Pour lui signifier que le champ a été vidé de manière dynamique, il faut chaîner notre déclaration avec la méthode .trigger() qui contient en argument l’événement change:

// Vider le champ Etiquette et reset le compteur de lettres
$('.input-text', $giftWrapSticker)
    .val('')
    .trigger('change');
$('.character-counter', $giftWrapSticker).addClass('no-display');

// Vider le champ Etiquette et reset le compteur de lettres

$('.input-text', $giftWrapSticker)

.val('')

.trigger('change');

$('.character-counter', $giftWrapSticker).addClass('no-display');

Le code complet pour gérer les deux options en cascade

La deuxième contrainte était de faire fonctionner des checkboxes un peu comme des boutons radio (un seul des x checkboxes devait pouvoir être sélectionné à la fois), mais de pouvoir n’en sélectionner aucune.

    <script>
        require([
            'jquery'
        ], function ($) {
            // option PAPIER CADEAU + ETIQUETTE

            const $giftWrapOptions = $('#giftWrapOptions'),
                  $giftWrapPrice   = $('#giftWrapPrice'),
                  $giftWrapSticker = $('#giftWrapSticker');

            // On récupère le prix de la 1ère option (ttes les options ont le même prix) pour l'afficher à côté du libellé
            let giftWrapOptionPrice = $('.field:first-of-type .price-wrapper', $giftWrapOptions).text();
            $giftWrapPrice.text(giftWrapOptionPrice);

            // Au clic sur l'une des options
            $('input[type="checkbox"]', $giftWrapOptions).on('click', function(event){
                let $this = $(this);

                // S'assurer que seule UNE option (ou aucune) est sélectionnée
                if($this.hasClass('is-current-choice')){
                    $this.removeClass('is-current-choice');
                } else {
                    $giftWrapOptions
                        .find('.is-current-choice')
                        .click()
                        .removeClass('is-current-choice');
                    $this.addClass('is-current-choice');
                }

                // Afficher/masquer le champ Etiquette
                if($('input[type="checkbox"]', $giftWrapOptions).is(':checked')){
                    $giftWrapSticker.removeClass('is-hidden');
                } else {
                    $giftWrapSticker.addClass('is-hidden');
                    // Vider le champ Etiquette et reset le compteur de lettres
                    $('.input-text', $giftWrapSticker)
                        .val('')
                        .trigger('change');
                    $('.character-counter', $giftWrapSticker).addClass('no-display');
                }
            });
        });
    </script>

require([

'jquery'

], function ($) {

// option PAPIER CADEAU + ETIQUETTE

const $giftWrapOptions = $('#giftWrapOptions'),

$giftWrapPrice = $('#giftWrapPrice'),

$giftWrapSticker = $('#giftWrapSticker');

// On récupère le prix de la 1ère option (ttes les options ont le même prix) pour l'afficher à côté du libellé

let giftWrapOptionPrice = $('.field:first-of-type .price-wrapper', $giftWrapOptions).text();

$giftWrapPrice.text(giftWrapOptionPrice);

// Au clic sur l'une des options

$('input[type="checkbox"]', $giftWrapOptions).on('click', function(event){

let $this = $(this);

// S'assurer que seule UNE option (ou aucune) est sélectionnée

if($this.hasClass('is-current-choice')){

$this.removeClass('is-current-choice');

} else {

$giftWrapOptions

.find('.is-current-choice')

.click()

.removeClass('is-current-choice');

$this.addClass('is-current-choice');

}

// Afficher/masquer le champ Etiquette

if($('input[type="checkbox"]', $giftWrapOptions).is(':checked')){

$giftWrapSticker.removeClass('is-hidden');

} else {

$giftWrapSticker.addClass('is-hidden');

// Vider le champ Etiquette et reset le compteur de lettres

$('.input-text', $giftWrapSticker)

.val('')

.trigger('change');

$('.character-counter', $giftWrapSticker).addClass('no-display');

}

});

</script>

[Magento 2] Un champ Date de Naissance custom avec validation côté javascript, placeholder et masque de saisie avec le plugin Cleave

23/06/2020 / admin

Testé fonctionnel Magento 2.3, 2.4

Magento 2 Dev Docs – Custom form validation
Autre propos (pas top en terme d’UI, mais peut servir dans un autre cas d’override): DOB Validation with three fields in magento2
Magento 2 Get Current Store Date Time

Nous allons supprimer le widget calendar du champ date de naissance du formulaire de création de compte de Magento 2.
Attention: le champ Date de Naissance n’apparaît pas par défaut! Il faut l’activer via l’interface d’administration (Google est ton ami).

Demo en ligne de Cleave.js.

`app/design/frontend/MyVendor/mytheme/Magento_Customer/templates/widget/dob.phtml`:

Apporter plus d’attention au passages suivants:

data-validate='{"required":true, "validate-date": {"dateFormat": "dd\/MM\/y"}, "validate-dob": true}' sur l'input type="text" permet la bonne validation de votre champ Date de Naissance
<script>require(['cleave'... qui initialise le masque de saisie sur le champ via le plugin Cleave.js

<?php
/** @var \Magento\Customer\Block\Widget\Dob $block */

$fieldCssClass = 'field date field-' . $block->getHtmlId();
$fieldCssClass .= $block->isRequired() ? ' required' : '';
?>
<div class="<?= $block->escapeHtmlAttr($fieldCssClass) ?>">
    <label class="label" for="<?= /* @noEscape */ $block->getHtmlId() ?>"><span><?= $block->escapeHtml($block->getStoreLabel('dob')) ?></span></label>
    <div class="control customer-dob">
        <input type="text"
               name="dob"
               id="dob"
               placeholder="jj/mm/aaaa"
               data-validate='{"required":true, "validate-date": {"dateFormat": "dd\/MM\/y"}, "validate-dob": true}' />
        <?php if ($_message = $block->getAdditionalDescription()) : ?>
            <div class="note"><?= $block->escapeHtml($_message) ?></div>
        <?php endif; ?>
    </div>
</div>

<script>
    require([
        'cleave'
    ], function (Cleave) {
        var cleave = new Cleave('#dob', {
            date: true,
            delimiter: '/',
            datePattern: ['d', 'm', 'Y']
        });
    });
</script>

<?php

/** @var \Magento\Customer\Block\Widget\Dob $block */

$fieldCssClass = 'field date field-' . $block->getHtmlId();

$fieldCssClass .= $block->isRequired() ? ' required' : '';

<div class="<?= $block->escapeHtmlAttr($fieldCssClass) ?>">

<label class="label" for="<?= /* @noEscape */ $block->getHtmlId() ?>"><span><?= $block->escapeHtml($block->getStoreLabel('dob')) ?></span></label>

<input type="text"

name="dob"

id="dob"

placeholder="jj/mm/aaaa"

data-validate='{"required":true, "validate-date": {"dateFormat": "dd\/MM\/y"}, "validate-dob": true}' />

<?php if ($_message = $block->getAdditionalDescription()) : ?>

<div class="note"><?= $block->escapeHtml($_message) ?></div>

<?php endif; ?>

</div>

require([

'cleave'

], function (Cleave) {

var cleave = new Cleave('#dob', {

date: true,

delimiter: '/',

datePattern: ['d', 'm', 'Y']

});

</script>

`app/design/frontend/MyVendor/mytheme/requirejs-config.js`:

var config = {
    map: {
        "*": {
            cleave: 'js/vendor/cleave/dist/cleave.min'
        }
    },
    [...]
};

var config = {

map: {

"*": {

cleave: 'js/vendor/cleave/dist/cleave.min'

}

[...]

};

Import des sources de Cleave.js dans le projet:

Au moment où j’ai mise en place cette fonctionnalité, la dernière version tagguée de Cleave.js était la v1.6.0, mais n’hésitez pas à mettre à jour avec une version supérieure si existante!

Placez la source minifiée dans app/design/frontend/MyVendor/mytheme/web/js/vendor/cleave/dist/cleave.min.js.

[Magento 2] Un plugin jQuery custom pour rendre cliquable une zone complète plutôt que le seul lien qu’elle renferme avec x-magento-init et requireJS

16/06/2020 / admin

Exemple d’utilisation: les cartes (items) catégories ou produits du listing catégories ou produits.

Rendre toute une zone cliquable, plutôt qu’uniquement le lien qu’elle contient. Exemple: une carte produit dans le listing produit. app/design/frontend/MyVendor/mytheme/Magento_Catalog/templates/product/list.phtml.

Utilisation dans un fichier PHTML:

    // <script type="text/x-magento-init">
    //     {
    //         // ID ou classe CSS placée sur l'élément parent (zone qui devient cliquable)
    //         ".product-item": {
    //             // Alias de ce plug-in
    //             "zoneClick": {
    //                 // Paramètre "targetElement": l'élément enfant qui contient l'URL vers laquelle rediriger (valeur d'un attribut "href")
    //                 "targetElement": "a.product-item-link",
    //                 // Paramètre "exclude": la zone cliquable peut renfermer d'autres liens (un bouton d'ajout au panier par exemple) qui doivent rester actifs.
    //                 // Renseigner les IDs ou classes de ces liens ici.
    //                 // Toujours déclarer sous forme de tableau, même si il n'y a qu'un seul élément à exclure. Peut être vide, mais PAS OMIS.
    //                 "exclude": [ ".icon-addtocart.icon", ".toto", ".titi", ".tutu" ]
    //             }
    //         }
    //     }
    // </script>

// <script type="text/x-magento-init">

// {

// // ID ou classe CSS placée sur l'élément parent (zone qui devient cliquable)

// ".product-item": {

// // Alias de ce plug-in

// "zoneClick": {

// // Paramètre "targetElement": l'élément enfant qui contient l'URL vers laquelle rediriger (valeur d'un attribut "href")

// "targetElement": "a.product-item-link",

// // Paramètre "exclude": la zone cliquable peut renfermer d'autres liens (un bouton d'ajout au panier par exemple) qui doivent rester actifs.

// // Renseigner les IDs ou classes de ces liens ici.

// // Toujours déclarer sous forme de tableau, même si il n'y a qu'un seul élément à exclure. Peut être vide, mais PAS OMIS.

// "exclude": [ ".icon-addtocart.icon", ".toto", ".titi", ".tutu" ]

// }

// </script>

Détail des fichiers à mettre en place:

app/web/app/design/frontend/MyVendor/mytheme/web/js/zone-click.js

define([
    "jquery"
], function($) {
    "use strict";

    return function (options, element) {
        $(element).on('click', function (event) {
            let $this = $(this),
                $clickedElement = $(event.target),
                excludeAmount = options.exclude.length,
                testExclude = [];

            // On vérifie que l'élément cliqué ne fait pas partie de la liste des exclusions:
            let i;
            for (i = 0; i < excludeAmount; i++){
                if ($clickedElement.is(options.exclude[i])) {
                    testExclude.push(1);
                } else {
                    // nada ...
                }
            }

            if (testExclude.length > 0) {
                // Si l'élément cliqué fait partie de la liste des exclusions, on ne redirige pas vers la page cible.
                testExclude = [];
            } else {
                // Sinon, on redirige vers la page cible.
                window.location = $this.find(options.targetElement).attr('href');
                return false;
            }
        });
    };
});
// https://www.siphor.com/different-ways-using-javascript-magento-2/
// https://jason.codes/2019/06/magento-2-create-jquery-ui-widget/

define([

"jquery"

], function($) {

"use strict";

return function (options, element) {

$(element).on('click', function (event) {

let $this = $(this),

$clickedElement = $(event.target),

excludeAmount = options.exclude.length,

testExclude = [];

// On vérifie que l'élément cliqué ne fait pas partie de la liste des exclusions:

let i;

for (i = 0; i < excludeAmount; i++){

if ($clickedElement.is(options.exclude[i])) {

testExclude.push(1);

} else {

// nada ...

}

if (testExclude.length > 0) {

// Si l'élément cliqué fait partie de la liste des exclusions, on ne redirige pas vers la page cible.

testExclude = [];

} else {

// Sinon, on redirige vers la page cible.

window.location = $this.find(options.targetElement).attr('href');

return false;

}

});

};

});

// https://www.siphor.com/different-ways-using-javascript-magento-2/

// https://jason.codes/2019/06/magento-2-create-jquery-ui-widget/

Note: pour être sûr de ce que vous allez renseigner en paramètre exclude, vous pouvez ajouter dans le code ci-dessus un console.log($clickedElement.attr('class'));. Puis allez en front et cliquez sur les éléments à exclure. Les classes qui leur sont affectées apparaîtront en console (F12).

Déclaration via requireJS: app/design/frontend/MyVendor/mytheme/requirejs-config.js

var config = {
    map: {
        "*": {
            zoneClick: 'js/zone-click'
        }
    }
};

var config = {

map: {

"*": {

zoneClick: 'js/zone-click'

}

};

app/design/frontend/MyVendor/mytheme/Magento_Catalog/templates/product/list.phtml

        <script type="text/x-magento-init">
            {
                ".product-item": {
                    "zoneClick": {
                        "targetElement": "a.product-item-link",
                        "exclude": [ ".icon-addtocart.icon" ]
                    }
                }
            }
        </script>

{

".product-item": {

"zoneClick": {

"targetElement": "a.product-item-link",

"exclude": [ ".icon-addtocart.icon" ]

}

</script>

[Magento 2] Des cases à cocher et des boutons radio sexy dans vos formulaires avec le markup HTML du core

10/06/2020 / admin

ATTENTION: les input et label doivent respectivement avoir des attributs for et id ayant une valeur identique afin que les styles fonctionnent correctement!

// Magento 2 core forms sexy inputs type=radio and type=checkbox
// !!! Will only work with Magento 2 core forms markup (replace "checkbox" with "radio" whenever needed) !!!
// <div class="field choice">
//     <input type="checkbox" id="is_subscribed" class="checkbox" />
//     <label for="is_subscribed" class="label"><span>Abonnez-vous à la lettre d’information</span></label>
// </div>
.field.choice {
    @custom-field_choice---width: 20px;
    position: relative;
    input[type="radio"],
    input[type="checkbox"] {
        position: absolute;
        left: -99999em;
        + .label {
            &:before {
                content: "";
                display: inline-block;
                vertical-align: bottom;
                margin-right: 8px;
                width: @custom-field_choice---width;
                height: @custom-field_choice---width;
                border: 1px solid @color_green;
                cursor: pointer;
                background: #fff;

                // Fine tuning vertical-align if needed
                //position: relative;
                //top: 2px;
            }
        }
        &:checked {
            + .label {
                &:before {
                    background: @color_green;
                }
            }
        }
    }
    input[type="radio"] {
        + .label {
            &:before {
                border-radius: @custom-field_choice---width;
            }
        }
    }
    input[type="checkbox"] {
        + .label {
            &:before {
                border-radius: @custom-field_choice---width/10;
            }
        }
    }
}

// Magento 2 core forms sexy inputs type=radio and type=checkbox

// !!! Will only work with Magento 2 core forms markup (replace "checkbox" with "radio" whenever needed) !!!

// <div class="field choice">

// <input type="checkbox" id="is_subscribed" class="checkbox" />

// <label for="is_subscribed" class="label"><span>Abonnez-vous à la lettre d’information</span></label>

// </div>

.field.choice {

@custom-field_choice---width: 20px;

position: relative;

input[type="radio"],

input[type="checkbox"] {

position: absolute;

left: -99999em;

+ .label {

&:before {

content: "";

display: inline-block;

vertical-align: bottom;

margin-right: 8px;

width: @custom-field_choice---width;

height: @custom-field_choice---width;

border: 1px solid @color_green;

cursor: pointer;

background: #fff;

// Fine tuning vertical-align if needed

//position: relative;

//top: 2px;

}

&:checked {

+ .label {

&:before {

background: @color_green;

}

input[type="radio"] {

+ .label {

&:before {

border-radius: @custom-field_choice---width;

}

input[type="checkbox"] {

+ .label {

&:before {

border-radius: @custom-field_choice---width/10;

}

[Magento 2] Gérer l’affichage des formulaires avec les mixins LESS de la Magento UI Library

10/06/2020 / admin

Documentation officielle: Magento UI Library – Forms mixins.

Bonnes pratiques

Si vous avez simplement l’intention de changer les valeurs des variables existantes (regardez la doc, il y en a beaucoup, vous pouvez probablement vous en tirer sans aller plus loin que ça…) faites le dans le fichier _theme.less de votre thème.

Fields customization variables – The `.lib-form-field()` mixin variables

Libellés au-dessus des champs, une colonne

& when (@media-common = true) {
    .fieldset {
        > .field {
            .lib-form-field(
                @_type: block
            );
        }
    }
}

& when (@media-common = true) {

.fieldset {

> .field {

.lib-form-field(

@_type: block

);

}

Libellés au-dessus des champs, deux colonnes

A savoir: lorsqu’on affiche le champ sur plusieurs colonnes, on peut utiliser la variable (appartenant au mixin) @_column-number (qui répond elle-même à la variable globale @form-field-column__number paramétrée par défaut à 2 pour modifier le nombre de colonnes sur lesquelles le formulaire va s’étaler.

& when (@media-common = true) {
    .fieldset {
        > .field {
            .lib-form-field(
                @_type: block,
                @_column: true
            );
        }
    }
}

& when (@media-common = true) {

.fieldset {

> .field {

.lib-form-field(

@_type: block,

@_column: true

);

}

Libellés à côté des champs, une colonne

& when (@media-common = true) {
    .fieldset {
        > .field {
            .lib-form-field(
                @_type: inline
            );
        }
    }
}

& when (@media-common = true) {

.fieldset {

> .field {

.lib-form-field(

@_type: inline

);

}

Libellés à côté des champs, deux colonnes

A savoir: (je me répète…) lorsqu’on affiche le champ sur plusieurs colonnes, on peut utiliser la variable (appartenant au mixin) @_column-number (qui répond elle-même à la variable globale @form-field-column__number paramétrée par défaut à 2 pour modifier le nombre de colonnes sur lesquelles le formulaire va s’étaler.

& when (@media-common = true) {
    .fieldset {
        > .field {
            .lib-form-field(
                @_type: inline,
                @_column: true
            );
        }
    }
}

& when (@media-common = true) {

.fieldset {

> .field {

.lib-form-field(

@_type: inline,

@_column: true

);

}

[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())) ?>

</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()) : ?>

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

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

[Magento 2] Comment inclure et utiliser un fichier JS custom placé dans un thème depuis un template PHTML avec data-mage-init

04/06/2020 / admin

C’est par ici: [Magento 2] Vérifier qu’un utilisateur client est connecté à son compte et afficher son prénom dans un template PHTML.

Voir aussi: [Magento 2] Comment inclure et utiliser un fichier JS custom avec requireJS.

[Magento 2] Vérifier qu’un utilisateur client est connecté à son compte et afficher son prénom dans un template PHTML

04/06/2020 / admin

Quelques ressources pour comprendre:

Customer Data Management in Magento 2 – récupérer des infos sur le customer en cache (local storage) via l’objet customer déclaré dans le composant JS Magento_Customer/js/view/customer. Version PDF – belvg.com-Customer Data Management in Magento 2
Sections in Magento 2 – Magento sets customer related data in local storage of browser in key value pair. Each key is known as section. In this post we will see How we can create custom section in our module and use the data in the section in our template file. Version PDF – webkul.com-Sections in Magento 2

Choisissez votre méthode:

Je veux faire ça bien avec javascript (après tout, c’est l’auteur de ce blog qui a souffert pour mettre ça en place proprement; moi j’ai juste à suivre ses directives).
Je vais utiliser l'objectManager de Magento 2 dans un PHTML (paaaaaaaaaaas bien!).

Avec javascript (pour afficher le prénom de l’utilisateur)

Source: Magento 2: get customer().lastname in header.phtml (le titre n’étant pas tout-à-fait juste puisqu’on récupère bien le firstName du customer.

Pas besoin de créer un module et de faire de l’injection de dépendances (comme on le voit sur les 36 fils de discussion stack overflow ou sur les 52 blogs qui sont proposés dans les premiers résultats Google…).

Dans votre fichier PHTML, initialisez votre JS sur un élément (span dans mon exemple, mais utilisez l’élément qui vous arrange):

<span data-mage-init='{"js/customerGreeting":{}}'>

1	<span data-mage-init='{"js/customerGreeting":{}}'>

…puis créez un fichier app/design/frontend/VotreVendor/votretheme/web/js/customerGreeting.js et mettez-y ceci:

define([
    "jquery", "Magento_Customer/js/customer-data"
], function($, customerData) {
    "use strict";
    return function (config, element) {
        var firstname = customerData.get('customer')().firstname;
        if (typeof (firstname) === "undefined") {
            customerData.reload('customer');
        }
        var check = setInterval(function () {
            var firstname = customerData.get('customer')().firstname;
            if (firstname) {
                $(element).text('Hi, ' + firstname);
                clearInterval(check);
            }
        }, 500);
    };
});

define([

"jquery", "Magento_Customer/js/customer-data"

], function($, customerData) {

"use strict";

return function (config, element) {

var firstname = customerData.get('customer')().firstname;

if (typeof (firstname) === "undefined") {

customerData.reload('customer');

}

var check = setInterval(function () {

var firstname = customerData.get('customer')().firstname;

if (firstname) {

$(element).text('Hi, ' + firstname);

clearInterval(check);

}

}, 500);

};

});

…et en fait, bin, ça fonctionne 🙂

Pour détecter si l’utilisateur est connecté, créer un Block et le déclarer dans un Layout

app/code/MyVendor/MyModule/Block/ThemeHeader.php:

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

use Magento\Framework\View\Element\Template;
use \Magento\Customer\Model\Session;

class ThemeHeader extends Template
{
    /**
     * @var Session $customerSession
     */
    protected $customerSession;

    public function __construct(Template\Context $context, Session $customerSession, array $data = [])
    {
        parent::__construct($context, $data);
        $this->customerSession = $customerSession;
    }

    public function getCustomerSession()
    {
        return $this->customerSession;
    }
}

<?php

/**

* See COPYING.txt for license details.

namespace MyVendor\MyModule\Block;

use Magento\Framework\View\Element\Template;

use \Magento\Customer\Model\Session;

class ThemeHeader extends Template

{

/**

* @var Session $customerSession

protected $customerSession;

public function __construct(Template\Context $context, Session $customerSession, array $data = [])

{

parent::__construct($context, $data);

$this->customerSession = $customerSession;

}

public function getCustomerSession()

{

return $this->customerSession;

}

app/design/frontend/MyVendor/mytheme/Magento_Theme/layout/default.xml:

        <!-- Récuperer la session client dans le header -->
        <referenceContainer name="header.container">
            <referenceBlock name="theme.headers" class="MyVendor\MyModule\Block\ThemeHeader"/>
        </referenceContainer>

</referenceContainer>

app/design/frontend/MyVendor/mytheme/Magento_Theme/layout/default.xml:

En en-tête de votre fichier PHTML:

    // Check whether a customer is logged in or not
    $customerSession = $block->getCustomerSession();

1 2	// Check whether a customer is logged in or not $customerSession = $block->getCustomerSession();

Dans le même fichier PHTML, à l’endroit où vous souhaitez afficher le prénom lorsque l’utilisateur est connecté:

<?php if($customerSession->isLoggedIn()) : ?>
    <span class="label"><?= __('Hello') ?> <?= $customerSession->getCustomer()->getName(); ?></span>
<?php else : ?>
    <span class="label"><?= __('Customer account') ?></span>
<?php endif; ?>

<?php if($customerSession->isLoggedIn()) : ?>

<span class="label"><?= __('Hello') ?> <?= $customerSession->getCustomer()->getName(); ?></span>

<?php else : ?>

<?php endif; ?>

MAUVAISE PRATIQUE La même chose via l'`objectManager`:

La création du Block et la déclaration de celui-ci dans un Layout comme vu plus haut est inutile si on invoque l'objectManager. Invoquer constamment l’objectManager va poser des problèmes de performances.

En en-tête de votre fichier PHTML:

<?php
    $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
    // Check whether a customer is logged in or not
    $customerSession = $objectManager->get('Magento\Customer\Model\Session');
?>

<?php

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();

// Check whether a customer is logged in or not

$customerSession = $objectManager->get('Magento\Customer\Model\Session');

Vous allez trouver beaucoup de solutions proposant d’utiliser l’objectManager sur le net (stack overflow, autres…). Si elles ne sont pas optimales, elles peuvent quand-même vous apporter une information intéressante à savoir le Model à utiliser si vous souhaitez faire ça bine et créer un Block (dans notre exemple: Magento\Customer\Model\Session. Regardez dans le code du block, plus haut dans ce billet, comment ce Model est déclaré puis exploité).

Le code complet pour gérer les deux options en cascade

app/design/frontend/MyVendor/mytheme/Magento_Customer/templates/widget/dob.phtml:

app/design/frontend/MyVendor/mytheme/requirejs-config.js:

Import des sources de Cleave.js dans le projet:

Utilisation dans un fichier PHTML:

Détail des fichiers à mettre en place:

Bonnes pratiques

Libellés au-dessus des champs, une colonne

Libellés au-dessus des champs, deux colonnes

Libellés à côté des champs, une colonne

Libellés à côté des champs, deux colonnes

Dans un layout XML

Dans un template PHTML

Notre fichier complet:

Explications (sommaires…)

Faire appel à notre template PHTML dans le layout XML

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)

Avec javascript (pour afficher le prénom de l’utilisateur)

Pour détecter si l’utilisateur est connecté, créer un Block et le déclarer dans un Layout

MAUVAISE PRATIQUE La même chose via l'objectManager:

`app/design/frontend/MyVendor/mytheme/Magento_Customer/templates/widget/dob.phtml`:

`app/design/frontend/MyVendor/mytheme/requirejs-config.js`:

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

MAUVAISE PRATIQUE La même chose via l'`objectManager`: