Étiquette : jquery

[Javascript] Manipuler les objets JSON, astuces et bonnes pratiques

20/03/2023 / admin

Boucler dans un objet JSON imbriqué et retourner une liste de toutes les valeurs d’une clé spécifique

Objectif: boucler dans l’objet JSON ci-dessous et retourner une liste de toutes les valeurs de la clé example.

Ressources en ligne:

Boucler dans un objet JSON imbriqué et retourner une liste de toutes les valeurs d’une clé spécifique: Accessing nested JSON object with JQuery
Récupérer l'index des items de l’objet JSON pour cibler le premier, le dernier, etc… item du tableau: jQuery .each get index of items

{
    "pattern_1": {
        "example": "AB12 3CD",
        "pattern": "^[a-zA-Z]{2}[0-9]{2}\\s?[0-9]{1}[a-zA-Z]{2}$"
    },
    "pattern_2": {
        "example": "A1B 2CD",
        "pattern": "^[a-zA-Z]{1}[0-9]{1}[a-zA-Z]{1}\\s?[0-9]{1}[a-zA-Z]{2}$"
    },
    "pattern_3": {
        "example": "AB1 2CD",
        "pattern": "^[a-zA-Z]{2}[0-9]{1}\\s?[0-9]{1}[a-zA-Z]{2}$"
    },
    "pattern_4": {
        "example": "AB1C 2DF",
        "pattern": "^[a-zA-Z]{2}[0-9]{1}[a-zA-Z]{1}\\s?[0-9]{1}[a-zA-Z]{2}$"
    },
    "pattern_5": {
        "example": "A12 3BC",
        "pattern": "^[a-zA-Z]{1}[0-9]{2}\\s?[0-9]{1}[a-zA-Z]{2}$"
    },
    "pattern_6": {
        "example": "A1 2BC",
        "pattern": "^[a-zA-Z]{1}[0-9]{1}\\s?[0-9]{1}[a-zA-Z]{2}$"
    }
}

