CategoryMagento 2

[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] Afficher un lien vers la fiche produit depuis la quickview en exploitant le localStorage

23/07/2020 / admin

edit: je me suis rendu compte que la solution #1 n’était pas fonctionnelle. En effet, à l’utilisation, le local storage (clé: product_data_storage) était vide/n’avait aucune valeur!

Solution #2 (fonctionnelle)

app/design/frontend/Vendor/theme/Magento_Catalog/templates/product/list.phtml: au clic sur un item produit (parce qu’au clic sur le trigger de la quickview, il ne se passait rien), on cherche dans le markup enfant le lien vers la fiche produit cible et on le stocke dans le local storage via window.localStorage.setItem('clé', valeur);.

<script>
    require([
        'jquery'
    ], function ($) {
        $('.product-item').on('click', function(){
            let quickviewRelatedProductURL = $(this).find('.product-item-link').attr('href');
            window.localStorage.setItem('quickviewRelatedProductURL', quickviewRelatedProductURL);
        });
    });
</script>

require([

'jquery'

], function ($) {

$('.product-item').on('click', function(){

let quickviewRelatedProductURL = $(this).find('.product-item-link').attr('href');

window.localStorage.setItem('quickviewRelatedProductURL', quickviewRelatedProductURL);

});

</script>

app/design/frontend/Vendor/theme/Magento_Catalog/templates/product/view/product-url.phtml: au clic sur le lien « voir la fiche produit », on récupère l’URL dans le local storage (clé quickviewRelatedProductURL):

<div class="product-url">
    <a id="currentlyViewedProductURL" class="link-see-product"><?= __('link-see-product'); ?></a>
</div>
<script>
    require([
        'jquery'
    ], function ($) {
        const $currentlyViewedProductURL = $('#currentlyViewedProductURL');

        $currentlyViewedProductURL.on('click', function(){
            // ...on fait une redirection JS dans la fenêtre parente de l'iFrame (la quickview) qui contient une partie de la fiche produit
            window.top.location.href = window.localStorage.getItem('quickviewRelatedProductURL');

            // ...et seulement ensuite, on simule le click sur la croix de fermeture de la quickview.
            $('.action-close', parent.document).click();
        });
    });
</script>

</div>

require([

'jquery'

], function ($) {

const $currentlyViewedProductURL = $('#currentlyViewedProductURL');

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

// ...on fait une redirection JS dans la fenêtre parente de l'iFrame (la quickview) qui contient une partie de la fiche produit

window.top.location.href = window.localStorage.getItem('quickviewRelatedProductURL');

// ...et seulement ensuite, on simule le click sur la croix de fermeture de la quickview.

$('.action-close', parent.document).click();

});

</script>

Le layout XML et les styles de la solution #1 restent valables. Merci de vous y référer.

Solution #1 (pas focntionnelle)

Quickview rattachée au module CartQuickPro fourni avec le thème Venuse.

La quickview s’affiche en cliquant sur un item produit dans le listing produit (page catégorie) du site Magento 2. Elle affiche, dans une iFrame, une partie des éléments de la fiche produit (c’est le même code qui est utilisé pour la quickview et la fiche produit).

Le fichier template PHTML:

Objectif: placer un lien vers la fiche produit dans la page.
On récupère l’URL de la fiche produit en consultation dans le localStorage (clé: product_data_storage) sous forme de chaîne JSON. Il faut convertir cette chaîne JSON en objet JavaScript pour pouvoir l’exploiter.
On récupère l’ID du produit dans le DOM.
Au clic sur l’élément a#currentlyViewedProductURL (le lien « Voir la fiche produit »)…
- …on fait une redirection JS dans la fenêtre parente de l’iFrame (la quickview) qui contient une partie de la fiche produit
- …et seulement ensuite, on simule le click sur la croix de fermeture de la quickview.

app/design/frontend/Vendor/theme/Magento_Catalog/templates/product/view/product-url.phtml

<div class="product-url">
    <a id="currentlyViewedProductURL" class="link-see-product"><?= __('link-see-product'); ?></a>
</div>
<script>
    require([
        'jquery'
    ], function ($) {
        const $currentlyViewedProductURL = $('#currentlyViewedProductURL');

        // On récupère l'URL de la fiche produit dans le localStorage (clé: product_data_storage) sous forme de chaîne JSON.
        // Il faut convertir cette chaîne JSON en objet JavaScript pour pouvoir l'exploiter.
        // https://blog.logrocket.com/the-complete-guide-to-using-localstorage-in-javascript-apps-ba44edb53a36/
        let productDataStorageObject = JSON.parse(window.localStorage.getItem('product_data_storage')),
        // On récupère l'ID du produit dans le DOM.
            viewedProductID = $('.price-box').attr('data-product-id');

        // On assigne l'URL de la fiche produit à l'élément a#currentlyViewedProductURL via le pseudo attribut href.
        $currentlyViewedProductURL.attr('href', productDataStorageObject[viewedProductID].url);

        // Au clic sur l'élément a#currentlyViewedProductURL (le lien "Voir la fiche produit")...
        $currentlyViewedProductURL.on('click', function(){
            // ...on fait une redirection JS dans la fenêtre parente de l'iFrame (la quickview) qui contient une partie de la fiche produit
            // https://stackoverflow.com/questions/580669/redirect-parent-window-from-an-iframe-action
            window.top.location.href = productDataStorageObject[viewedProductID].url;

            // ...et seulement ensuite, on simule le click sur la croix de fermeture de la quickview.
            // https://stackoverflow.com/questions/23913951/how-to-get-an-element-outside-of-iframe-with-javascript-or-jquery/23914011
            $('.action-close', parent.document).click();
        });
    });
</script>

</div>

require([

'jquery'

], function ($) {

const $currentlyViewedProductURL = $('#currentlyViewedProductURL');

// On récupère l'URL de la fiche produit dans le localStorage (clé: product_data_storage) sous forme de chaîne JSON.

// Il faut convertir cette chaîne JSON en objet JavaScript pour pouvoir l'exploiter.

// https://blog.logrocket.com/the-complete-guide-to-using-localstorage-in-javascript-apps-ba44edb53a36/

let productDataStorageObject = JSON.parse(window.localStorage.getItem('product_data_storage')),

// On récupère l'ID du produit dans le DOM.

viewedProductID = $('.price-box').attr('data-product-id');

// On assigne l'URL de la fiche produit à l'élément a#currentlyViewedProductURL via le pseudo attribut href.

$currentlyViewedProductURL.attr('href', productDataStorageObject[viewedProductID].url);

// Au clic sur l'élément a#currentlyViewedProductURL (le lien "Voir la fiche produit")...

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

// ...on fait une redirection JS dans la fenêtre parente de l'iFrame (la quickview) qui contient une partie de la fiche produit

// https://stackoverflow.com/questions/580669/redirect-parent-window-from-an-iframe-action

window.top.location.href = productDataStorageObject[viewedProductID].url;

// ...et seulement ensuite, on simule le click sur la croix de fermeture de la quickview.

// https://stackoverflow.com/questions/23913951/how-to-get-an-element-outside-of-iframe-with-javascript-or-jquery/23914011

$('.action-close', parent.document).click();

});

</script>

Bonus:

(inutile pour ce qu’on essaye de faire, mais bon à savoir) Récupérer la première clé d’un objet JSON sans connaître le libellé de cette clé:

// https://stackoverflow.com/questions/42097143/how-to-get-first-key-pair-element-of-json-object-without-knowing-key-and-deletin
let firstKey = Object.keys(productDataStorageObject)[0];
$('#currentlyViewedProductURL').attr('href', productDataStorageObject[firstKey].url);

// https://stackoverflow.com/questions/42097143/how-to-get-first-key-pair-element-of-json-object-without-knowing-key-and-deletin

let firstKey = Object.keys(productDataStorageObject)[0];

$('#currentlyViewedProductURL').attr('href', productDataStorageObject[firstKey].url);

Le fichier layout XML:

On s’en sert pour positionner le template PHTML dans la page.

app/design/frontend/Vendor/theme/Magento_Catalog/layout/catalog_product_view.xml

<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <referenceContainer name="content">
        <referenceContainer name="product.info.main">
            <container name="product.info.url" after="product.info">
                <block class="Magento\Framework\View\Element\Template" name="product.url" template="Magento_Catalog::product/view/product-url.phtml"/>
            </container>
        </referenceContainer>

<?xml version="1.0"?>

</container>

</referenceContainer>

Les styles:

.product-url {
    display: none;
    width: 100%;

    // On affiche le lien vers la fiche produit UNIQUEMENT dans la quickview
    .cartquickpro-catalog_product-view & {
        display: flex;
    }

    .link-see-product {
        text-decoration: underline;
        &:hover {
            text-decoration: none;
        }
    }
}

.product-url {

display: none;

width: 100%;

// On affiche le lien vers la fiche produit UNIQUEMENT dans la quickview

.cartquickpro-catalog_product-view & {

display: flex;

}

.link-see-product {

text-decoration: underline;

&:hover {

text-decoration: none;

}

[Magento 2][SEO] Configurer le fichier robots.txt et la Meta robots depuis l’interface d’administration

21/07/2020 / admin

Un peu de documentation sur les meta robots et le fichier robots.txt
How to Configure Robots.txt and Meta Robots for Magento 2. Un tutoriel complet et détaillé. Version PDF pour la postérité.
La devdoc officielle de Magento 2: Add site map and search engine robots. Voir notamment la partie sur l’erreur 404 en cas de tentative d’accès au fichier robots.txt en prod. C’est important car ce fichier doit pouvoir être lu depuis le navigateur!

Empêcher des pages d’être vues par les moteurs de recherche:

Cette fonctionnalité va nous être utile pour toutes les pages de notre site que nous ne souhaitons PAS voir référencées par les moteurs de recherche (exemple: landing pages).

Intervenir sur le fichier robots.txt (qui contient des directives destinées aux moteurs de recherche pour l’indexation des pages de votre site) pour empêcher le référencement de certaines pages:

CONTENU > Design > Configuration
Cliquer sur « Modifier » pour la ligne « Global – Main website » (seule ligne disponible normalement)
Scroller un peu vers le bas, ouvrir le volet « Moteurs de recherche »
Dans le champ « Modifier les instructions personnalisées du fichier robots.txt », ajouter le code suivant:

User-agent: *

# Empêcher le référencement des landing pages en les listant ci-dessous:

Disallow: /abonnements-landing.html
Disallow: /landing-test-1.html

User-agent: *

# Empêcher le référencement des landing pages en les listant ci-dessous:

Disallow: /abonnements-landing.html

Disallow: /landing-test-1.html

Ce code empêche le référencement des pages /abonnements-landing.html et /landing-test-1.html de votre site.

Trouver les URLS des pages:

CATALOGUE > Catégories
Choisir une landing page dans l’arborescence en colonne de gauche (par exemple Abonnements landing > Landing test #1)
Ouvrir le volet « Optimisations pour les moteurs de recherche »
Le champ « Clé d’URL » contient la valeur « landing-test-1 ». C’est une partie de l’URL à déclarer.
Il suffit de rajouter une ligne {{Disallow: /}} + la valeur du champ « Clé d’URL » + {{.html}} dans le champ « Modifier les instructions personnalisées du fichier robots.txt » vu plus haut pour rajouter une page à exclure du référencement de votre site.

Ne pas oublier de vider les caches après chaque modification du champ « Modifier les instructions personnalisées du fichier robots.txt »:

SYSTEME > Outils > Gestion du cache
Cocher la ligne « Configuration » (la 1ère ligne normalement)
Sélectionner « Rafraîchir » dans la liste des actions et cliquer sur le bouton « Envoyer »

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

Theme by Anders Norén — Up ↑

Juste quelques bonnes pratiques pour faire de votre site une usine à gaz :)

Articles récents

Catégories

Tags

Archives

Méta

CategoryMagento 2

Solution #2 (fonctionnelle)

Solution #1 (pas focntionnelle)

Le fichier template PHTML:

Bonus:

Le fichier layout XML:

Les styles:

Empêcher des pages d’être vues par les moteurs de recherche:

Trouver les URLS des pages:

Ne pas oublier de vider les caches après chaque modification du champ « Modifier les instructions personnalisées du fichier robots.txt »:

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:

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)

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