devfrontend.info

[Magento 2] Astuces pour adapter rapidement du code javascript aux standards jQuery UI Widget

26/02/2021 / admin

L’intérêt de ce billet est de donner quelques astuces pour adapter rapidement du code javascript aux standards jQuery UI Widget pour une meilleure exploitation dans Magento 2.

Télécharger les sources: Magento2-jQuery-widget-example.

Dans cette archive au format ZIP, deux fichiers:

la version « old » du code du module, fonctionnelle mais pas formatée à la sauce jQuery UI Widget Factory
la version standardisée jQuery UI Widget Factory du code, pour une meilleure exploitation dans Magento 2

Note: très bonne ressource, en marge de la doc officielle, pour créer un widget jQuery UI pour Magento 2.

Découpage du squelette de base d’un widget jQuery UI pour Magento 2

Note: notre fichier d’exemple est placé dans un thème Magento 2 suivant le chemin: app/design/frontend/MyVendor/mytheme/web/js/attribute-carousel.js

On commence par un bon vieux define qui nous servira à définir notre widget en tant que de module via RequireJS. Il pourra ensuite s’articuler avec d’autres modules définis en tant que tels, toujours via RequireJS:

define([
    'jquery', // obligatoire
    'jquery-ui-modules/widget', // obligatoire
    'autre module...', // facultatif
    'autre module...', // facultatif
    'slick' // le plugin tiers jQuery AMD Slick Carousel
], function($) {
    'use strict';

define([

'jquery', // obligatoire

'jquery-ui-modules/widget', // obligatoire

'autre module...', // facultatif

'slick' // le plugin tiers jQuery AMD Slick Carousel

], function($) {

'use strict';

Déclaration ici des variables globales pour ce widget (facultatif, votre widget n’en a peut-être pas besoin):

    let ATTRIBUTE_SELECTOR_ELEMENT_ID,
        SELECTED_OPTION_INDEX;

1 2	let ATTRIBUTE_SELECTOR_ELEMENT_ID, SELECTED_OPTION_INDEX;

Déclaration du widget sous la forme $.widget('mage.<nomDuWidget>', {:

    $.widget('mage.nomDuWidget', {

1	$.widget('mage.nomDuWidget', {

Déclaration des options du widget sous forme d’objet options, si il exploite des arguments (facultatif).
Le libellé options ne doit pas être modifié!
(voir aussi les commentaires directement dans le bout de code ;))

        options: {

            // Option "simple":
            attributeSelectorId: '[id^="attribute"]',

            // Passage de plusieurs paramètres sous forme de sous-objet "slick" (par exemple, si on souhaite exploiter un plugin jQuery tiers qui propose des paramètres):
            slick: {
                infinite: false,
                slidesToShow: 3,
                slidesToScroll: 3,
                prevArrow: '<button type="button" class="clear slick-prev"><svg viewBox="0 0 100 100" class="icon icon-arrow-back-chevron"><use xlink:href="#icon-arrow-back-chevron"></use></svg></button>',
                nextArrow: '<button type="button" class="clear slick-next"><svg viewBox="0 0 100 100" class="icon icon-arrow-forward-chevron"><use xlink:href="#icon-arrow-forward-chevron"></use></svg></button>'
            }
        }, // <= ATTENTION A NE PAS OUBLIER LA VIRGULE JUSTE LA!

options: {

// Option "simple":

attributeSelectorId: '[id^="attribute"]',

// Passage de plusieurs paramètres sous forme de sous-objet "slick" (par exemple, si on souhaite exploiter un plugin jQuery tiers qui propose des paramètres):

slick: {

infinite: false,

slidesToShow: 3,

slidesToScroll: 3,

prevArrow: '<button type="button" class="clear slick-prev"><svg viewBox="0 0 100 100" class="icon icon-arrow-back-chevron"><use xlink:href="#icon-arrow-back-chevron"></use></svg></button>',

nextArrow: '<button type="button" class="clear slick-next"><svg viewBox="0 0 100 100" class="icon icon-arrow-forward-chevron"><use xlink:href="#icon-arrow-forward-chevron"></use></svg></button>'

}

}, // <= ATTENTION A NE PAS OUBLIER LA VIRGULE JUSTE LA!

La fonction privée _create" (présence obligatoire), qui sera automatiquement exécutée à chaque initialisation de ce widget depuis un PHTML, un fichier JS, …
Le libellé _create ne doit pas être modifié!

        _create: function () {

1	_create: function () {

Variabiliser le sélecteur, présent dans le DOM, sur lequel est initialisé le widget. Remarquer ici le chemin this.options.attributeSelectorId pour exploiter la valeur de l’option simple attributeSelectorId déclarée plus haut dans notre objet options.

Et variabiliser this (ici sous l’alias that) est important dès lors qu’on cherche à exécuter une fonction de ce widget (on le verra plus bas):

            const $_THIS = $(this.options.attributeSelectorId),
                  that = this;

1 2	const $_THIS = $(this.options.attributeSelectorId), that = this;

On précède chaque exécution d’une fonction de ce widget par notre « that » alias de « this »:

            that.appendCarouselToDOM($_THIS, that.ulToCarousel(that.clonedSelectToUl(that.cloneSelect($_THIS))));

1	that.appendCarouselToDOM($_THIS, that.ulToCarousel(that.clonedSelectToUl(that.cloneSelect($_THIS))));

Commentaires directement dans le bout de code 😉

            $('.slick-slide').on('click', function () {
                const $_THIS = $(this);

                // Les mises à jour des valeurs de nos variables globales se font sous ce mode:
                ATTRIBUTE_SELECTOR_ELEMENT_ID = $_THIS.closest('ul').attr('id');
                SELECTED_OPTION_INDEX = $_THIS.attr('data-slick-index');

                // Systématiquement, on précède chaque exécution d'une fonction de ce widget par notre "that" alias de "this":
                // (si on oublie le "that", la fonction n'est pas exécutée)
                that.synchronizeCarouselWithSelect(ATTRIBUTE_SELECTOR_ELEMENT_ID, SELECTED_OPTION_INDEX);
                that.handleCarouselSelectedOptionClass(ATTRIBUTE_SELECTOR_ELEMENT_ID, SELECTED_OPTION_INDEX);
            });
        }, // <= ATTENTION A NE PAS OUBLIER LA VIRGULE JUSTE LA!

$('.slick-slide').on('click', function () {

const $_THIS = $(this);

// Les mises à jour des valeurs de nos variables globales se font sous ce mode:

ATTRIBUTE_SELECTOR_ELEMENT_ID = $_THIS.closest('ul').attr('id');

SELECTED_OPTION_INDEX = $_THIS.attr('data-slick-index');

// Systématiquement, on précède chaque exécution d'une fonction de ce widget par notre "that" alias de "this":

// (si on oublie le "that", la fonction n'est pas exécutée)

that.synchronizeCarouselWithSelect(ATTRIBUTE_SELECTOR_ELEMENT_ID, SELECTED_OPTION_INDEX);

that.handleCarouselSelectedOptionClass(ATTRIBUTE_SELECTOR_ELEMENT_ID, SELECTED_OPTION_INDEX);

});

}, // <= ATTENTION A NE PAS OUBLIER LA VIRGULE JUSTE LA!

Manière de déclarer une fonction (<nomDeLaFontion>: function(<argument>, <argument>) { return <quelque chose> }):

        ulToCarousel: function(clonedSelectToUl) {

1	ulToCarousel: function(clonedSelectToUl) {

Ici, on déclare le chemin this.options.slick pour exploiter la valeur d’une option du sous-objet « slick » déclaré plus haut dans notre objet « options ».
Note: il y a probablement plus simple pour passer une série d’arguments que de repointer un à un tous les objets. Je manquais de temps sur le projet en question.

            return clonedSelectToUl.slick({
                infinite: this.options.slick.infinite,
                slidesToShow: this.options.slick.slidesToShow,
                slidesToScroll: this.options.slick.slidesToScroll,
                prevArrow: this.options.slick.prevArrow,
                nextArrow: this.options.slick.nextArrow
            });
        }, // <= ATTENTION A NE PAS OUBLIER LA VIRGULE JUSTE LA!

return clonedSelectToUl.slick({

infinite: this.options.slick.infinite,

slidesToShow: this.options.slick.slidesToShow,

slidesToScroll: this.options.slick.slidesToScroll,

prevArrow: this.options.slick.prevArrow,

nextArrow: this.options.slick.nextArrow

});

}, // <= ATTENTION A NE PAS OUBLIER LA VIRGULE JUSTE LA!

Manière de déclarer une fonction (: function(, ) { sans « return » cette fois-ci (ça fonctionne mais ce n’est pas la meilleure pratique!) }):

        synchronizeSelectWithCarousel: function(relatedElementID, selectedOptionIndex) {
            $('ul#' + relatedElementID).slick('slickGoTo', parseInt(selectedOptionIndex));
        }, // <= SAUF SI ON VIENT DE DECLARER LA TOUTE DERNIERE FONCTION DU WIDGET.

    });

synchronizeSelectWithCarousel: function(relatedElementID, selectedOptionIndex) {

$('ul#' + relatedElementID).slick('slickGoTo', parseInt(selectedOptionIndex));

}, // <= SAUF SI ON VIENT DE DECLARER LA TOUTE DERNIERE FONCTION DU WIDGET.

});

On n’oublie pas de retourner le widget avant de refermer définitivement l’accolade et la parenthèse qui embrassent (c’est bô <3!) le widget:

    return $.mage.nomDuWidget;
});

1 2	return $.mage.nomDuWidget; });

Version finale (également disponible dans le ZIP):

define([
    'jquery',
    'jquery-ui-modules/widget',
    'Magento_ConfigurableProduct/js/configurable',
    'slick'
], function($, configurable) {
    'use strict';

    let ATTRIBUTE_SELECTOR_ELEMENT_ID, // Peut être un ID de <select> ou de <ul> (carousel)
        SELECTED_OPTION_INDEX; // Index de l'option sélectionnée par l'utilisateur dans un <select> ou un <ul> (carousel)

    $.widget('mage.attributeCarousel', {
        options: {
            attributeSelectorId: '[id^="attribute"]',
            slick: {
                infinite: false,
                slidesToShow: 3,
                slidesToScroll: 3,
                prevArrow: '<button type="button" class="clear slick-prev"><svg viewBox="0 0 100 100" class="icon icon-arrow-back-chevron"><use xlink:href="#icon-arrow-back-chevron"></use></svg></button>',
                nextArrow: '<button type="button" class="clear slick-next"><svg viewBox="0 0 100 100" class="icon icon-arrow-forward-chevron"><use xlink:href="#icon-arrow-forward-chevron"></use></svg></button>'
            }
        },

        _create: function () {
            const $_THIS = $(this.options.attributeSelectorId),
                  that = this;

            // 1. On clone le <select>
            // 2. On le transforme en <ul>/<li>
            // 3. On initialise le carousel sur le markup du <select> cloné et transformé en <ul>/<li>
            // 4. On injecte le carousel dans le DOM
            that.appendCarouselToDOM($_THIS, that.ulToCarousel(that.clonedSelectToUl(that.cloneSelect($_THIS))));

            // Lorsqu'on change la valeur d'un attribut produit depuis le carousel
            $('.slick-slide').on('click', function () {
                const $_THIS = $(this);

                // Mise à jour de:
                ATTRIBUTE_SELECTOR_ELEMENT_ID = $_THIS.closest('ul').attr('id');
                SELECTED_OPTION_INDEX = $_THIS.attr('data-slick-index');

                that.synchronizeCarouselWithSelect(ATTRIBUTE_SELECTOR_ELEMENT_ID, SELECTED_OPTION_INDEX);
                that.handleCarouselSelectedOptionClass(ATTRIBUTE_SELECTOR_ELEMENT_ID, SELECTED_OPTION_INDEX);
            });

            // Lorsqu'on change la valeur d'un attribut produit depuis le select
            $_THIS.on('change', function () {

                // Mise à jour de:
                ATTRIBUTE_SELECTOR_ELEMENT_ID = $_THIS.attr('id');
                SELECTED_OPTION_INDEX = $_THIS.prop('selectedIndex');

                that.synchronizeSelectWithCarousel(ATTRIBUTE_SELECTOR_ELEMENT_ID, SELECTED_OPTION_INDEX);
                that.handleCarouselSelectedOptionClass(ATTRIBUTE_SELECTOR_ELEMENT_ID, SELECTED_OPTION_INDEX);
            });
        },

        // 1. On clone le <select>, sous conditions...
        cloneSelect: function(thisObj) {
            const $_THIS = thisObj,
                  $_THIS_ID = $_THIS.attr('id');

            // Vérifier si le select est [disabled] ou si il a déjà été cloné
            // [TODO_DEV] Rajouter une condition qui vérifie si les options du select affichent des images. Si false, on ne créera pas de carousel pour ce champ.
            if ($_THIS.attr('disabled') || $('ul#' + $_THIS_ID).length) {
                // Si l'un des deux cas est true, on ne fait rien
                return false;
            } else {
                // Sinon
                return $_THIS.clone().prop('id', $_THIS_ID);
            }
        },

        // 2. On transforme le <select> cloné en <ul>/<li>
        clonedSelectToUl: function(clonedSelect) {
            const $_CLONED_SELECT = $(clonedSelect);

            return  $_CLONED_SELECT.find("option").map(function() {
                const $_THIS = $(this);
                return $("<li>").attr("value", $_THIS.attr("value")).text($_THIS.text()).get();
            }).appendTo($("<ul>").attr({
                id: $_CLONED_SELECT.attr("id"),
                name: $_CLONED_SELECT.attr("name")
            })).parent().replaceAll($_CLONED_SELECT);
        },

        // 3. On initialise le carousel (slick) sur le markup du <select> cloné et transformé en <ul>/<li>
        ulToCarousel: function(clonedSelectToUl) {
            return clonedSelectToUl.slick({
                infinite: this.options.slick.infinite,
                slidesToShow: this.options.slick.slidesToShow,
                slidesToScroll: this.options.slick.slidesToScroll,
                prevArrow: this.options.slick.prevArrow,
                nextArrow: this.options.slick.nextArrow
            });
        },

        // 4. On injecte le carousel dans le DOM
        appendCarouselToDOM: function(thisObj, carouselElement) {
            return carouselElement.insertBefore(thisObj);
        },

        // On gère la classe CSS sur l'option sélectionnée par l'utilisateur dans le carousel
        handleCarouselSelectedOptionClass: function(relatedElementID, selectedOptionIndex) {
            $('ul#' + relatedElementID).find('.is-selected-option').removeClass('is-selected-option');
            $('[data-slick-index="' + selectedOptionIndex + '"]', 'ul#' + relatedElementID).addClass('is-selected-option');
        },

        // Synchronization slick>select (select2 se gère tout seul)
        synchronizeCarouselWithSelect: function(relatedElementID, selectedOptionIndex) {
            const SELECTED_OPTION_VALUE = $('option', 'select#' + relatedElementID).eq(selectedOptionIndex).attr('value');
            $('select#' + relatedElementID).val(SELECTED_OPTION_VALUE).trigger('change');
        },

        // synchronization select>slick (select2 se gère toujours encore tout seul :))
        synchronizeSelectWithCarousel: function(relatedElementID, selectedOptionIndex) {
            $('ul#' + relatedElementID).slick('slickGoTo', parseInt(selectedOptionIndex));

            // https://github.com/kenwheeler/slick/issues/235#issuecomment-43406956
            $(window).trigger('resize');
        }
    });

    return $.mage.attributeCarousel;
});
// https://www.siphor.com/different-ways-using-javascript-magento-2/
// https://jason.codes/2019/06/magento-2-create-jquery-ui-widget/

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

define([

'jquery',

'jquery-ui-modules/widget',

'Magento_ConfigurableProduct/js/configurable',

'slick'

], function($, configurable) {

'use strict';

let ATTRIBUTE_SELECTOR_ELEMENT_ID, // Peut être un ID de <select> ou de <ul> (carousel)

SELECTED_OPTION_INDEX; // Index de l'option sélectionnée par l'utilisateur dans un <select> ou un <ul> (carousel)

$.widget('mage.attributeCarousel', {

options: {

attributeSelectorId: '[id^="attribute"]',

slick: {

infinite: false,

slidesToShow: 3,

slidesToScroll: 3,

prevArrow: '<button type="button" class="clear slick-prev"><svg viewBox="0 0 100 100" class="icon icon-arrow-back-chevron"><use xlink:href="#icon-arrow-back-chevron"></use></svg></button>',

nextArrow: '<button type="button" class="clear slick-next"><svg viewBox="0 0 100 100" class="icon icon-arrow-forward-chevron"><use xlink:href="#icon-arrow-forward-chevron"></use></svg></button>'

}

_create: function () {

const $_THIS = $(this.options.attributeSelectorId),

that = this;

// 1. On clone le <select>

// 2. On le transforme en <ul>/<li>

// 3. On initialise le carousel sur le markup du <select> cloné et transformé en <ul>/<li>

// 4. On injecte le carousel dans le DOM

that.appendCarouselToDOM($_THIS, that.ulToCarousel(that.clonedSelectToUl(that.cloneSelect($_THIS))));

// Lorsqu'on change la valeur d'un attribut produit depuis le carousel

$('.slick-slide').on('click', function () {

const $_THIS = $(this);

// Mise à jour de:

ATTRIBUTE_SELECTOR_ELEMENT_ID = $_THIS.closest('ul').attr('id');

SELECTED_OPTION_INDEX = $_THIS.attr('data-slick-index');

that.synchronizeCarouselWithSelect(ATTRIBUTE_SELECTOR_ELEMENT_ID, SELECTED_OPTION_INDEX);

that.handleCarouselSelectedOptionClass(ATTRIBUTE_SELECTOR_ELEMENT_ID, SELECTED_OPTION_INDEX);

});

// Lorsqu'on change la valeur d'un attribut produit depuis le select

$_THIS.on('change', function () {

// Mise à jour de:

ATTRIBUTE_SELECTOR_ELEMENT_ID = $_THIS.attr('id');

SELECTED_OPTION_INDEX = $_THIS.prop('selectedIndex');

that.synchronizeSelectWithCarousel(ATTRIBUTE_SELECTOR_ELEMENT_ID, SELECTED_OPTION_INDEX);

that.handleCarouselSelectedOptionClass(ATTRIBUTE_SELECTOR_ELEMENT_ID, SELECTED_OPTION_INDEX);

});

// 1. On clone le <select>, sous conditions...

cloneSelect: function(thisObj) {

const $_THIS = thisObj,

$_THIS_ID = $_THIS.attr('id');

// Vérifier si le select est [disabled] ou si il a déjà été cloné

// [TODO_DEV] Rajouter une condition qui vérifie si les options du select affichent des images. Si false, on ne créera pas de carousel pour ce champ.

if ($_THIS.attr('disabled') || $('ul#' + $_THIS_ID).length) {

// Si l'un des deux cas est true, on ne fait rien

return false;

} else {

// Sinon

return $_THIS.clone().prop('id', $_THIS_ID);

}

// 2. On transforme le <select> cloné en <ul>/<li>

clonedSelectToUl: function(clonedSelect) {

const $_CLONED_SELECT = $(clonedSelect);

return $_CLONED_SELECT.find("option").map(function() {

const $_THIS = $(this);

return $("<li>").attr("value", $_THIS.attr("value")).text($_THIS.text()).get();

}).appendTo($("<ul>").attr({

id: $_CLONED_SELECT.attr("id"),

name: $_CLONED_SELECT.attr("name")

})).parent().replaceAll($_CLONED_SELECT);

// 3. On initialise le carousel (slick) sur le markup du <select> cloné et transformé en <ul>/<li>

ulToCarousel: function(clonedSelectToUl) {

return clonedSelectToUl.slick({

infinite: this.options.slick.infinite,

slidesToShow: this.options.slick.slidesToShow,

slidesToScroll: this.options.slick.slidesToScroll,

prevArrow: this.options.slick.prevArrow,

nextArrow: this.options.slick.nextArrow

});

// 4. On injecte le carousel dans le DOM

appendCarouselToDOM: function(thisObj, carouselElement) {

return carouselElement.insertBefore(thisObj);

// On gère la classe CSS sur l'option sélectionnée par l'utilisateur dans le carousel

handleCarouselSelectedOptionClass: function(relatedElementID, selectedOptionIndex) {

$('ul#' + relatedElementID).find('.is-selected-option').removeClass('is-selected-option');

$('[data-slick-index="' + selectedOptionIndex + '"]', 'ul#' + relatedElementID).addClass('is-selected-option');

// Synchronization slick>select (select2 se gère tout seul)

synchronizeCarouselWithSelect: function(relatedElementID, selectedOptionIndex) {

const SELECTED_OPTION_VALUE = $('option', 'select#' + relatedElementID).eq(selectedOptionIndex).attr('value');

$('select#' + relatedElementID).val(SELECTED_OPTION_VALUE).trigger('change');

// synchronization select>slick (select2 se gère toujours encore tout seul :))

synchronizeSelectWithCarousel: function(relatedElementID, selectedOptionIndex) {

$('ul#' + relatedElementID).slick('slickGoTo', parseInt(selectedOptionIndex));

// https://github.com/kenwheeler/slick/issues/235#issuecomment-43406956

$(window).trigger('resize');

}

});

return $.mage.attributeCarousel;

});

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

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

Déclaration de notre widget jQuery UI via RequireJS

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

var config = {

    map: {
        "*": {
            attributeCarousel: 'js/attribute-carousel'
        }
    },

    // Paths defines associations from library name (used to include the library,
    // for example when using "define") and the library file path.
    paths: {
        'slick': 'js/vendor/slick/slick.min'
    },

    // Shim: when you're loading your dependencies, requirejs loads them all
    // concurrently. You need to set up a shim to tell requirejs that the library
    // (e.g. a jQuery plugin) depends on another already being loaded (e.g. depends
    // on jQuery).
    shim: {
        'slick': {
            deps: ['jquery']
        }
    }
};

var config = {

map: {

"*": {

attributeCarousel: 'js/attribute-carousel'

}

// Paths defines associations from library name (used to include the library,

// for example when using "define") and the library file path.

paths: {

'slick': 'js/vendor/slick/slick.min'

// Shim: when you're loading your dependencies, requirejs loads them all

// concurrently. You need to set up a shim to tell requirejs that the library

// (e.g. a jQuery plugin) depends on another already being loaded (e.g. depends

// on jQuery).

shim: {

'slick': {

deps: ['jquery']

}

};

Utilisation du widget dans un template PHTML de Magento 2

<script type="text/x-magento-init">
    {
        "#product_addtocart_form": {
            "attributeCarousel": {
                "attributeSelectorId": "#attribute76",
                "slick": {
                    "slidesToShow": 4,
                    "slidesToScroll": 4
                }
            }
        }
    }
</script>

{

"#product_addtocart_form": {

"attributeCarousel": {

"attributeSelectorId": "#attribute76",

"slick": {

"slidesToShow": 4,

"slidesToScroll": 4

}

</script>

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

26/02/2021 / admin

Testé fonctionnel Magento 2.4!

Nous souhaitons que la navigation du compte soit visible depuis n’importe quelle page du site, et pas uniquement dans les pages du compte client (à condition d’être connecté à un compte, bien-sûr ;)).

Attention: déplacer la navigation du compte client sur toutes les pages d’une boutique Magento 2 va demander à fournir des efforts d’adaptation côté code XML, mais également au minimum côté LESS et PHTML, voire un peu de JS pour obtenir un affichage optimal (selon l’UI attendue). Ce billet va se concentrer uniquement sur la manière de faire côté layout XML, seule ré-exploitable en l’état d’un projet à l’autre.
Attention #2: cette manipulation demande un minimum de connaissances et de conpréhension des concepts de base des layouts dans Magento 2, donc si ce n’est pas acquis ou fait, documentez-vous au préalable.

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

Nous déplaçons une zone de l’interface utilisateur de la manière la plus propre en regard des bonnes pratiques Magento 2.
Nous allons de ce fait profiter des fonctionnalités d’héritage et d’extension natives offertes par Magento 2.
Lorsqu’un élément de ce menu sera ajouté ultérieurement (toujours selon les bonnes pratiques Magento 2) par vous ou un autre développeur (via l’installation d’un module tiers par exemple, ou le développemnt d’un module custom), celui-ci sera mis à jour automatiquement sans nécessiter une quelconque intervention de notre part.
Idem si un élément est à supprimer de ce menu ou si un module tiers est désactivé ou désinstallé: le menu sera mis à jour sans notre intervention.

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

Le <block [...] name="sidebar.main.account_nav" [...] /> qui initie l’affichage du menu du compte client est, out-of-the-box, déclaré dans la pile des layout XML dans le fichier /vendor/magento/module-customer/view/frontend/layout/customer_account.xml. Le code complet, qui contient uniquement les entrées liées au module Customer, est le suivant:

<block class="Magento\Framework\View\Element\Template" name="sidebar.main.account_nav" template="Magento_Theme::html/collapsible.phtml" before="-">
    <arguments>
        <argument name="block_css" xsi:type="string">account-nav</argument>
    </arguments>
    <block class="Magento\Customer\Block\Account\Navigation" name="customer_account_navigation" before="-">
        <arguments>
            <argument name="css_class" xsi:type="string">nav items</argument>
        </arguments>
        <block class="Magento\Customer\Block\Account\SortLinkInterface" name="customer-account-navigation-account-link">
            <arguments>
                <argument name="label" xsi:type="string" translate="true">My Account</argument>
                <argument name="path" xsi:type="string">customer/account</argument>
                <argument name="sortOrder" xsi:type="number">250</argument>
            </arguments>
        </block>
        <block class="Magento\Customer\Block\Account\Delimiter" name="customer-account-navigation-delimiter-1" template="Magento_Customer::account/navigation-delimiter.phtml">
            <arguments>
                <argument name="sortOrder" xsi:type="number">200</argument>
            </arguments>
        </block>
        <block class="Magento\Customer\Block\Account\SortLinkInterface" name="customer-account-navigation-address-link">
            <arguments>
                <argument name="label" xsi:type="string" translate="true">Address Book</argument>
                <argument name="path" xsi:type="string">customer/address</argument>
                <argument name="sortOrder" xsi:type="number">190</argument>
            </arguments>
        </block>
        <block class="Magento\Customer\Block\Account\SortLinkInterface" name="customer-account-navigation-account-edit-link">
            <arguments>
                <argument name="label" xsi:type="string" translate="true">Account Information</argument>
                <argument name="path" xsi:type="string">customer/account/edit</argument>
                <argument name="sortOrder" xsi:type="number">180</argument>
            </arguments>
        </block>
        <block class="Magento\Customer\Block\Account\Delimiter" name="customer-account-navigation-delimiter-2" template="Magento_Customer::account/navigation-delimiter.phtml">
            <arguments>
                <argument name="sortOrder" xsi:type="number">130</argument>
            </arguments>
        </block>
    </block>
</block>

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

</arguments>

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

</arguments>

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

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

</arguments>

</block>

</arguments>

</block>

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

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

</arguments>

</block>

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

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

</arguments>

</block>

</arguments>

</block>

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

Pour rappel: nous souhaitons que la navigation du compte soit visible depuis n’importe quelle page du site, et pas uniquement dans les pages du compte client.

Nous allons pour ce faire déplacer la déclaration du block sidebar.main.account_nav à la hauteur de notre thème.

Dans votre thème (et si il n’existe pas déjà), créer le fichier app/design/frontend/MyVendor/mytheme/Magento_Theme/layout/default.xml et copiez/collez-y l’intégralité du block sidebar.main.account_nav. Dans l’exemple ci-dessous, je l’ai affecté au container after.body.start, mais vous pouvez l’affecter à un autre container, y-compris un container custom que vous auriez créer vous-même pour les besoins spécifiques à votre mise en page.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="after.body.start">

            <!-- navigation du compte client -->
            <block class="Magento\Framework\View\Element\Template" name="sidebar.main.account_nav" template="Magento_Theme::html/collapsible.phtml" before="-">
                <arguments>
                    <argument name="block_css" xsi:type="string">account-nav</argument>
                </arguments>
                <block class="Magento\Customer\Block\Account\Navigation" name="customer_account_navigation" before="-">
                    <arguments>
                        <argument name="css_class" xsi:type="string">nav items</argument>
                    </arguments>
                    <block class="Magento\Customer\Block\Account\SortLinkInterface" name="customer-account-navigation-account-link">
                        <arguments>
                            <argument name="label" xsi:type="string" translate="true">My Account</argument>
                            <argument name="path" xsi:type="string">customer/account</argument>
                            <argument name="sortOrder" xsi:type="number">250</argument>
                        </arguments>
                    </block>
                    <block class="Magento\Customer\Block\Account\Delimiter" name="customer-account-navigation-delimiter-1" template="Magento_Customer::account/navigation-delimiter.phtml">
                        <arguments>
                            <argument name="sortOrder" xsi:type="number">200</argument>
                        </arguments>
                    </block>
                    <block class="Magento\Customer\Block\Account\SortLinkInterface" name="customer-account-navigation-address-link">
                        <arguments>
                            <argument name="label" xsi:type="string" translate="true">Address Book</argument>
                            <argument name="path" xsi:type="string">customer/address</argument>
                            <argument name="sortOrder" xsi:type="number">190</argument>
                        </arguments>
                    </block>
                    <block class="Magento\Customer\Block\Account\SortLinkInterface" name="customer-account-navigation-account-edit-link">
                        <arguments>
                            <argument name="label" xsi:type="string" translate="true">Account Information</argument>
                            <argument name="path" xsi:type="string">customer/account/edit</argument>
                            <argument name="sortOrder" xsi:type="number">180</argument>
                        </arguments>
                    </block>
                    <block class="Magento\Customer\Block\Account\Delimiter" name="customer-account-navigation-delimiter-2" template="Magento_Customer::account/navigation-delimiter.phtml">
                        <arguments>
                            <argument name="sortOrder" xsi:type="number">130</argument>
                        </arguments>
                    </block>
                </block>
            </block>
            <!-- fin: navigation du compte client -->

        </referenceContainer>
    </body>
</page>

<?xml version="1.0"?>

<body>

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

</arguments>

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

</arguments>

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

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

</arguments>

</block>

</arguments>

</block>

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

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

</arguments>

</block>

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

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

</arguments>

</block>

</arguments>

</block>

</referenceContainer>

</body>

</page>

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

Attention: si on compile nos XMLs en l’état, nous allons avoir un conflit entre le layout du module Customer du core de Magento 2 et le layout default.xml de notre thème, car <block class="Magento\Framework\View\Element\Template" name="sidebar.main.account_nav" est déclaré deux fois!

Dans votre thème (et si il n’existe pas déjà), créer le fichier app/design/frontend/MyVendor/mytheme/Magento_Customer/layout/customer_account.xml et y placer le code suivant:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd" label="Customer My Account (All Pages)" design_abstraction="custom">
    <head>
        <title>My Account</title>
    </head>
    <body>
        <attribute name="class" value="account"/>

        <move element="sidebar.main.account_nav" destination="sidebar.main" after="-" />

        <referenceContainer name="sidebar.main"></referenceContainer>
    </body>
</page>

<?xml version="1.0"?>

<head>

<title>My Account</title>

</head>

<body>

</body>

</page>

Ici, le <move element="sidebar.main.account_nav" destination="sidebar.main" after="-" /> permet d’indiquer à Magento 2 que la déclaration initiale du block sidebar.main.account_nav" a été déplacée du module Customer du core au module Theme de notre thème.

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

magerun2 cache:clean layout

1	magerun2 cache:clean layout

Conclusion

Le menu du compte devrait désormais (et à condition d’être connecté à un compte client) s’afficher dans n’importe quelle page de votre site, à l’endroit indiqué dans le layout XML default.xml de votre thème.

Comme indiqué en début de billet, l’affichage est probablement plus qu’àpproximatif et c’est à vous de jouer côté LESS, PHTML et JS pour adapter tout ça 🙂

[SEO] Obfuscation des liens pour le maillage interne

26/02/2021 / admin

Article ayant servi de source à ce billet: Comment faire de l’obfuscation de liens pour votre maillage interne ? et version PDF – 410-gone.fr-Comment faire de lobfuscation de liens pour votre maillage interne.

// Source/doc: https://www.410-gone.fr/seo/optimisation-on-site/maillage-interne/cocon-semantique/obfuscation.html

// HTML pour les liens à obfusquer (les URLs doivent être encodées en base-64):
// <span class="qcd" data-qcd="aHR0cHM6Ly93d3cuNDEwLWdvbmUuZnIvYS1wcm9wb3MuaHRtbA==">
//     mentions légales
// </span>

// Encodage en base-64 en PHP:
// https://www.php.net/manual/en/function.base64-encode.php

document.addEventListener("DOMContentLoaded", function(event) {
    var classname = document.getElementsByClassName("qcd");
    for (var i = 0; i < classname.length; i++) {
        //click gauche
        classname[i].addEventListener('click', myFunction, false);
        //click droit
        classname[i].addEventListener('contextmenu', myRightFunction, false);
    }
});

//fonction du click gauche
var myFunction = function(event) {
    var attribute = this.getAttribute("data-qcd");
    if(event.ctrlKey) {
        var newWindow = window.open(decodeURIComponent(window.atob(attribute)), '_blank');
        newWindow.focus();
    } else {
        document.location.href= decodeURIComponent(window.atob(attribute));
    }
};

//fonction du click droit
var myRightFunction = function(event) {
    var attribute = this.getAttribute("data-qcd");
    if(event.ctrlKey) {
        var newWindow = window.open(decodeURIComponent(window.atob(attribute)), '_blank');
        newWindow.focus();
    } else {
        window.open(decodeURIComponent(window.atob(attribute)),'_blank');
    }
}

// Source/doc: https://www.410-gone.fr/seo/optimisation-on-site/maillage-interne/cocon-semantique/obfuscation.html

// HTML pour les liens à obfusquer (les URLs doivent être encodées en base-64):

// <span class="qcd" data-qcd="aHR0cHM6Ly93d3cuNDEwLWdvbmUuZnIvYS1wcm9wb3MuaHRtbA==">

// mentions légales

// </span>

// Encodage en base-64 en PHP:

// https://www.php.net/manual/en/function.base64-encode.php

document.addEventListener("DOMContentLoaded", function(event) {

var classname = document.getElementsByClassName("qcd");

for (var i = 0; i < classname.length; i++) {

//click gauche

classname[i].addEventListener('click', myFunction, false);

//click droit

classname[i].addEventListener('contextmenu', myRightFunction, false);

}

});

//fonction du click gauche

var myFunction = function(event) {

var attribute = this.getAttribute("data-qcd");

if(event.ctrlKey) {

var newWindow = window.open(decodeURIComponent(window.atob(attribute)), '_blank');

newWindow.focus();

} else {

document.location.href= decodeURIComponent(window.atob(attribute));

}

};

//fonction du click droit

var myRightFunction = function(event) {

var attribute = this.getAttribute("data-qcd");

if(event.ctrlKey) {

var newWindow = window.open(decodeURIComponent(window.atob(attribute)), '_blank');

newWindow.focus();

} else {

window.open(decodeURIComponent(window.atob(attribute)),'_blank');

}

[Magento 2] Les bases et patterns de l’utilisation de javascript (AMD, requireJS, widget jQuery, plugin, module, x-magento-init, etc…)

26/02/2021 / admin

Intégrer et exploiter dans Magento 2 un plugin jQuery tiers dont le code source est structuré selon le pattern AMD

Pour illustrer cette partie, nous allons intégrer dans Magento 2 le plugin jQuery Slick Carousel, dont le code source est structuré selon le pattern AMD.

Remarque: l’intégration du plugin jQuery tiers va se faire dans un thème. Si vous comptez utiliser le plugin en question sur un projet multi-sites/multi-thèmes ou sur plusieurs projets, une meilleure stratégie consisterait à intégrer ce premier dans un nouveau module MyVendor_Slick qu’on placerait dans app/code/MyVendor/Slick.
Cette démarche n’est pas décrite ici, mais mériterait d’être envisagée en fonction de vos besoins.

Récupération du plugin sous Git et copie dans l’arborescence du thème

Récupérer la source minifiée du plugin Slick sous Git (tag v1.8.1 dans mon exemple, mais vous pouvez vérifier si il existe un tag plus récent) et copier-coller le fichier dans votre thème, au chemin suivant: app/design/frontend/MyVendor/mytheme/web/js/vendor/slick/slick.min.js.

Déclaration du plugin en tant que module via RequireJS

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

var config = {
    // Paths defines associations from library name (used to include the library,
    // for example when using "define") and the library file path.
    paths: {
        'slick': 'js/vendor/slick/slick.min
    },

    // Shim: when you're loading your dependencies, requirejs loads them all
    // concurrently. You need to set up a shim to tell requirejs that the library
    // (e.g. a jQuery plugin) depends on another already being loaded (e.g. depends
    // on jQuery).
    shim: {
        'slick': {
            deps: ['jquery']
        }
    }
};

var config = {

// Paths defines associations from library name (used to include the library,

// for example when using "define") and the library file path.

paths: {

'slick': 'js/vendor/slick/slick.min

// Shim: when you're loading your dependencies, requirejs loads them all

// concurrently. You need to set up a shim to tell requirejs that the library

// (e.g. a jQuery plugin) depends on another already being loaded (e.g. depends

// on jQuery).

shim: {

'slick': {

deps: ['jquery']

}

};

Création d’un fichier d’initialisation d’une instance du plugin

Dans votre thème, créer le fichier app/design/frontend/MyVendor/mytheme/web/js/init-slick.js qui va servir à appeller et à initialiser une instance du plugin javascript Slick et vous donnera accès à toutes les options de l’API originale:

define(['jquery','slick'], function($)
{
    return function(config, element)
    {
        $(element).slick(config);
    };
});

define(['jquery','slick'], function($)

{

return function(config, element)

{

$(element).slick(config);

};

});

Petite subtilité: ajouter une configuration spécifique par défaut à toutes les instances de votre plugin

Dans l’exemple ci-dessous, le fichier app/design/frontend/MyVendor/mytheme/web/js/init-slick.js est agrémenté d’un objet defaults qui surcharge (via les settings proposés de base par le plugin Slick Carousel prevArrow et nextArrow) l’aspect graphique des chevrons « slide précédent/slide suivant ».

L’intérêt d’ajouter une configuration spécifique par défaut à toutes les instances de votre plugin réside, pour l’exemple du Carousel, dans le fait qui si la charte graphique de votre projet prévoit les mêmes chevrons spés pour tous les sliders du site, vous allez pouvoir tous les initialiser sans avoir besoin de re-préciser à chaque fois que vous voulez surcharger les pictos fournis de base par ceux de votre charte.

Vous pouvez, bien entendu, les re-surcharger et utiliser d’autres options du plugin à la demande pour chaque nouveau Carousel que vous allez mettre en place.

define(['jquery','slick'], function($)
{
    return function(config, element)
    {
        let defaults = {
            prevArrow: '<button type="button" class="btn-round slick-prev"><svg viewBox="0 0 100 100" class="icon icon-arrow-back-chevron"><use xlink:href="#icon-arrow-back-chevron"></use></svg></button>',
            nextArrow: '<button type="button" class="btn-round slick-next"><svg viewBox="0 0 100 100" class="icon icon-arrow-forward-chevron"><use xlink:href="#icon-arrow-forward-chevron"></use></svg></button>'
        };

        $(element).slick($.extend(defaults, config));
    };
});

define(['jquery','slick'], function($)

{

return function(config, element)

{

let defaults = {

prevArrow: '<button type="button" class="btn-round slick-prev"><svg viewBox="0 0 100 100" class="icon icon-arrow-back-chevron"><use xlink:href="#icon-arrow-back-chevron"></use></svg></button>',

nextArrow: '<button type="button" class="btn-round slick-next"><svg viewBox="0 0 100 100" class="icon icon-arrow-forward-chevron"><use xlink:href="#icon-arrow-forward-chevron"></use></svg></button>'

};

$(element).slick($.extend(defaults, config));

};

});

Appeler et initialiser une instance du plugin sur un élément du DOM

Cette page de la documentation officielle vous expliquera comment appeler et initialiser une instance du plugin sur un élément du DOM dans Magento 2.

Elle aborde notamment la manière de procéder depuis un fichier template PHTML, depuis un fichier JS et comment exécuter data-amge-init et x-magento-init dans un cas où le DOM se met à jour dynamiquement.

Dans ce billet, je vais me contenter d’illustrer un exemple de notation déclarative avec x-magento-init depuis un fichier PHTML.

Exemple de notation déclarative avec `x-magento-init` depuis un fichier PHTML

Ici, j’initialise simplement mon module Slick sur l’élément du DOM qui porte l’ID home-slider. Le carousel va s’afficher soit avec les options de base fournies par le plugin Slick, soit avec les options de base fournies par le plugin Slick ET des pictos chevrons surchargés par ma configuration par défaut si j’en ai défini une.

<div id="home-slider">
    <div><a href="#">Slide one</a></div>
    <div><a href="#">Slide two</a></div>
    <div><a href="#">Slide three</a></div>
    <div><a href="#">Slide four</a></div>
    <div><a href="#">Slide five</a></div>
    <div><a href="#">Slide six</a></div>
</div>

<script type="text/x-magento-init">
    {
        "#home-slider": {
            "js/init-slick": {}
        }
    }
</script>

<div><a href="#">Slide one</a></div>

<div><a href="#">Slide two</a></div>

<div><a href="#">Slide three</a></div>

<div><a href="#">Slide four</a></div>

<div><a href="#">Slide five</a></div>

<div><a href="#">Slide six</a></div>

</div>

{

"#home-slider": {

"js/init-slick": {}

}

</script>

Même exemple avec ajout d’options

Ici, je choisis de paramétrer mon carousel afin qu’il affiche 4 slides à la fois et qu’on scrolle d’une slide à chaque fois qu’on active les boutons prev/next ou tout autre mode de navigation fourni par le plugin. Les options slidesToShow et slidesToScroll sont fournies par le plugin Slick et exploitables immédiatement grâce à la magie d’AMD, de RequireJs et de Magento.

<script type="text/x-magento-init">
    {
        "#home-slider": {
            "js/init-slick": {
                "slidesToShow": "4", // # of slides to show at a time
                "slidesToScroll": "1" // # of slides to scroll at a time
            }
        }
    }
</script>

{

"#home-slider": {

"js/init-slick": {

"slidesToShow": "4", // # of slides to show at a time

"slidesToScroll": "1" // # of slides to scroll at a time

}

</script>

Ressources en ligne:

Un excellent pense-bête sur l’intégration de code javascript dans Magento 2. Tout y est parfaitement structuré, clair, concis et illustré: initialisation imperative/declaration, plain modules, jQuery UI Widgets (add new method, override existing method, create new widget), UI components, etc… Version PDF pour la postérité – jason.codes-Magento 2 JavaScript CheatSheet. Voir aussi, les sous-articles connexes:

[jQuery] Performances: comment utiliser de multiples éléments mis en cache?

05/02/2021 / admin

Source: jQuery, how to use multiple cached elements

  const $_CATEGORY_ICON_MEGAMENU_SECONDARY = $('#megaMenuSecondaryCategoryIcon'),
        $_CATEGORY_LABEL_MEGAMENU_SECONDARY = $('#megaMenuSecondaryCategoryLabel'),
        $_CATEGORY_LINK_MEGAMENU_SECONDARY = $('#megaMenuSecondaryCategoryLink'),
        $_CATEGORY_NAV_MEGAMENU_SECONDARY = $('#megaMenuSecondaryCategoryNav'),
        $_CATEGORY_IMAGE_MEGAMENU_SECONDARY = $('#megaMenuSecondaryCategoryImage');

const $_CATEGORY_ICON_MEGAMENU_SECONDARY = $('#megaMenuSecondaryCategoryIcon'),

$_CATEGORY_LABEL_MEGAMENU_SECONDARY = $('#megaMenuSecondaryCategoryLabel'),

$_CATEGORY_LINK_MEGAMENU_SECONDARY = $('#megaMenuSecondaryCategoryLink'),

$_CATEGORY_NAV_MEGAMENU_SECONDARY = $('#megaMenuSecondaryCategoryNav'),

$_CATEGORY_IMAGE_MEGAMENU_SECONDARY = $('#megaMenuSecondaryCategoryImage');

        console.time('emptyThings');
        $_CATEGORY_ICON_MEGAMENU_SECONDARY.empty();
        $_CATEGORY_LABEL_MEGAMENU_SECONDARY.empty();
        $_CATEGORY_LINK_MEGAMENU_SECONDARY.empty();
        $_CATEGORY_NAV_MEGAMENU_SECONDARY.empty();
        $_CATEGORY_IMAGE_MEGAMENU_SECONDARY.empty();
        console.timeEnd('emptyThings');

console.time('emptyThings');

$_CATEGORY_ICON_MEGAMENU_SECONDARY.empty();

$_CATEGORY_LABEL_MEGAMENU_SECONDARY.empty();

$_CATEGORY_LINK_MEGAMENU_SECONDARY.empty();

$_CATEGORY_NAV_MEGAMENU_SECONDARY.empty();

$_CATEGORY_IMAGE_MEGAMENU_SECONDARY.empty();

console.timeEnd('emptyThings');

emptyThings: 1.92041015625 ms
megamenu.js:127 emptyThings: 4.44091796875 ms
megamenu.js:127 emptyThings: 1.739990234375 ms
megamenu.js:127 emptyThings: 2.5419921875 ms
megamenu.js:127 emptyThings: 1.958740234375 ms
megamenu.js:127 emptyThings: 2.581787109375 ms
megamenu.js:127 emptyThings: 2.59912109375 ms
megamenu.js:127 emptyThings: 2.1240234375 ms
megamenu.js:127 emptyThings: 3.0361328125 ms
megamenu.js:127 emptyThings: 3.2548828125 ms

        console.time('emptyThings');
        $([$_CATEGORY_ICON_MEGAMENU_SECONDARY[0], $_CATEGORY_LABEL_MEGAMENU_SECONDARY[0], $_CATEGORY_LINK_MEGAMENU_SECONDARY[0], $_CATEGORY_NAV_MEGAMENU_SECONDARY[0], $_CATEGORY_IMAGE_MEGAMENU_SECONDARY[0]]).empty();
        console.timeEnd('emptyThings');

console.time('emptyThings');

$([$_CATEGORY_ICON_MEGAMENU_SECONDARY[0], $_CATEGORY_LABEL_MEGAMENU_SECONDARY[0], $_CATEGORY_LINK_MEGAMENU_SECONDARY[0], $_CATEGORY_NAV_MEGAMENU_SECONDARY[0], $_CATEGORY_IMAGE_MEGAMENU_SECONDARY[0]]).empty();

console.timeEnd('emptyThings');

emptyThings: 1.552001953125 ms
megamenu.js:131 emptyThings: 4.814697265625 ms
megamenu.js:131 emptyThings: 2.326904296875 ms
megamenu.js:131 emptyThings: 2.762939453125 ms
megamenu.js:131 emptyThings: 3.281982421875 ms
megamenu.js:131 emptyThings: 1.970947265625 ms
megamenu.js:131 emptyThings: 2.184814453125 ms
megamenu.js:131 emptyThings: 3.62109375 ms
megamenu.js:131 emptyThings: 3.26123046875 ms
megamenu.js:131 emptyThings: 3.065673828125 ms

[Magento 2] Afficher le formulaire de connexion client dans n’importe quel template PHTML

29/01/2021 / admin

Testé fonctionnel Magento 2.4 CE. Source: Magento 2: Call customer login page in other phtml.

<?php echo $this->getLayout()->createBlock("Magento\Customer\Block\Form\Login")->setTemplate("Magento_Customer::form/login.phtml")->toHtml();?>
<?php echo $this->getLayout()->createBlock("Magento\Customer\Block\Form\Login\Info")->setTemplate("Magento_Customer::newcustomer.phtml")->toHtml(); ?>

1 2	<?php echo $this->getLayout()->createBlock("Magento\Customer\Block\Form\Login")->setTemplate("Magento_Customer::form/login.phtml")->toHtml();?> <?php echo $this->getLayout()->createBlock("Magento\Customer\Block\Form\Login\Info")->setTemplate("Magento_Customer::newcustomer.phtml")->toHtml(); ?>

[Magento 2] Utiliser Knockout JS pour ajouter un message dans le minicart lorsque ce dernier est vide

29/01/2021 / admin

Dans le fichier de surcharge app/design/frontend///Magento_Checkout/web/template/minicart/content.html, immédiatement sous la condition:

<if args="getCartParam('cart_empty_message')">
    <p class="minicart empty text" text="getCartParam('cart_empty_message')"/>
    <div class="actions">
        <div class="secondary">
            <a class="action viewcart" data-bind="attr: {href: shoppingCartUrl}">
                <span translate="'View and Edit Cart'"/>
            </a>
        </div>
    </div>
</if>

</a>

</div>

</if>

…ajouter la nouvelle condition:

<ifnot args="getCartParam('cart_empty_message')">
    <p class="minicart empty text"
       translate="'Why not give a couple of our fresh arrivals a try ?'"
    />
    <div class="minicart-wrapper-bottom-actions">
        <a class="btn-plain btn-has-icon-right" data-bind="attr: {href: shoppingCartUrl}">
            <span translate="'Add some products'" />
            <svg viewbox="0 0 100 100" class="icon icon-shopping-basket">
                <use xlink:href="#icon-shopping-basket"></use>
            </svg>
        </a>
    </div>
</ifnot>

<p class="minicart empty text"

translate="'Why not give a couple of our fresh arrivals a try ?'"

</svg>

</a>

</div>

</ifnot>

[Magento 2] Un module Javascript embarqué via RequireJS pour bloquer le scroll de la page à l’affichage d’un élément en surimpression

29/01/2021 / admin

Testé fonctionnel Magento 2.4 CE. L’idée de ce billet est surtout de montrer comment Magento 2 permet l’accès à de petites fonctionnalités écrites en Javascript/jQuery de manière modulaire via RequireJS.

Le code source du plugin:

app/design/frontend///web/js/utils/page-scroll-state.js

Retenez le nom de la fonction handle() du plugin, car elle nous servira plus bas.

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

    let PAGE_SCROLL_STATE = {};

    PAGE_SCROLL_STATE.handle = function() {
        const $_HTML = $('html');
        if ($_HTML.hasClass('is-disabled-page-scroll')) {
            $_HTML.removeClass('is-disabled-page-scroll');
        } else {
            $_HTML.addClass('is-disabled-page-scroll');
        }
    }

    return PAGE_SCROLL_STATE;

});

define(['jquery'], function($) {

'use strict';

let PAGE_SCROLL_STATE = {};

PAGE_SCROLL_STATE.handle = function() {

const $_HTML = $('html');

if ($_HTML.hasClass('is-disabled-page-scroll')) {

$_HTML.removeClass('is-disabled-page-scroll');

} else {

$_HTML.addClass('is-disabled-page-scroll');

}

return PAGE_SCROLL_STATE;

});

Déclarer le plugin via RequireJS:

app/design/frontend///requirejs-config.js

var config = {

    // Paths defines associations from library name (used to include the library,
    // for example when using "define") and the library file path.
    paths: {
        'page-scroll-state': 'js/utils/page-scroll-state'
    }

};

var config = {

// Paths defines associations from library name (used to include the library,

// for example when using "define") and the library file path.

paths: {

'page-scroll-state': 'js/utils/page-scroll-state'

}

};

A noter: si l’on souhaite rendre notre plug-in disponible immédiatement dans toutes les pages du site, nous pouvons ajouter ceci au fichier requirejs-config.js (je ne sais pas si la présence d’une virgule en fin de ligne peut poser problème):

    // In this case, the scripts we have connected will work on all pages of the module.
    // Usually, some third-party libraries are connected in this way.
    deps: [
        'page-scroll-state': 'js/utils/page-scroll-state',
    ]

// In this case, the scripts we have connected will work on all pages of the module.

// Usually, some third-party libraries are connected in this way.

deps: [

'page-scroll-state': 'js/utils/page-scroll-state',

]

Exploiter le plugin dans un autre fichier JS, un PHTML, etc…:

ligne 3: on requiert notre plugin tel que déclaré dans la partie paths: du fichier app/design/frontend///requirejs-config.js
(ligne 2: on n’oublie pas la dépendance à jquery ou autre si besoin…)
ligne 4: on définit un alias pour notre plugin, à invoquer par la suite dans le code qui est encapsulé dans la fonction que nous ouvrons
lignes 10 et 18: on invoque la fonction .handle() de notre plugin, via l’alias pageScrollState (défini comme argument de la fonction en ligne 4)

    require([
        'jquery',
        'page-scroll-state'
    ], function($, pageScrollState) {
        'use strict';

        // A l'ouverture de $_OFFCANVAS_LEFT_PRIMARY...
        $_OFFCANVAS_LEFT_PRIMARY.on('opened.zf.offCanvas', function() {
            // Disable page scroll
            pageScrollState.handle();
        });

        // A la fermeture de $_OFFCANVAS_LEFT_PRIMARY...
        $_OFFCANVAS_LEFT_PRIMARY.on('closed.zf.offCanvas', function() {
            // Closes all open elements, and returns to root menu.
            $_MEGAMENU.foundation('_hideAll');
            // Re-enable page scroll
            pageScrollState.handle();
        });

    });

require([

'jquery',

'page-scroll-state'

], function($, pageScrollState) {

'use strict';

// A l'ouverture de $_OFFCANVAS_LEFT_PRIMARY...

$_OFFCANVAS_LEFT_PRIMARY.on('opened.zf.offCanvas', function() {

// Disable page scroll

pageScrollState.handle();

});

// A la fermeture de $_OFFCANVAS_LEFT_PRIMARY...

$_OFFCANVAS_LEFT_PRIMARY.on('closed.zf.offCanvas', function() {

// Closes all open elements, and returns to root menu.

$_MEGAMENU.foundation('_hideAll');

// Re-enable page scroll

pageScrollState.handle();

});

Bonus: les styles!

//
//  Common (styles-m.css)
//  _____________________________________________

& when (@media-common = true) {
    .is-disabled-page-scroll {
        margin: 0 !important;
        height: 100% !important;
        overflow: hidden !important;
    }
}

// Common (styles-m.css)

// _____________________________________________

& when (@media-common = true) {

.is-disabled-page-scroll {

margin: 0 !important;

height: 100% !important;

overflow: hidden !important;

}

[Magento 2] Déplacer l’affichage du nombre de produits au panier de minicart.phtml vers un autre template

29/01/2021 / admin

Testé fonctionnel Magento 2.4 CE. Voici le code à déplacer (bloc de code minicart-counter):

<div class="minicart-trigger">
    <button type="button" class="clear" data-toggle="offCanvasRightMiniCart">
        <span class="button-icon-wrapper">
            <svg viewbox="0 0 100 100" class="icon icon-shopping-basket">
                <use xlink:href="#icon-shopping-basket"></use>
            </svg>
            <span class="minicart-counter data-block="minicart">
                <span data-bind="scope: 'minicart_content'">
                    <span class="counter qty empty">
                        <span class="counter-number"><!-- ko text: getCartParam('summary_count') --><!-- /ko --></span>
                    </span>
                </span>
            </span>
        </span>
        <span class="button-label"><?= __('Panier') ?></span>
    </button>
</div>

</svg>

</span>

</button>

</div>

Suggestion de styles:

button {
    display: inline-flex;
    align-items: center;
    .button-icon-wrapper {
        position: relative;
    }
}

button {

display: inline-flex;

align-items: center;

.button-icon-wrapper {

position: relative;

}

//
//  Common (styles-m.css)
//  _____________________________________________

& when (@media-common = true) {
    .minicart-trigger {
        .minicart-counter {
            position: absolute;
            top: -12px;
            right: -12px;
            display: inline-flex;
            align-items: center;
            min-width: 2.8rem;
            height: 2rem;
            padding: 0 7px;
            font-weight: 700;
            font-size: 1.2rem;
            line-height: 1.68rem;
            color: #ffffff;
            background-color: @theme__color__accent;
            border-radius: 50%;
        }
    }
}

// Common (styles-m.css)

// _____________________________________________

& when (@media-common = true) {

.minicart-trigger {

.minicart-counter {

position: absolute;

top: -12px;

right: -12px;

display: inline-flex;

align-items: center;

min-width: 2.8rem;

height: 2rem;

padding: 0 7px;

font-weight: 700;

font-size: 1.2rem;

line-height: 1.68rem;

color: #ffffff;

background-color: @theme__color__accent;

border-radius: 50%;

}

[Magento 2] Modifier le positionnement des messages d’erreur lors de la validation d’un formulaire

27/01/2021 / admin

Testé fonctionnel Magento 2.4 CE. Source: form-validation-with-custom-error-placement-magento-2.

The function errorPlacement is a function of the mage.validation widget in Magento 2 and can be found under vendor/magento/magento2-base/lib/web/mage/validation.js

Je suis parti, pour mon exemple ci-dessous, d’une surcharge du template PHTML subscribe.phtml issu du module Newsletter.

J’ai ajouté un élément <div id="custom-newsletter-validate-detail-error-message-container"></div> avec un ID à l’endroit où je souhaitais voir se positionner mon message d’erreur. Puis j’ai rajouté le contenu sous la seconde balise <script> dans mon exemple ci-dessous (utilisation de la fonction errorPlacement de validation.js.

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

/** @var \Magento\Newsletter\Block\Subscribe $block */
?>
<div class="block-wrapper newsletter">
    <div class="newsletter-container">
        <div class="content">
            <form class="form subscribe"
                  novalidate
                  action="<?= $block->escapeUrl($block->getFormActionUrl()) ?>"
                  method="post"
                  data-mage-init='{"validation": {"errorClass": "mage-error"}}'
                  id="newsletter-validate-detail">
                <div class="field">
                    <div class="control">
                        <label for="newsletter">
                        <div class="newsletter-tagline">
                            <?= $block->escapeHtml(__('Soyez les premiers à recevoir nos offres et notre actualité')) ?>
                        </div>
                            <span class="newsletter-input-wrapper">
                                <input name="email" type="email" id="newsletter" class="newsletter-input"
                                       placeholder="<?= $block->escapeHtml(__('@Votre email')) ?>"
                                       data-mage-init='{"mage/trim-input":{}}'
                                       data-validate="{required:true, 'validate-email':true}"
                                />
                                <button class="button-subscribe"
                                        title="<?= $block->escapeHtmlAttr(__('Je m\'inscris')) ?>"
                                        type="submit"
                                        aria-label="Subscribe">
                                    <span class="button-subscribe-label"><?= $block->escapeHtml(__('Je m\'inscris')) ?></span>
                                    <svg viewbox="0 0 100 100" class="icon icon-send">
                                        <use xlink:href="#icon-send"></use>
                                    </svg>
                                </button>
                            </span>
                        </label>
                    </div>
                </div>
                <div id="custom-newsletter-validate-detail-error-message-container"></div>
            </form>
        </div>
    </div>
</div>
<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Customer/js/block-submit-on-send": {
                "formId": "newsletter-validate-detail"
            }
        }
    }
</script>
<script>
    require([
        "jquery",
        "mage/mage"
    ], function($){
        var dataForm = $('#newsletter-validate-detail');
        dataForm.mage('validation', {
            errorPlacement: function(error, element) {
                if (element.is('#newsletter')) {
                    error.appendTo('#custom-newsletter-validate-detail-error-message-container');
                } else {
                    element.after(error);
                }
            },
        });
    });
</script>

<?php

/**

* See COPYING.txt for license details.

/** @var \Magento\Newsletter\Block\Subscribe $block */

<form class="form subscribe"

novalidate

action="<?= $block->escapeUrl($block->getFormActionUrl()) ?>"

method="post"

data-mage-init='{"validation": {"errorClass": "mage-error"}}'

id="newsletter-validate-detail">

<?= $block->escapeHtml(__('Soyez les premiers à recevoir nos offres et notre actualité')) ?>

</div>

<input name="email" type="email" id="newsletter" class="newsletter-input"

placeholder="<?= $block->escapeHtml(__('@Votre email')) ?>"

data-mage-init='{"mage/trim-input":{}}'

data-validate="{required:true, 'validate-email':true}"

<button class="button-subscribe"

title="<?= $block->escapeHtmlAttr(__('Je m\'inscris')) ?>"

type="submit"

aria-label="Subscribe">

<span class="button-subscribe-label"><?= $block->escapeHtml(__('Je m\'inscris')) ?></span>

</svg>

</button>

</span>

</label>

</div>

</form>

</div>

{

"*": {

"Magento_Customer/js/block-submit-on-send": {

"formId": "newsletter-validate-detail"

}

</script>

require([

"jquery",

"mage/mage"

], function($){

var dataForm = $('#newsletter-validate-detail');

dataForm.mage('validation', {

errorPlacement: function(error, element) {

if (element.is('#newsletter')) {

error.appendTo('#custom-newsletter-validate-detail-error-message-container');

} else {

element.after(error);

}

});

</script>

Theme by Anders Norén — Up ↑

Le bloc-notes professionnel d'un développeur front-end senior

Articles récents

Catégories

Archives

Méta

[Magento 2] Astuces pour adapter rapidement du code javascript aux standards jQuery UI Widget

Découpage du squelette de base d’un widget jQuery UI pour Magento 2

Version finale (également disponible dans le ZIP):

Déclaration de notre widget jQuery UI via RequireJS

Utilisation du widget dans un template PHTML de Magento 2

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

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

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

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

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

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

Conclusion

[SEO] Obfuscation des liens pour le maillage interne

[Magento 2] Les bases et patterns de l’utilisation de javascript (AMD, requireJS, widget jQuery, plugin, module, x-magento-init, etc…)

Intégrer et exploiter dans Magento 2 un plugin jQuery tiers dont le code source est structuré selon le pattern AMD

Récupération du plugin sous Git et copie dans l’arborescence du thème

Déclaration du plugin en tant que module via RequireJS

Création d’un fichier d’initialisation d’une instance du plugin

Petite subtilité: ajouter une configuration spécifique par défaut à toutes les instances de votre plugin

Appeler et initialiser une instance du plugin sur un élément du DOM

Exemple de notation déclarative avec `x-magento-init` depuis un fichier PHTML

Même exemple avec ajout d’options

Ressources en ligne:

[jQuery] Performances: comment utiliser de multiples éléments mis en cache?

[Magento 2] Afficher le formulaire de connexion client dans n’importe quel template PHTML

[Magento 2] Utiliser Knockout JS pour ajouter un message dans le minicart lorsque ce dernier est vide

[Magento 2] Un module Javascript embarqué via RequireJS pour bloquer le scroll de la page à l’affichage d’un élément en surimpression

Le code source du plugin:

Déclarer le plugin via RequireJS:

Exploiter le plugin dans un autre fichier JS, un PHTML, etc…:

Bonus: les styles!

[Magento 2] Déplacer l’affichage du nombre de produits au panier de minicart.phtml vers un autre template

[Magento 2] Modifier le positionnement des messages d’erreur lors de la validation d’un formulaire

Le bloc-notes professionnel d'un développeur front-end senior

Articles récents

Catégories

Tags

Archives

Méta

Découpage du squelette de base d’un widget jQuery UI pour Magento 2

Version finale (également disponible dans le ZIP):

Déclaration de notre widget jQuery UI via RequireJS

Utilisation du widget dans un template PHTML de Magento 2

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

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

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

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

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

Conclusion

Intégrer et exploiter dans Magento 2 un plugin jQuery tiers dont le code source est structuré selon le pattern AMD

Récupération du plugin sous Git et copie dans l’arborescence du thème

Déclaration du plugin en tant que module via RequireJS

Création d’un fichier d’initialisation d’une instance du plugin

Petite subtilité: ajouter une configuration spécifique par défaut à toutes les instances de votre plugin

Appeler et initialiser une instance du plugin sur un élément du DOM

Exemple de notation déclarative avec x-magento-init depuis un fichier PHTML

Même exemple avec ajout d’options

Ressources en ligne:

Le code source du plugin:

Déclarer le plugin via RequireJS:

Exploiter le plugin dans un autre fichier JS, un PHTML, etc…:

Bonus: les styles!

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

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

Exemple de notation déclarative avec `x-magento-init` depuis un fichier PHTML