Étiquette : widget

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

[Magento 2] Etendre un composant JS natif

07/12/2020 / admin

Testé fonctionnel Magento 2.4. Source: Extending Magento 2 default JS components. Version PDF – inchoo.net-Extending Magento 2 default JS components.

Etendre le composant UI Tabs pour ajouter un effet de bordure animée sous les onglets:

app/design/frontend/MyVendor/mytheme/web/js/tabs-custom.js

define([
        'jquery',
        'jquery-ui-modules/widget',
        'jquery-ui-modules/core',
        'mage/mage',
        'mage/collapsible'],
    function($){
        $.widget('custom.tabs', $.mage.tabs, {
            options: {
                indicator: false
            },
            _create: function () {
                // IF NO options ARE POSSIBLE:
                // if ( $(".items.has-indicator").length > 0 ){
                //     this._addIndicator();
                // }
                if (this.options.indicator) {
                    this._addIndicator();
                }
            },
            _addIndicator: function () {
                var $menu = $(".items.has-indicator"),
                    indicator = $('<span class="indicator"></span>');

                $menu.append(indicator);

                position_indicator($menu.find("li.current"));

                setTimeout(function(){indicator.css("opacity", 1);}, 500);
                $menu.find("li").mouseenter(function(){
                    position_indicator($(this));
                });
                $menu.find("li").mouseleave(function(){
                    position_indicator($menu.find("li.current"));
                });

                $(window).on('resize', function(){
                    position_indicator($menu.find("li.current"));
                });

                function position_indicator(ele){
                    var left   = ele.position().left,
                        width  = ele.outerWidth(),
                        top    = ele.position().top,
                        height = ele.outerHeight();

                    if(window.matchMedia("(max-width:890px)").matches){
                        indicator.stop().animate({
                            top: top,
                            height: height,
                            width: 3,
                            left: 0
                        });
                    }
                    else{
                        indicator.stop().animate({
                            left: left,
                            width: width,
                            height: 3,
                            top: "100%"
                        });
                    }
                }
            }
        });
        return $.custom.tabs;
    });