{

"pattern_1": {

"example": "AB12 3CD",

"pattern": "^[a-zA-Z]{2}[0-9]{2}\\s?[0-9]{1}[a-zA-Z]{2}$"

"pattern_2": {

"example": "A1B 2CD",

"pattern": "^[a-zA-Z]{1}[0-9]{1}[a-zA-Z]{1}\\s?[0-9]{1}[a-zA-Z]{2}$"

"pattern_3": {

"example": "AB1 2CD",

"pattern": "^[a-zA-Z]{2}[0-9]{1}\\s?[0-9]{1}[a-zA-Z]{2}$"

"pattern_4": {

"example": "AB1C 2DF",

"pattern": "^[a-zA-Z]{2}[0-9]{1}[a-zA-Z]{1}\\s?[0-9]{1}[a-zA-Z]{2}$"

"pattern_5": {

"example": "A12 3BC",

"pattern": "^[a-zA-Z]{1}[0-9]{2}\\s?[0-9]{1}[a-zA-Z]{2}$"

"pattern_6": {

"example": "A1 2BC",

"pattern": "^[a-zA-Z]{1}[0-9]{1}\\s?[0-9]{1}[a-zA-Z]{2}$"

}

function processList(data) {
    var examples = '';
    var i = 0;

    $.each(data, function(index, value) {
        var length = Object.keys(data).length;

        if (i === (length -1)) {
            examples += value.example;
        } else {
            examples += value.example + '; ';
        }

        i++;
    });

    return examples;
}

// Result:
// AB12 3CD; A1B 2CD; AB1 2CD; AB1C 2DF; A12 3BC; A1 2BC

function processList(data) {

var examples = '';

var i = 0;

$.each(data, function(index, value) {

var length = Object.keys(data).length;

if (i === (length -1)) {

examples += value.example;

} else {

examples += value.example + '; ';

}

i++;

});

return examples;

}

// Result:

// AB12 3CD; A1B 2CD; AB1 2CD; AB1C 2DF; A12 3BC; A1 2BC

[Magento 2] Validation des champs de formulaire via les UI components, ressources en ligne et astuces

13/03/2023 / admin

Ressources en ligne:

ATTENTION: il y a pas mal de ressources en ligne (blogs, stack overflow) qui, sans donner de solutions incorrectes, ne donnent que des solutions partielles ou partiellement dépréciées.

J’ai notamment perdu pas mal de temps avant de comprendre qu’il existait deux systèmes de validation des champs de formulaires, dont un
est spécifique au Checkout et que ça avait son importance au moment d’ajouter un nouveau test de validation par le biais d’une mixin!

DONC… J’ai trié les ressources en deux catégories: celles à consulter en 1er et celles qui vous aideront moins, voire vous embrouilleront…

D’une manière générale avec les ressources en ligne sur Magento 2 (ou Adobe Commerce maintenant), préférez en priorité la documentation officielle de développement Front sous Magento 2/Adobe Commerce avant toute autre ressource!

Ressources à consulter en priorité

(officiel) Custom form validation rules
Magento 2 : Ajouter Une Validation Du Numéro De Téléphone – billet très complet sur le blog de Hervé Hennes. Magento 2 _ Ajouter une validation du numéro de téléphone _ Hervé Hennes et sources du module sur github.

Ressources à consulter ensuite, si vous n’avez pas résolu votre problème

Ressources sur ce blog (ma propre expérience de dev avec la validation des champs de formulaire sous Magento 2/Adobe Commerce)

Ajouter une validation supplémentaire au champ Code Postal (name="postcode") dans l’étape de Livraison/Shipping du Tunnel d’Achat/Checkout de Magento 2/Adobe Commerce

Ajouter une validation supplémentaire au champ Code Postal (`name="postcode"`) dans l’étape de Livraison/Shipping du Tunnel d’Achat/Checkout de Magento 2/Adobe Commerce

Comme expliqué dans l’excellent billet de Hervé Hennes sur l’ajout d’une validation sur un champ « Numéro de téléphone » dans Magento 2:

L’environnement de validation de données utilisées dans le compte clients et dans le tunnel de commandes étant différents il faudra créer 2 mixins.

app/code/Vendor/Customer/view/frontend/requirejs-config.js

let config = {
    [...]
    config: {
        mixins: {
            // Add mixin for global form validation
            'mage/validation': {
                'Vendor_Module/js/validation-mixin': true
            },
            // Add mixin for checkout form validation
            'Magento_Ui/js/lib/validation/validator': {
                'Vendor_Module/js/validator-mixin': true
            }
        }
    }
};

let config = {

[...]

config: {

mixins: {

// Add mixin for global form validation

'mage/validation': {

'Vendor_Module/js/validation-mixin': true

// Add mixin for checkout form validation

'Magento_Ui/js/lib/validation/validator': {

'Vendor_Module/js/validator-mixin': true

}

};

app/code/Vendor/Customer/view/frontend/web/js/validator-mixin.js

console.log(window.checkoutConfig);

1	console.log(window.checkoutConfig);

define([
    'jquery',
    'Magento_Checkout/js/model/postcode-validator'
], function(
    $,
    postcodeValidator
){
    'use strict';

    var message = $.mage.__("Provided Zip/Postal Code is invalid. Example: %1.");

    return function(validator) {

        validator.addRule(
            'validate-postcode-pattern',
            function (value) {
                var countryId = window.checkoutConfig.defaultCountryId;
                var patterns = window.checkoutConfig.postCodes[countryId];

                function processList(data) {
                    var examples = '';
                    var i = 0;

                    $.each(data, function(index, value) {
                        var length = Object.keys(data).length;

                        if (i === (length -1)) {
                            examples += value.example;
                        } else {
                            examples += value.example + '; ';
                        }

                        i++;
                    });

                    return examples;
                }

                message = $.mage.__("Provided Zip/Postal Code is invalid. Example: %1.").replace("%1", processList(patterns));

                return $.mage.isEmptyNoTrim(value) || postcodeValidator.validate(value, countryId);
            }, function () {
                return message;
            }
        );

        return validator;
    }
});

define([

'jquery',

'Magento_Checkout/js/model/postcode-validator'

], function(

postcodeValidator

){

'use strict';

var message = $.mage.__("Provided Zip/Postal Code is invalid. Example: %1.");

return function(validator) {

validator.addRule(

'validate-postcode-pattern',

function (value) {

var countryId = window.checkoutConfig.defaultCountryId;

var patterns = window.checkoutConfig.postCodes[countryId];

function processList(data) {

var examples = '';

var i = 0;

$.each(data, function(index, value) {

var length = Object.keys(data).length;

if (i === (length -1)) {

examples += value.example;

} else {

examples += value.example + '; ';

}

i++;

});

return examples;

}

message = $.mage.__("Provided Zip/Postal Code is invalid. Example: %1.").replace("%1", processList(patterns));

return $.mage.isEmptyNoTrim(value) || postcodeValidator.validate(value, countryId);

}, function () {

return message;

}

);

return validator;

}

});

app/code/Vendor/Customer/view/frontend/layout/checkout_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.root">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="shipping-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="shippingAddress" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="shipping-address-fieldset" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="postcode" xsi:type="array">
                                                                    <item name="validation" xsi:type="array">
                                                                        <item name="validate-xls-macro" xsi:type="boolean">true</item>
                                                                        <item name="validate-postcode-pattern" xsi:type="boolean">true</item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

<?xml version="1.0"?>

<body>

</item>

</argument>

</arguments>

</referenceBlock>

</body>

</page>

[jQuery] Inverser l’ordre des éléments dans un objet jQuery.fn.init

24/02/2023 / admin

Source: how to iterate elements in reverse order in jquery? | JQuery .each() backwards.

$.fn.reverse = [].reverse;

$('li').reverse();

$.fn.reverse = [].reverse;

$('li').reverse();

[Magento 2] matchMedia mediaCheck boucler dans un tableau de media-queries avec la méthode jQuery each()

03/02/2023 / admin

Ressource: How to loop through array in jQuery?. très bien expliqué avec des exemples spécifiques pour du javasqcript vanilla (ES5, ES6, …) et l’utilisation avec this.

Dans mon exemple, je cherche simplement à ré-initialiser un carousel Slick Slider dès qu’un nouveau breakpoint est rencontré. Il est important de comprendre que c’est le même code qui est exécuté à chaque fois.

Si vous souhaitez utiliser des paramètres différents en fonction de vos vues (Mobile, Tablet, Desktop) avec Slick Slider, il faut utiliser l’option responsive.

var slickBreakpoints = [
    '(max-width: 639px)',
    '(min-width: 640px) and (max-width: 959px)',
    '(min-width: 960px)'
];

$.each(slickBreakpoints, function(index, breakpoint) {
    mediaCheck({
        media: breakpoint,
        entry: function () {
            msgContainer
                .slick('unslick')
                .slick(slickConfig);
        }
    });
});

var slickBreakpoints = [

'(max-width: 639px)',

'(min-width: 640px) and (max-width: 959px)',

'(min-width: 960px)'

];

$.each(slickBreakpoints, function(index, breakpoint) {

mediaCheck({

media: breakpoint,

entry: function () {

msgContainer

.slick('unslick')

.slick(slickConfig);

}

});

…revient à déclarer ceci:

mediaCheck({
    media: '(max-width: 639px)',
    entry: function () {
        msgContainer
            .slick('unslick')
            .slick(slickConfig);
    }
});

mediaCheck({
    media: '(min-width: 640px) and (max-width: 959px)',
    entry: function () {
        msgContainer
            .slick('unslick')
            .slick(slickConfig);
    }
});

mediaCheck({
    media: '(min-width: 960px)',
    entry: function () {
        msgContainer
            .slick('unslick')
            .slick(slickConfig);
    }
});

mediaCheck({

media: '(max-width: 639px)',

entry: function () {

msgContainer

.slick('unslick')

.slick(slickConfig);

}

});

mediaCheck({

media: '(min-width: 640px) and (max-width: 959px)',

entry: function () {

msgContainer

.slick('unslick')

.slick(slickConfig);

}

});

mediaCheck({

media: '(min-width: 960px)',

entry: function () {

msgContainer

.slick('unslick')

.slick(slickConfig);

}

});

[jQuery] Eviter la duplication d’éléments du DOM lorsqu’on utilise .each() en exploitant correctement l’objet $(this)

17/01/2023 / admin

Dans mon exemple, j’ai trois containers <div class="payment-method" /> qui sont présents dans le DOM. Chacun de ces containers possède son propre bouton. Je cherche à ajouter un seul nouveau bouton dans chaque container qui n’est pas tout-à-fait un clone de celui qui existe déjà, mais qui en reprend le code HTML enfant.

Problème: avec le code ci-dessous, les trois boutons que j’ajoute sont créés une fois dans chaque container. En d’autres termes, je me retrouve avec quatre boutons (au lieu de deux) dans chaque container.

$(".payment-method").each(function(e) {
    let $this = $(this);
    let placeOrderBtn = $("button.checkout", $this);
    let placeOrderBtnHtml = placeOrderBtn.html();

    $('<div class="primary"><button class="action primary">' + placeOrderBtnHtml + '</button></div>').appendTo('.actions-toolbar', $this);
});

$(".payment-method").each(function(e) {

let $this = $(this);

let placeOrderBtn = $("button.checkout", $this);

let placeOrderBtnHtml = placeOrderBtn.html();

$('<div class="primary"><button class="action primary">' + placeOrderBtnHtml + '</button></div>').appendTo('.actions-toolbar', $this);

});

Solution: le souci provient d’une mauvaise utilisation de $(this) en combinaison de .each(). Ci-dessous le code qui me donne le résultat attendu:

$(".payment-method").each(function(index, element) {
    let $this = $(this);
    let placeOrderBtn = $this.find("button.checkout");
    let placeOrderBtnHtml = placeOrderBtn.html();
    let actionsToolbar = $this.find('.actions-toolbar');

    $('<div class="primary"><button class="action secondary" type="button">' + placeOrderBtnHtml + '</button></div>').appendTo(actionsToolbar);
});

$(".payment-method").each(function(index, element) {

let $this = $(this);

let placeOrderBtn = $this.find("button.checkout");

let placeOrderBtnHtml = placeOrderBtn.html();

let actionsToolbar = $this.find('.actions-toolbar');

$('<div class="primary"><button class="action secondary" type="button">' + placeOrderBtnHtml + '</button></div>').appendTo(actionsToolbar);

});

[Magento 2] Un widget JS toggle on/off accessible WCAG avec les attributs Hidden et Aria-Expanded

06/06/2022 / admin

Objectif: créer un widget Toggle flexible dont le rôle sera uniquement d’affiche/masquer des éléments du DOM lorsque les utilisateurs interagissent avec un autre élément d’interface (bouton, checkbox, autre…).

Source: Marking elements expandable using aria-expanded. Exemple d’utilisation sur l’élément HTML Button. Exemple d’utilisation sur l’élément HTML Checkbox.

Exemple d’utilisation sur l’élément HTML Checkbox:

Source: https://www.accessibility-developer-guide.com/.

<p>
  Please click the following checkbox.
</p>
<input id="checkbox" type="checkbox" /><label for="checkbox">Show tooltip</label>
<div hidden="" id="tooltip">
  Thanks for toggling! Please click again to hide me.
</div>

<p>

Please click the following checkbox.

</p>

<input id="checkbox" type="checkbox" /><label for="checkbox">Show tooltip</label>

Thanks for toggling! Please click again to hide me.

</div>

;(function () {
  $(document).ready(function () {
    var $checkbox, $tooltip
    $checkbox = $('input')
    $tooltip = $('#tooltip')
    return $checkbox.change(() => {
      if ($tooltip.attr('hidden') === 'hidden') {
        return $tooltip.removeAttr('hidden')
      } else {
        return $tooltip.attr('hidden', true)
      }
    })
  })
}.call(this))

;(function () {

$(document).ready(function () {

var $checkbox, $tooltip

$checkbox = $('input')

$tooltip = $('#tooltip')

return $checkbox.change(() => {

if ($tooltip.attr('hidden') === 'hidden') {

return $tooltip.removeAttr('hidden')

} else {

return $tooltip.attr('hidden', true)

}

})

}.call(this))

Fichier `wcag-toggle.js`:

// Source: https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/expanded/
define([
    'jquery',
    'jquery-ui-modules/widget'
], function($) {
    'use strict';

    $.widget('mage.wcagToggle', {
        options: {
            toggleableElement: ''
        },

        /**
         * Create widget
         * @private
         */
        _create: function() {
            // console.log("%c wcagToggle", "background: yellow");

            this.element.on('click', $.proxy(this._toggleOnOff, this));
            // ...is similar to:
            // this.element.on('click', this._toggleOnOff.bind(this));
        },

        /**
         * Toggle On/Off
         * @private
         */
        _toggleOnOff: function() {
            if ($(this.options.toggleableElement).attr('hidden') === 'hidden') {
                $(this.options.toggleableElement).removeAttr('hidden');
                this.element.attr('aria-expanded', true);
            } else {
                $(this.options.toggleableElement).attr('hidden', true);
                this.element.attr('aria-expanded', false);
            }
        }

    });

    return $.mage.wcagToggle;
});

// Source: https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/expanded/

define([

'jquery',

'jquery-ui-modules/widget'

], function($) {

'use strict';

$.widget('mage.wcagToggle', {

options: {

toggleableElement: ''

/**

* Create widget

* @private

_create: function() {

// console.log("%c wcagToggle", "background: yellow");

this.element.on('click', $.proxy(this._toggleOnOff, this));

// ...is similar to:

// this.element.on('click', this._toggleOnOff.bind(this));

/**

* Toggle On/Off

* @private

_toggleOnOff: function() {

if ($(this.options.toggleableElement).attr('hidden') === 'hidden') {

$(this.options.toggleableElement).removeAttr('hidden');

this.element.attr('aria-expanded', true);

} else {

$(this.options.toggleableElement).attr('hidden', true);

this.element.attr('aria-expanded', false);

}

});

return $.mage.wcagToggle;

});

Fichier `PHTML`:

Partie DOM (attention, je mets juste les grandes lignes). Se référer à l’example de code proposé par le site source.

<div class="field choice newsletter">
    <input type="checkbox" id="is_subscribed" />
    <label for="is_subscribed" class="label"></label>
</div>

<div id="is_subscribed_is_checked" hidden="">
</div>

</div>

</div>

    <script type="text/x-magento-init">
        {
            "#is_subscribed": {
                "wcagToggle": {
                    "toggleableElement": "#is_subscribed_is_checked"
                }
            }
        }
    </script>

{

"#is_subscribed": {

"wcagToggle": {

"toggleableElement": "#is_subscribed_is_checked"

}

</script>

On n’oublie pas la déclaration (à votre propre sauce) dans un fichier `requirejs-config.js`:

var config = {
    map: {
        '*': {
            wcagToggle: 'Magento_Theme/js/widgets/wcag-toggle'
        }
    }
};

var config = {

map: {

'*': {

wcagToggle: 'Magento_Theme/js/widgets/wcag-toggle'

}

};

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

Articles récents

Catégories

Archives

Méta

Étiquette : jquery

[Javascript] Manipuler les objets JSON, astuces et bonnes pratiques

Boucler dans un objet JSON imbriqué et retourner une liste de toutes les valeurs d’une clé spécifique

[Magento 2] Validation des champs de formulaire via les UI components, ressources en ligne et astuces

Ressources en ligne:

Ressources à consulter en priorité

Ressources à consulter ensuite, si vous n’avez pas résolu votre problème

Ressources sur ce blog (ma propre expérience de dev avec la validation des champs de formulaire sous Magento 2/Adobe Commerce)

Ajouter une validation supplémentaire au champ Code Postal (`name="postcode"`) dans l’étape de Livraison/Shipping du Tunnel d’Achat/Checkout de Magento 2/Adobe Commerce

[jQuery] Inverser l’ordre des éléments dans un objet jQuery.fn.init

[Magento 2] matchMedia mediaCheck boucler dans un tableau de media-queries avec la méthode jQuery each()

[jQuery] Eviter la duplication d’éléments du DOM lorsqu’on utilise .each() en exploitant correctement l’objet $(this)

[Magento 2] Un widget JS toggle on/off accessible WCAG avec les attributs Hidden et Aria-Expanded

Exemple d’utilisation sur l’élément HTML Checkbox:

Fichier `wcag-toggle.js`:

Fichier `PHTML`:

On n’oublie pas la déclaration (à votre propre sauce) dans un fichier `requirejs-config.js`:

[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] 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] Modifier le positionnement des messages d’erreur lors de la validation d’un formulaire

Boucler dans un objet JSON imbriqué et retourner une liste de toutes les valeurs d’une clé spécifique

Ressources en ligne:

Ressources à consulter en priorité

Ressources à consulter ensuite, si vous n’avez pas résolu votre problème

Ressources sur ce blog (ma propre expérience de dev avec la validation des champs de formulaire sous Magento 2/Adobe Commerce)

Ajouter une validation supplémentaire au champ Code Postal (name="postcode") dans l’étape de Livraison/Shipping du Tunnel d’Achat/Checkout de Magento 2/Adobe Commerce

Exemple d’utilisation sur l’élément HTML Checkbox:

Fichier wcag-toggle.js:

Fichier PHTML:

On n’oublie pas la déclaration (à votre propre sauce) dans un fichier requirejs-config.js:

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!

Ajouter une validation supplémentaire au champ Code Postal (`name="postcode"`) dans l’étape de Livraison/Shipping du Tunnel d’Achat/Checkout de Magento 2/Adobe Commerce

Fichier `wcag-toggle.js`:

Fichier `PHTML`:

On n’oublie pas la déclaration (à votre propre sauce) dans un fichier `requirejs-config.js`:

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