define([

'jquery',

'jquery-ui-modules/widget',

'jquery-ui-modules/core',

'mage/mage',

'mage/collapsible'],

function($){

$.widget('custom.tabs', $.mage.tabs, {

options: {

indicator: false

_create: function () {

// IF NO options ARE POSSIBLE:

// if ( $(".items.has-indicator").length > 0 ){

// this._addIndicator();

// }

if (this.options.indicator) {

this._addIndicator();

}

_addIndicator: function () {

var $menu = $(".items.has-indicator"),

indicator = $('<span class="indicator"></span>');

$menu.append(indicator);

position_indicator($menu.find("li.current"));

setTimeout(function(){indicator.css("opacity", 1);}, 500);

$menu.find("li").mouseenter(function(){

position_indicator($(this));

});

$menu.find("li").mouseleave(function(){

position_indicator($menu.find("li.current"));

});

$(window).on('resize', function(){

position_indicator($menu.find("li.current"));

});

function position_indicator(ele){

var left = ele.position().left,

width = ele.outerWidth(),

top = ele.position().top,

height = ele.outerHeight();

if(window.matchMedia("(max-width:890px)").matches){

indicator.stop().animate({

top: top,

height: height,

width: 3,

left: 0

});

}

else{

indicator.stop().animate({

left: left,

width: width,

height: 3,

top: "100%"

});

}

});

return $.custom.tabs;

});

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

var config = {
    map: {
        '*' : {
            'tabs': 'js/tabs-custom'
        }
    }
};

var config = {

map: {

'*' : {

'tabs': 'js/tabs-custom'

}

};

app/design/frontend/MyVendor/mytheme/Magento_Theme/templates/html/sections.phtml

<div class="section-items <?= $block->escapeHtmlAttr($groupCss) ?>-items"
     data-mage-init='{"tabs":{"openedState":"active","indicator":"true"}}'>

1 2	<div class="section-items <?= $block->escapeHtmlAttr($groupCss) ?>-items" data-mage-init='{"tabs":{"openedState":"active","indicator":"true"}}'>

app/design/frontend/MyVendor/mytheme/web/css/source/tabs.less

@tab-item-height: 50px;
@tab-item-border-width: 3px;

.items:not(.nav) {
    border-bottom: none 0;
    display: flex;
    .nav.item {
        margin: 0;
        display: flex;
        > a,
        &.current > strong {
            padding: 0 @tab-item-height / 2.25;
            position: relative;
            display: flex;
            align-items: center;
        }
        &.current > strong {
            font-weight: 500;
            &:hover {
                color: @red;
            }
        }
    }
    &.has-indicator {
        position: relative;
        .indicator{
            left: 0;
            height: 3px;
            position: absolute;
            bottom: 0;
            width: 0;
            opacity: 0;
            background: @red;
            overflow: visible !important;

            &:before{
                content:"";
                position: absolute;
                bottom: 0;
                background-color: @red;
            }
        }
    }
}



//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    .items:not(.nav) {
        flex-direction: column;
        background: linear-gradient(90deg, @greyLight 0%, @greyLight @tab-item-border-width, transparent @tab-item-border-width, transparent 100%);
        .nav.item {
            height: @tab-item-height;
        }
        &.has-indicator {
            .indicator {
                &:before{
                    width: 13px;
                    height: 2px;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%) translateX(0);
                }
            }
        }
    }
}



//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .items:not(.nav) {
        flex-direction: row;
        background: linear-gradient(180deg, transparent 0%, transparent @tab-item-height, @greyLight @tab-item-height, @greyLight 100%);
        .nav.item {
            // total height: @tab-item-height + @tab-item-border-width;
            height: @tab-item-height + @tab-item-border-width;
        }
        &.has-indicator {
            .indicator {
                transform: translateY(-3px);
                &:before{
                    width: 2px;
                    height: 13px;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
        }
    }
}

@tab-item-height: 50px;

@tab-item-border-width: 3px;

.items:not(.nav) {

border-bottom: none 0;

display: flex;

.nav.item {

margin: 0;

display: flex;

> a,

&.current > strong {

padding: 0 @tab-item-height / 2.25;

position: relative;

display: flex;

align-items: center;

}

&.current > strong {

font-weight: 500;

&:hover {

color: @red;

}

&.has-indicator {

position: relative;

.indicator{

left: 0;

height: 3px;

position: absolute;

bottom: 0;

width: 0;

opacity: 0;

background: @red;

overflow: visible !important;

&:before{

content:"";

position: absolute;

bottom: 0;

background-color: @red;

}

// Mobile

// _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {

.items:not(.nav) {

flex-direction: column;

background: linear-gradient(90deg, @greyLight 0%, @greyLight @tab-item-border-width, transparent @tab-item-border-width, transparent 100%);

.nav.item {

height: @tab-item-height;

}

&.has-indicator {

.indicator {

&:before{

width: 13px;

height: 2px;

left: 0;

top: 50%;

transform: translateY(-50%) translateX(0);

}

// Desktop

// _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {

.items:not(.nav) {

flex-direction: row;

background: linear-gradient(180deg, transparent 0%, transparent @tab-item-height, @greyLight @tab-item-height, @greyLight 100%);

.nav.item {

// total height: @tab-item-height + @tab-item-border-width;

height: @tab-item-height + @tab-item-border-width;

}

&.has-indicator {

.indicator {

transform: translateY(-3px);

&:before{

width: 2px;

height: 13px;

left: 50%;

transform: translateX(-50%);

}

app/design/frontend/MyVendor/mytheme/Magento_Sales/layout/sales_order_info_links.xml et app/design/frontend/MyVendor/mytheme/Magento_Sales/layout/sales_order_guest_info_links.xml

<body>
    <referenceContainer name="content">
        <block class="Magento\Framework\View\Element\Html\Links" as="links" name="sales.order.info.links" before="-">
            <arguments>
                <argument name="css_class" xsi:type="string">items order-links has-indicator</argument>
            </arguments>

<body>

<argument name="css_class" xsi:type="string">items order-links has-indicator</argument>

</arguments>

[Magento 2] DropdownDialog widget

19/03/2020 / admin

Attention: le code sample du widget DropdownDialog fourni dans la documentation officielle de Magento 2 (v2.3) génère des bugs à l’utilisation.

Résolution du problème: le <div class="block block-minicart"> doit être inséré immédiatement sous le <button>:

    <div data-block="dropdown" class="minicart-wrapper">
        <button type="button" class="action customer-action-button" data-trigger="trigger">
            <i class="icon-user1"></i>
        </button>
        <div class="block block-minicart"
            data-mage-init='{
                "dropdownDialog": {
                    "appendTo": "[data-block=dropdown]",
                    "triggerTarget":"[data-trigger=trigger]",
                    "timeout": 2000,
                    "closeOnMouseLeave": false,
                    "closeOnEscape": true,
                    "autoOpen": true,
                    "triggerClass": "active",
                    "parentClass": "active",
                    "buttons": [],
                    "triggerEvent": "hover"
                }
            }'>
            <div id="minicart-content-wrapper">
                <div class="customer-links" data-move="customer-mobile">
                    <?php echo $this->getChildHtml("header.links"); ?>
                </div>
            </div>
        </div>
    </div>

</button>

<div class="block block-minicart"

data-mage-init='{

"dropdownDialog": {

"appendTo": "[data-block=dropdown]",

"triggerTarget":"[data-trigger=trigger]",

"timeout": 2000,

"closeOnMouseLeave": false,

"closeOnEscape": true,

"autoOpen": true,

"triggerClass": "active",

"parentClass": "active",

"buttons": [],

"triggerEvent": "hover"

}

}'>

<?php echo $this->getChildHtml("header.links"); ?>

</div>

Par ailleurs, le paramètre closeOnEscape semble déprécié ou n’est pas détaillé dans la documentation.

[Magento 2] Utiliser le source model Yesno pour faire apparaître de manière dynamique et sous condition un champ caché dans un widget custom

17/01/2020 / admin

Nous avons ici deux champs mais l’affichage du second, masqué au chargement du formulaire, est conditionné à l’activation du premier qui est un booléen (true/false -> si « true », alors le second champ est affiché).

<parameter name="show_hidden_field" xsi:type="select" visible="true"
           source_model="Magento\Config\Model\Config\Source\Yesno">
    <label translate="true">Show hidden field</label>
</parameter>
<parameter name="hidden_field" xsi:type="text" required="true" visible="true">
    <label translate="true">Hidden field</label>
    <depends>
        <parameter name="show_hidden_field" value="1" />
    </depends>
    <value>5</value>
</parameter>

<parameter name="show_hidden_field" xsi:type="select" visible="true"

source_model="Magento\Config\Model\Config\Source\Yesno">

<label translate="true">Show hidden field</label>

</parameter>

<label translate="true">Hidden field</label>

</depends>

</parameter>

Cas où l’affichage du champ caché dépend de l’activation de plusieurs autres champs

Pas encore testé, mais vu sur le net et notifié comme fonctionnel (bug fixé dans la 2.3.x).

<parameter name="myfield" xsi:type="text" required="true" visible="true">
      <label translate="true">Example</label>
      <depends>
          <parameter name="dependency_one" value="1"/>
          <parameter name="dependency_two" value="1"/>
      </depends>
</parameter>

<label translate="true">Example</label>

</depends>

</parameter>

[Magento 2] Afficher des widgets sur n’importe quelle page du site (CMS custom, category, product, …)

16/01/2020 / admin

Avant-propos: j’ai testé plusieurs pistes pour parvenir à mes fins. Si la méthode #2 décrite plus bas fonctionne avec de grosses limitations (je vous déconseille de la mettre en place), j’ai choisi de la consigner car elle m’a appris des choses sur Magento 2. Mais gardez à l’esprit que la seule méthode valide est la méthode #1.

Méthode #1

Pré-requis (2 profils d’utilisateurs Magento 2): vous devez avoir accès au code source de votre projet pour pouvoir déclarer chaque nouvelle création d’une page CMS custom (ces pages ne se référencent pas automatiquement dans Magento 2) ou vous avez défini, au moment de monter votre projet, le nombre et la nature des pages CMS custom dont vous aurez besoin et votre prestataire mettra en place le nécessaire pour vous.

Mes sources pour la première partie de ce billet:

Etendre un fichier `page_types.xml` dans un module spécifique

Convention: dans ce tuto, nous allons considérer que les Vendor/Module sont Sodifrance/Pdv.

Repérer le fichier vendor/magento/module-cms/etc/frontend/page_types.xml et l’étendre dans app/code/Sodifrance/Pdv/etc/frontend/page_types.xml. Ce fichier sert à lister les pages CMS qui seront disponibles depuis l’interface d’administration de Magento 2 pour y glisser des widgets (prononcer « widjets »). Par défaut, les pages CMS custom ne s’ajoutent pas automatiquement à cette liste. Nous n’allons pas introduire d’automatisme, mais un ajout manuel.

Vous pouvez supprimer tous les types existants dans le fichier de départ car l’ensemble des déclarations de types seront mergées par Magento 2 au moment venu de la compilation. Votre fichier d’extension va donc ressembler à ceci:

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page_types xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_types.xsd">
</page_types>

<?xml version="1.0"?>

<!--

/**

* See COPYING.txt for license details.

-->

<page_types xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_types.xsd">

</page_types>

Trouver le `handle` d’une page CMS custom

Pour aller plus loin, il faut au préalable avoir créé au moins une page CMS custom.

Le handle est identifiant unique assigné de manière automatique par Magento 2 à chaque nouvelle création de page CMS (les pages « système » comme la page des catégories ou la page des produits en ont aussi un) sous le format cms_page_view_id_[clé_d'URL].

Logiquement, si on connaît le format et la clé d’URL (visible dans la colonne « Clé d’URL » du tableau qui liste les pages CMS dans l’interface d’admin (Contenu > [Eléments] Pages)), on n’a pas besoin de faire la manip’ qui suit mais je la décris quand-même à toutes fins utiles.

Pour trouver celui d’une page CMS custom, nous pouvons éditer provisoirement un fichier PHP du core de Magento 2. Rendez-vous dans le fichier vendor/magento/framework/View/Model/Layout/Merge.php et localisez la fonction addHandle(). De là, placez un echo $name; dans le foreach et un echo $handleName; dans le else. Voir ci-dessous:

    /**
     * Add handle(s) to update
     *
     * @param array|string $handleName
     * @return $this
     */
    public function addHandle($handleName)
    {
        if (is_array($handleName)) {
            foreach ($handleName as $name) {
                $this->handles[$name] = 1;
                echo $name;
            }
        } else {
            $this->handles[$handleName] = 1;
            echo $handleName;
        }
        return $this;
    }

/**

* Add handle(s) to update

* @param array|string $handleName

* @return $this

public function addHandle($handleName)

{

if (is_array($handleName)) {

foreach ($handleName as $name) {

$this->handles[$name] = 1;

echo $name;

}

} else {

$this->handles[$handleName] = 1;

echo $handleName;

}

return $this;

}

Ainsi, par exemple, si vous avez créé une page CMS en backoffice avec comme clé d’URL page-de-test, le handle de cette page est: cms_page_view_id_page-de-test.

Ajouter le `handle` de votre page CMS custom dans le fichier étendu `page_types.xml`

Tout est dit dans le titre:

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page_types xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_types.xsd">
    <type id="cms_page_view_id_page-de-test" label="CMS page-de-test"/>
</page_types>

<?xml version="1.0"?>

<!--

/**

* See COPYING.txt for license details.

-->

<page_types xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_types.xsd">

</page_types>

Il ne vous reste plus qu’à lancer un $ n98-magerun2 cache:clean et à vous rendre en admin. Depuis l’interface de création de widgets, ajoutez ou éditez un widget > [Encart de gauche WIDGET] > Propriétés du front office > Section Mise à jour d’agencements > champ « Display on », choisir « Pages génériques > Page spécifiée » > champ « Page », choisir « CMS page-de-test » > champ « Container », choisir une zone qui existe dans votre page CMS (en général « Main Content Top » est présente) > Enregistrez la configuration de votre widget et rendez-vous en front sur votre page CMS custom. Le widget s’affiche! Si il ne s’affiche pas, re-videz vos caches!

Méthode #2

ATTENTION: cette méthode ne fonctionne pas à 100%. Il reste déconseillé de l’utiliser avant d’avoir pris connaissances de ses limites (énoncées ci-dessous).

Les balises HTML saisies ou générées depuis un champ code/WYSIWYG du widget que l’on insère dans un bloc statique sont automatiquement échappées par Magento 2. Ceci signifie que lorsque vous allez saisir <h3>titre</h3>, votre saisie sera réinterprétée en <h3>titre</h3> et affichée comme telle sur les pages de votre site.
Cette « transformation » s’effectue à l’enregistrement du widget, lorsque celui-ci est créé via la création d’un bloc statique. Si vous êtes courageux, vous pouvez repasser sur le code échappé et ré-enregistrer votre bloc statique. Avec une repasse à la main, ça fonctionne. Faut juste en avoir envie…
Si vous voulez utiliser des classes sur vos éléments HTML (<h3 class="heading-three">titre</h3>), votre widget ne s’affichera pas. J’ai tenté en remplaçant les caractères "" par des '' mais sans plus de succès. Peut-être une piste de solution « programmatique » ici (html tags in widgets breaks edit mode), mais selon moi ça devient vraiment overkill de rentrer dans des trucs comme ça…

Créer un bloc statique

Contenu > Blocs > Bouton « Ajouter un nouveau bloc ».
On renseigne les champs obligatoires, puis dans le champ WYSIWYG on clique sur le bouton « Insérer un widget » (pour notre exemple, mettre « [test] static block » dans le champ « Titre du bloc » et « test_static_block » dans le champ « Identifiant »).
De là, on choisit le type de widget qu’on souhaite insérer et on renseigne les paramètres de ce dernier selon nos besoins, puis on clique sur le bouton « Insérer un widget ».
Puis, on clique sur le bouton « Enregistrer » pour enregistrer le bloc.
Dans la liste des blocs, on note l’identifiant du bloc qu’on vient de créer (Bloc « [test] static block » dont l’ID est « test_static_block » dans notre exemple).

~~Voir ici pour résoudre le problème de conversion, par l’éditeur WYSIWYG, des tags en entités HTML (par exemple: <h3> est transformé en <h3>)~~. Y’a pas de solution: passez votre chemin si les limitations observées ne vous permettent pas d’obtenir satisfaction en regard de vos besoins en matière d’exploitation CMS.

Insérer le bloc statique créé précédemment dans une page CMS custom

Contenu > Blocs > Bouton « Ajouter une nouvelle page » ou Choisir > Modifier une page existante.
Ouvrir le volet « Contenu » > si besoin on clique sur le bouton « Afficher/masquer l’éditeur » pour masquer les boutons d’édition du champ WYSIWYG (pour avoir accès à la vue « code »).
Dans la vue code, placer ceci: {{block class="Magento\Cms\Block\Block" block_id="test_static_block"}} (où test_static_block est notre identifiant de bloc statique d’exemple).
De là, on clique sur le bouton « Enregistrer » pour enregistrer le bloc.

A ce stade, notre bloc statique contenant un widget est visible en front sur notre page CMS custom de test (Choisir > Voir dans la liste des pages, au niveau de la page dans laquelle nous venons d’insérer le bloc statique).

Insérer le bloc statique créé précédemment dans une page référencée par Magento 2 (catégorie de produits, …)

Dans notre exemple, nous allons choisir d’afficher notre bloc statique dans une catégorie de produits.

Contenu > Widgets > Bouton « Ajouter un widget ».
Section « Paramètres » > Champ « Type » > choisir « Bloc CMS statique ».
Remplir les autres champs obligatoires de cette section (mettre « [test] widget » dans « Titre du widget » pour suivre notre exemple) et cliquer sur « Continuer ».
Section « Mise à jour d’agencements » > Champ « Display on » > choisir « Catégorie ancrée ».
Champ « Catégories » > cocher le bouton radio « Spécifique à Catégories ».
Champ « Container » > choisir « Main Content Top » (cette zone reste disponible dans à peu près tous les layouts proposés par défaut dans Magento 2, mais si vous utilisez un thème ou que vous travaillez sur un projet qui contient beaucoup de code custom, il vous faudra peut-être sélectionner une autre zone pour voir apparaître votre bloc statique en front).
En-dessous, cliquer sur l’icône « Ouvrir le sélecteur » > cochez les catégories et sous-catégories dans lesquelles votre bloc statique doit apparaître.

Dans l’encart de gauche (« Widget ») > cliquez sur « Options du widget ».
Section « Options du widget » > champ « Bloc » > cliquez sur le bouton « Sélectionnez un bloc… ».
Si vous avez suivi notre tuto à la lettre, le bloc que vous devez sélectionner est: « [test] static block ».
De là, on clique sur le bouton « Enregistrer » pour enregistrer le widget.

A ce stade, notre bloc statique contenant un widget est visible en front sur les pages de catégories/sous-catégories que nous venons de cocher dans la configuration de notre widget.

Résoudre le problème de conversion, par l’éditeur WYSIWYG, des tags en entités HTML

Exemple de problème rencontré: <h3> est transformé en <h3>). Une balise <p> est également ajoutée autour de la déclaration du widget…

Autre exemple:

<p>{{widget type="Sodifrance\Pdv\Block\Widget\Tab" title="Frank" background_image="contenu_editorial/IDM_0068.jpg" body_text="&lt;h3&gt;titre&lt;/h3&gt; &lt;p&gt;paragraphe lorem ipsum dolor sit amet ...&lt;/p&gt; "}}</p>

1	<p>{{widget type="Sodifrance\Pdv\Block\Widget\Tab" title="Frank" background_image="contenu_editorial/IDM_0068.jpg" body_text="<h3>titre</h3> <p>paragraphe lorem ipsum dolor sit amet ...</p> "}}</p>

{{widget type="Sodifrance\Pdv\Block\Widget\Tab" title="Frank" background_image="contenu_editorial/IDM_0068.jpg" body_text="<h3>titre</h3> <p>paragraphe lorem ipsum dolor sit amet ...</p> "}}

1	{{widget type="Sodifrance\Pdv\Block\Widget\Tab" title="Frank" background_image="contenu_editorial/IDM_0068.jpg" body_text="<h3>titre</h3> <p>paragraphe lorem ipsum dolor sit amet ...</p> "}}

Une fois que le markup est repassé à la main, le problème de conversion ne se pose plus, mais il reste l’ajout de l’élément <p> autour du widget!

[Magento 2] Ajouter un sélecteur d’image ou un champ WYSIWYG dans un widget custom

13/01/2020 / admin

Pour ajouter un sélecteur d’image ou un champ WYSIWYG dans un widget custom dans Magento 2, nous allons utiliser l’extension suivante: Useful widget types for Magento 2 like image selector and wysiwyg text editor (un article de l’auteur ici: Using an Image Selector Parameter for Magento Widgets).

Code source zippé – magento2-widget-parameters-master.

Convention: on part du principe qu’on crée un widget pour le vendor Sodifrance et le module Pdv.

Installation de l’extension magento2-widget-parameters via Composer

Documentation officielle de Magento 2 sur comment installer une extension via composer.

Lancer la commande $ composer require dmatthew/magento2-widget-parameters:1.0.1 à la racine de votre projet Magento 2.
Des warnings vont probablement s’afficher. Ne pas en tenir compte.

./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
  - Installing dmatthew/magento2-widget-parameters (1.0.1): Downloading (100%)
Package container-interop/container-interop is abandoned, you should avoid using it. Use psr/container instead.
Package moontoast/math is abandoned, you should avoid using it. Use brick/math instead.
Package phpunit/phpunit-mock-objects is abandoned, you should avoid using it. No replacement was suggested.
Package zendframework/zend-barcode is abandoned, you should avoid using it. Use laminas/laminas-barcode instead.
Package zendframework/zend-captcha is abandoned, you should avoid using it. Use laminas/laminas-captcha instead.
Package zendframework/zend-code is abandoned, you should avoid using it. Use laminas/laminas-code instead.
Package zendframework/zend-config is abandoned, you should avoid using it. Use laminas/laminas-config instead.
Package zendframework/zend-console is abandoned, you should avoid using it. Use laminas/laminas-console instead.
Package zendframework/zend-crypt is abandoned, you should avoid using it. Use laminas/laminas-crypt instead.
Package zendframework/zend-db is abandoned, you should avoid using it. Use laminas/laminas-db instead.
Package zendframework/zend-di is abandoned, you should avoid using it. Use laminas/laminas-di instead.
Package zendframework/zend-diactoros is abandoned, you should avoid using it. Use laminas/laminas-diactoros instead.
Package zendframework/zend-escaper is abandoned, you should avoid using it. Use laminas/laminas-escaper instead.
Package zendframework/zend-eventmanager is abandoned, you should avoid using it. Use laminas/laminas-eventmanager instead.
Package zendframework/zend-feed is abandoned, you should avoid using it. Use laminas/laminas-feed instead.
Package zendframework/zend-filter is abandoned, you should avoid using it. Use laminas/laminas-filter instead.
Package zendframework/zend-form is abandoned, you should avoid using it. Use laminas/laminas-form instead.
Package zendframework/zend-http is abandoned, you should avoid using it. Use laminas/laminas-http instead.
Package zendframework/zend-hydrator is abandoned, you should avoid using it. Use laminas/laminas-hydrator instead.
Package zendframework/zend-i18n is abandoned, you should avoid using it. Use laminas/laminas-i18n instead.
Package zendframework/zend-inputfilter is abandoned, you should avoid using it. Use laminas/laminas-inputfilter instead.
Package zendframework/zend-json is abandoned, you should avoid using it. Use laminas/laminas-json instead.
Package zendframework/zend-loader is abandoned, you should avoid using it. Use laminas/laminas-loader instead.
Package zendframework/zend-log is abandoned, you should avoid using it. Use laminas/laminas-log instead.
Package zendframework/zend-mail is abandoned, you should avoid using it. Use laminas/laminas-mail instead.
Package zendframework/zend-math is abandoned, you should avoid using it. Use laminas/laminas-math instead.
Package zendframework/zend-mime is abandoned, you should avoid using it. Use laminas/laminas-mime instead.
Package zendframework/zend-modulemanager is abandoned, you should avoid using it. Use laminas/laminas-modulemanager instead.
Package zendframework/zend-mvc is abandoned, you should avoid using it. Use laminas/laminas-mvc instead.
Package zendframework/zend-psr7bridge is abandoned, you should avoid using it. Use laminas/laminas-psr7bridge instead.
Package zendframework/zend-serializer is abandoned, you should avoid using it. Use laminas/laminas-serializer instead.
Package zendframework/zend-server is abandoned, you should avoid using it. Use laminas/laminas-server instead.
Package zendframework/zend-servicemanager is abandoned, you should avoid using it. Use laminas/laminas-servicemanager instead.
Package zendframework/zend-session is abandoned, you should avoid using it. Use laminas/laminas-session instead.
Package zendframework/zend-soap is abandoned, you should avoid using it. Use laminas/laminas-soap instead.
Package zendframework/zend-stdlib is abandoned, you should avoid using it. Use laminas/laminas-stdlib instead.
Package zendframework/zend-text is abandoned, you should avoid using it. Use laminas/laminas-text instead.
Package zendframework/zend-uri is abandoned, you should avoid using it. Use laminas/laminas-uri instead.
Package zendframework/zend-validator is abandoned, you should avoid using it. Use laminas/laminas-validator instead.
Package zendframework/zend-view is abandoned, you should avoid using it. Use laminas/laminas-view instead.
Writing lock file
Generating autoload files

./composer.json has been updated

Loading composer repositories with package information

Updating dependencies (including require-dev)

Package operations: 1 install, 0 updates, 0 removals

- Installing dmatthew/magento2-widget-parameters (1.0.1): Downloading (100%)

Package container-interop/container-interop is abandoned, you should avoid using it. Use psr/container instead.

Package moontoast/math is abandoned, you should avoid using it. Use brick/math instead.

Package phpunit/phpunit-mock-objects is abandoned, you should avoid using it. No replacement was suggested.

Package zendframework/zend-barcode is abandoned, you should avoid using it. Use laminas/laminas-barcode instead.

Package zendframework/zend-captcha is abandoned, you should avoid using it. Use laminas/laminas-captcha instead.

Package zendframework/zend-code is abandoned, you should avoid using it. Use laminas/laminas-code instead.

Package zendframework/zend-config is abandoned, you should avoid using it. Use laminas/laminas-config instead.

Package zendframework/zend-console is abandoned, you should avoid using it. Use laminas/laminas-console instead.

Package zendframework/zend-crypt is abandoned, you should avoid using it. Use laminas/laminas-crypt instead.

Package zendframework/zend-db is abandoned, you should avoid using it. Use laminas/laminas-db instead.

Package zendframework/zend-di is abandoned, you should avoid using it. Use laminas/laminas-di instead.

Package zendframework/zend-diactoros is abandoned, you should avoid using it. Use laminas/laminas-diactoros instead.

Package zendframework/zend-escaper is abandoned, you should avoid using it. Use laminas/laminas-escaper instead.

Package zendframework/zend-eventmanager is abandoned, you should avoid using it. Use laminas/laminas-eventmanager instead.

Package zendframework/zend-feed is abandoned, you should avoid using it. Use laminas/laminas-feed instead.

Package zendframework/zend-filter is abandoned, you should avoid using it. Use laminas/laminas-filter instead.

Package zendframework/zend-form is abandoned, you should avoid using it. Use laminas/laminas-form instead.

Package zendframework/zend-http is abandoned, you should avoid using it. Use laminas/laminas-http instead.

Package zendframework/zend-hydrator is abandoned, you should avoid using it. Use laminas/laminas-hydrator instead.

Package zendframework/zend-i18n is abandoned, you should avoid using it. Use laminas/laminas-i18n instead.

Package zendframework/zend-inputfilter is abandoned, you should avoid using it. Use laminas/laminas-inputfilter instead.

Package zendframework/zend-json is abandoned, you should avoid using it. Use laminas/laminas-json instead.

Package zendframework/zend-loader is abandoned, you should avoid using it. Use laminas/laminas-loader instead.

Package zendframework/zend-log is abandoned, you should avoid using it. Use laminas/laminas-log instead.

Package zendframework/zend-mail is abandoned, you should avoid using it. Use laminas/laminas-mail instead.

Package zendframework/zend-math is abandoned, you should avoid using it. Use laminas/laminas-math instead.

Package zendframework/zend-mime is abandoned, you should avoid using it. Use laminas/laminas-mime instead.

Package zendframework/zend-modulemanager is abandoned, you should avoid using it. Use laminas/laminas-modulemanager instead.

Package zendframework/zend-mvc is abandoned, you should avoid using it. Use laminas/laminas-mvc instead.

Package zendframework/zend-psr7bridge is abandoned, you should avoid using it. Use laminas/laminas-psr7bridge instead.

Package zendframework/zend-serializer is abandoned, you should avoid using it. Use laminas/laminas-serializer instead.

Package zendframework/zend-server is abandoned, you should avoid using it. Use laminas/laminas-server instead.

Package zendframework/zend-servicemanager is abandoned, you should avoid using it. Use laminas/laminas-servicemanager instead.

Package zendframework/zend-session is abandoned, you should avoid using it. Use laminas/laminas-session instead.

Package zendframework/zend-soap is abandoned, you should avoid using it. Use laminas/laminas-soap instead.

Package zendframework/zend-stdlib is abandoned, you should avoid using it. Use laminas/laminas-stdlib instead.

Package zendframework/zend-text is abandoned, you should avoid using it. Use laminas/laminas-text instead.

Package zendframework/zend-uri is abandoned, you should avoid using it. Use laminas/laminas-uri instead.

Package zendframework/zend-validator is abandoned, you should avoid using it. Use laminas/laminas-validator instead.

Package zendframework/zend-view is abandoned, you should avoid using it. Use laminas/laminas-view instead.

Writing lock file

Generating autoload files

app/code/Sodifrance/Pdv/etc/widget.xml

Nous allons déclarer un widget contenant 3 paramètres:

un titre
une image issue de la « médiathèque » de Magento 2
un champ WYSIWYG (qui permet d’utiliser du code HTML pour la mise en page, ou d’inclure un bloc statique)

<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
    <widget class="Sodifrance\Pdv\Block\Widget\Tab" id="tab_widget">
        <label>Tab Widget</label>
        <description>Tab Widget for Magento 2</description>
        <parameters>
            <parameter name="title" xsi:type="text" required="true" visible="true" sort_order="10">
                <label>Label</label>
            </parameter>
            <parameter xsi:type="block" name="background_image" visible="true" sort_order="10">
                <label translate="true">Image</label>
                <block class="Dmatthew\WidgetParameters\Block\Adminhtml\Widget\Type\ImageChooser">
                    <data>
                        <item name="button" xsi:type="array">
                            <item name="open" xsi:type="string">Choose Image...</item>
                        </item>
                    </data>
                </block>
            </parameter>
            <parameter xsi:type="block" name="body_text" visible="true" sort_order="10">
                <label translate="true">Body Text</label>
                <block class="Dmatthew\WidgetParameters\Block\Adminhtml\Widget\Type\Wysiwyg" />
            </parameter>
        </parameters>
    </widget>
</widgets>

<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">

<label>Tab Widget</label>

<description>Tab Widget for Magento 2</description>

<label>Label</label>

</parameter>

<label translate="true">Image</label>

<data>

<item name="open" xsi:type="string">Choose Image...</item>

</item>

</data>

</block>

</parameter>

</parameter>

</parameters>

</widget>

</widgets>

app/code/Sodifrance/Pdv/Block/Widget/Tab.php

Il a fallu créer une fonction pour permettre de récupérer l’URL de l’image uploadée.

<?php
namespace Sodifrance\Pdv\Block\Widget;

use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface;

class Tab extends Template implements BlockInterface {

    protected $_template = "widget/tab.phtml";

    /**
     * @var \Magento\Cms\Helper\Wysiwyg\Images
     */
    protected $helper;

    public function __construct(Template\Context $context, \Magento\Cms\Helper\Wysiwyg\Images $helper, array $data = [])
    {
        $this->helper = $helper;
        parent::__construct($context, $data);
    }

    public function getTabWidgetMediaUrl()
    {
        return
            $this->helper->getBaseUrl() .
            $this->getData('background_image');
    }
}

<?php

namespace Sodifrance\Pdv\Block\Widget;

use Magento\Framework\View\Element\Template;

use Magento\Widget\Block\BlockInterface;

class Tab extends Template implements BlockInterface {

protected $_template = "widget/tab.phtml";

/**

* @var \Magento\Cms\Helper\Wysiwyg\Images

protected $helper;

public function __construct(Template\Context $context, \Magento\Cms\Helper\Wysiwyg\Images $helper, array $data = [])

{

$this->helper = $helper;

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

}

public function getTabWidgetMediaUrl()

{

return

$this->helper->getBaseUrl() .

$this->getData('background_image');

}

app/code/Sodifrance/Pdv/view/frontend/templates/widget/tab.phtml

Le template PHTML.

<?php
/** \Sodifrance\Pdv\Block\Widget\Tab $block */
?>

<div class="widget widget-tab">
    <div class="widget-tab-label cms-blockHeading-2">
        <h2 class="heading">
            <?= $block->escapeHtml($block->getData('title')) ?>
        </h2>
    </div>
    <div class="widget-tab-content">
        <div class="widget-tab-left-col">
            <img src="<?= $block->getTabWidgetMediaUrl() ?>" alt="*" class="img-fluid widget-tab-image" />
        </div>
        <div class="widget-tab-right-col">
            <?= $block->getData('body_text') ?>
        </div>
    </div>
</div>

<?php

/** \Sodifrance\Pdv\Block\Widget\Tab $block */

<?= $block->escapeHtml($block->getData('title')) ?>

</h2>

</div>

<img src="<?= $block->getTabWidgetMediaUrl() ?>" alt="*" class="img-fluid widget-tab-image" />

</div>

<?= $block->getData('body_text') ?>

</div>

Flusher les caches:

$ n98-magerun2 cache:flush

1	$ n98-magerun2 cache:flush

Si problèmes…

Voir aussi: [Magento 2] Créer un widget custom et l’utiliser pour afficher un bloc statique dans une catégorie unique du catalogue.

[Magento 2] Créer un widget custom et l’utiliser pour afficher un bloc statique dans une catégorie unique du catalogue

10/01/2020 / admin

Créer un widget custom dans Magento 2 peut être utile, notamment car cette solution permet de placer un bloc statique de manière beaucoup plus sélective (on peut cibler une catégorie unique du catalogue par exemple) et depuis l’interface d’admin.

Dans ce billet:

Je me suis inspiré de la doc officielle et d’un autre tuto pour arriver à mes fins, la doc officielle étant incomplète et les exemples de code erronés!

On part du principe qu’on crée un widget pour le vendor Sodifrance et le module Pdv.

Initialiser le widget

app/code/Sodifrance/Pdv/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Sodifrance_Pdv',
    __DIR__
);

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

\Magento\Framework\Component\ComponentRegistrar::MODULE,

'Sodifrance_Pdv',

__DIR__

);

app/code/Sodifrance/Pdv/etc/widget.xml

<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
    <widget class="Sodifrance\Pdv\Block\Widget\Test" id="pdv_test_widget">
        <label>Test Widget</label>
        <description>This is a test widget!!!</description>
        <parameters>
            <parameter name="title" xsi:type="text" required="true" visible="true" sort_order="10">
                <label>Label</label>
            </parameter>
            <parameter name="size" xsi:type="select" visible="true" required="true" sort_order="20">
                <label translate="true">Size</label>
                <options>
                    <option name="s" value="S">
                        <label>S</label>
                    </option>
                    <option name="m" value="M" selected="true">
                        <label>M</label>
                    </option>
                    <option name="l" value="L">
                        <label>L</label>
                    </option>
                </options>
            </parameter>
        </parameters>
    </widget>
</widgets>

<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">

<label>Test Widget</label>

<description>This is a test widget!!!</description>

<label>Label</label>

</parameter>

</option>

</option>

</option>

</options>

</parameter>

</parameters>

</widget>

</widgets>

Créer un template pour le widget

app/code/Sodifrance/Pdv/view/frontend/templates/widget/test.phtml

<?php
/** \Sodifrance\Pdv\Block\Widget\Test $block */
?>
<h3><?= $block->escapeHtml($block->getData('title')) ?></h3>
<h3><?= $block->escapeHtml(__('Size:')) ?> <?= $block->escapeHtml($block->getData('size')) ?></h3>

<?php

/** \Sodifrance\Pdv\Block\Widget\Test $block */

<h3><?= $block->escapeHtml($block->getData('title')) ?></h3>

<h3><?= $block->escapeHtml(__('Size:')) ?> <?= $block->escapeHtml($block->getData('size')) ?></h3>

Créer un block pour le widget

app/code/Sodifrance/Pdv/Block/Widget/Test.php

<?php
namespace Sodifrance\Pdv\Block\Widget;

use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface;

class Test extends Template implements BlockInterface {

    protected $_template = "widget/test.phtml";

}

<?php

namespace Sodifrance\Pdv\Block\Widget;

use Magento\Framework\View\Element\Template;

use Magento\Widget\Block\BlockInterface;

class Test extends Template implements BlockInterface {

protected $_template = "widget/test.phtml";

}

Ajouter une dépendance au module Magento_Widget dans le fichier `module.xml`

app/code/Sodifrance/Pdv/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Sodifrance_Pdv" setup_version="1.0.0">
        <sequence>
            <module name="MGS_ThemeSettings" />
            <module name="Magento_Widget" />
        </sequence>
    </module>
</config>

<?xml version="1.0"?>

</sequence>

</module>

</config>

Commandes à exécuter

Appliquer la dépendance de module déclarée dans le fichier module.xml:

$ n98-magerun2 module:disable Sodifrance_Pdv
$ n98-magerun2 module:enable Sodifrance_Pdv

1 2	$ n98-magerun2 module:disable Sodifrance_Pdv $ n98-magerun2 module:enable Sodifrance_Pdv

Flusher les caches:

$ n98-magerun2 cache:flush

1	$ n98-magerun2 cache:flush

Accès BO à votre widget custom

Contenu > Widgets > Ajouter un widget
Choisir le type de widget dans la liste déroulante: « Test Widget »

Pour afficher un widget dans une seule catégorie du catalogue:

Contenu > Widgets > Ajouter un widget
Choisir le type de widget et le thème de design
Remplir les champs obligatoires de la section « Propriétés du front office »
Dans la section « Mises à jour d’agencements » > Ajouter une mise à jour d’agencements
Display on: catégorie ancrée
Catégories: Spécifique à Categories
Cliquer sur l’icône « Ouvrir le sélecteur »
Déplier l’arbre de catégories/sous-catégories et cocher la ou les catégories dans laquelle le widget doit s’afficher; il ne s’affichera pas dans les autres

[Magento 2] Inclure un bloc statique depuis un champ WYSIWYG (nouvelle fenêtre).

Une liste de ressources en ligne intéressantes sur le sujet

Dépôts Git de démonstration, proof of concepts, etc …

Magento 2: Widgets – This module is to demonstrate the different fields available for Magento 2 widgets. The idea is to use this as a base or reference for creating your own widgets. There is an example widget provided which has all the possible field types available.

Tutoriels

inchoo.net – Magento 2 custom widget. Now we will see how we can create a custom one, or even better, how to extend the core one. For this example I picked default catalog product listing widget that I will extend with sorting fields for better customization of this widget.

[Magento 2] Exploiter le widget javascript jQuery natif Accordion dans le fichier PHTML des filtres produit (page category)

16/10/2019 / admin

Note: ce widget Accordion fait partie d’une collection étendue de widgets fournis de base par Magento 2 (à ne pas confondre avec la bibliothèque UI Magento 2, fournie de base également, et qu’il convient de connaître aussi.

Pour ce tuto, nous allons afficher les différentes familles de tri produits (catégorie, taille, activity, color, erin recommends, genre, material, nouveau, prix, etc…) sous forme d’accordéons. De base, ils s’affichent tous ouverts, y-compris en vue Mobile ce qui force l’utilisateur à scroller bas dans la page avant de voir apparaître le premier produit. Le fonctionnalités voulues pour ce accordéon:

tous les accordéons (différentes familles de tri) sont ouverts au chargement de la page
plusieurs accordéons peuvent rester ouverts simultanément

(Note pour plus tard: il peut être intéressant, dans le cadre de la découverte des media-queries côté JS, d’initialiser ce widget avec des options différentes en fonction de l’affichage mobile/desktop).

A noter: il existe plusieurs méthodes pour initialiser du code javascript dans une vue dans Magento 2. Nous allons nous concentrer sur deux d’entre-elles qui ne sont ni meilleures, ni moins bonnes que les autres.

Imperative notation

En initialisant notre widget directement dans un fichier *.phtml, entre balises <script type="text/javascript">.

Commencer par éditer le fichier *.phtml app\design\frontend\<Vendor_name>\<theme_name>\Magento_LayeredNavigation\templates\layer\view.phtml qui constitue la base de la vue des différents filtres. Notez bien l’ajout, par rapport à la vue que nous surchargeons, des attributs data-role="collapsible", data-role="trigger" et data-role="content" respectivement placés sur les éléments dt, a et dd, ainsi que de la classe filter-options-collapsible-trigger placée sur le nouvellement ajouté élément a.

<dl class="filter-options" id="narrow-by-list">
    <?php $wrapOptions = true; endif; ?>
    <?php if ($filter->getItemsCount()): ?>
        <dt data-role="collapsible" aria-level="3" class="filter-options-title">
            <a class="filter-options-collapsible-trigger" href="#" data-role="trigger">
                <?= $block->escapeHtml(__($filter->getName())) ?>
            </a>
        </dt>
        <dd data-role="content" class="filter-options-content">
            <?= /* @escapeNotVerified */ $block->getChildBlock('renderer')->render($filter) ?>
        </dd>
    <?php endif; ?>
    <?php endforeach; ?>
    <?php if ($wrapOptions): ?>
</dl>

<?php $wrapOptions = true; endif; ?>

<?php if ($filter->getItemsCount()): ?>

<?= $block->escapeHtml(__($filter->getName())) ?>

</a>

</dt>

<?= /* @escapeNotVerified */ $block->getChildBlock('renderer')->render($filter) ?>

</dd>

<?php endif; ?>

<?php endforeach; ?>

<?php if ($wrapOptions): ?>

</dl>

Le widget s’initialise ensuite comme suit avec requireJS (code placé dans le même fichier view.phtml, immédiatement après la ligne <?php if ($block->canShowBlock()): ?>):

<script type="text/javascript">
    require([
        'jquery',
        'accordion'], function ($) {
        $("#narrow-by-list").accordion({
            openedState: 'active', // [option] ajoute une class 'active' aux éléments ouverts
            collapsible: true,
            multipleCollapsible: true // [option] plusieurs accordéons peuvent être ouverts simultanément
        }).accordion("activate"); // [méthode] ouvre par défaut TOUS les accordéons au chargement de la page

        $('.filter-options-collapsible-trigger', '#narrow-by-list').on("click", function(e){
            e.preventDefault();
        });
    });
</script>

require([

'jquery',

'accordion'], function ($) {

$("#narrow-by-list").accordion({

openedState: 'active', // [option] ajoute une class 'active' aux éléments ouverts

collapsible: true,

multipleCollapsible: true // [option] plusieurs accordéons peuvent être ouverts simultanément

}).accordion("activate"); // [méthode] ouvre par défaut TOUS les accordéons au chargement de la page

$('.filter-options-collapsible-trigger', '#narrow-by-list').on("click", function(e){

e.preventDefault();

});

</script>

Declarative notation

Le widget va s’initialiser sans avoir recours à un require déclaré dans une balise <script />, par de biais d’un attribut data-mage-init placé directement sur l’élément à partir duquel nous venons précédemment d’initialiser notre widget à la manière de jQuery.

<dl class="filter-options" id="narrow-by-list" data-mage-init='{
        "accordion":{
            "openedState": "active",
            "collapsible": "true",
            "multipleCollapsible": "true"
        }}'>
    <?php $wrapOptions = true; endif; ?>
    <?php if ($filter->getItemsCount()): ?>
        <dt data-role="collapsible" aria-level="3" class="filter-options-title">
            <a class="filter-options-collapsible-trigger" href="#" data-role="trigger">
                <?= $block->escapeHtml(__($filter->getName())) ?>
            </a>
        </dt>
        <dd data-role="content" class="filter-options-content">
            <?= /* @escapeNotVerified */ $block->getChildBlock('renderer')->render($filter) ?>
        </dd>
    <?php endif; ?>
    <?php endforeach; ?>
    <?php if ($wrapOptions): ?>
</dl>

<dl class="filter-options" id="narrow-by-list" data-mage-init='{

"accordion":{

"openedState": "active",

"collapsible": "true",

"multipleCollapsible": "true"

}}'>

<?php $wrapOptions = true; endif; ?>

<?php if ($filter->getItemsCount()): ?>

<?= $block->escapeHtml(__($filter->getName())) ?>

</a>

</dt>

<?= /* @escapeNotVerified */ $block->getChildBlock('renderer')->render($filter) ?>

</dd>

<?php endif; ?>

<?php endforeach; ?>

<?php if ($wrapOptions): ?>

</dl>

Dans les deux cas on n’oublie pas de lancer un cache:clean en console!

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:

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

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:

Etendre le composant UI Tabs pour ajouter un effet de bordure animée sous les onglets:

Cas où l’affichage du champ caché dépend de l’activation de plusieurs autres champs

Méthode #1

Etendre un fichier page_types.xml dans un module spécifique

Trouver le handle d’une page CMS custom

Ajouter le handle de votre page CMS custom dans le fichier étendu page_types.xml

Méthode #2

Créer un bloc statique

Insérer le bloc statique créé précédemment dans une page CMS custom

Insérer le bloc statique créé précédemment dans une page référencée par Magento 2 (catégorie de produits, …)

Résoudre le problème de conversion, par l’éditeur WYSIWYG, des tags en entités HTML

Installation de l’extension magento2-widget-parameters via Composer

app/code/Sodifrance/Pdv/etc/widget.xml

app/code/Sodifrance/Pdv/Block/Widget/Tab.php

app/code/Sodifrance/Pdv/view/frontend/templates/widget/tab.phtml

Flusher les caches:

Si problèmes…

Créer un widget custom dans Magento 2

Initialiser le widget

Créer un template pour le widget

Créer un block pour le widget

Ajouter une dépendance au module Magento_Widget dans le fichier module.xml

Commandes à exécuter

Accès BO à votre widget custom

Pour afficher un widget dans une seule catégorie du catalogue:

Ajouter un bloc statique dans un widget custom Magento 2

Une liste de ressources en ligne intéressantes sur le sujet

Dépôts Git de démonstration, proof of concepts, etc …

Tutoriels

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

Etendre un fichier `page_types.xml` dans un module spécifique

Trouver le `handle` d’une page CMS custom

Ajouter le `handle` de votre page CMS custom dans le fichier étendu `page_types.xml`

Ajouter une dépendance au module Magento_Widget dans le fichier `module.xml`