Étiquette : requireJS

[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] 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] Un plugin jQuery custom pour rendre cliquable une zone complète plutôt que le seul lien qu’elle renferme avec x-magento-init et requireJS

16/06/2020 / admin

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

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

Utilisation dans un fichier PHTML:

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

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

// {

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

// ".product-item": {

// // Alias de ce plug-in

// "zoneClick": {

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

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

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

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

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

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

// }

// </script>

Détail des fichiers à mettre en place:

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

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

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

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

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

define([

"jquery"

], function($) {

"use strict";

return function (options, element) {

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

let $this = $(this),

$clickedElement = $(event.target),

excludeAmount = options.exclude.length,

testExclude = [];

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

let i;

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

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

testExclude.push(1);

} else {

// nada ...

}

if (testExclude.length > 0) {

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

testExclude = [];

} else {

// Sinon, on redirige vers la page cible.

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

return false;

}

});

};

});

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

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

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

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

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

var config = {

map: {

"*": {

zoneClick: 'js/zone-click'

}

};

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

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

{

".product-item": {

"zoneClick": {

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

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

}

</script>

[Magento 2] Comment inclure et utiliser un fichier JS custom avec requireJS

29/10/2019 / admin

Source: How to include and use custom js file with require js in magento2.

Source: Four Ways to Add JavaScript to Magento 2.

En-dehors d’un thème, en créant un module

Se référer à la documentation officielle de Magento 2 pour voir comment créer un nouveau module. Dans mon exemple, le vendor s’appelle Naked et le module s’appelle HelloWorld.

Dans app/code/Naked/HelloWorld/ créer une arborescence de dossiers et les trois fichiers suivants:

view/frontend/requirejs-config.js
view/frontend/web/js/hello-world.js
view/frontend/web/js/methods.js

view/frontend/requirejs-config.js

var config = {

    // You can also set the map property and define the prefixes for various modules.
    // In future, we can use these prefixes to connect the required JS modules in other modules.
    map: {
        '*': {
            helloWorld: 'Naked_HelloWorld/js/hello-world',
            methods: 'Naked_HelloWorld/js/methods',
        }
    },

    // 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: [
        'Naked_HelloWorld/js/hello-world',
    ]
};

var config = {

// You can also set the map property and define the prefixes for various modules.

// In future, we can use these prefixes to connect the required JS modules in other modules.

map: {

'*': {

helloWorld: 'Naked_HelloWorld/js/hello-world',

methods: 'Naked_HelloWorld/js/methods',

}

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

'Naked_HelloWorld/js/hello-world',

]

};

Les scripts déclarés sous la variable deps vont fonctionner immédiatement et sur toutes les pages du site. Inutile d’initialiser quoi que ce soit dans un fichier *.phtml.

view/frontend/web/js/hello-world.js

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

    console.log('hello world!');

    $('a.logo').on('click', function(e){
        e.preventDefault();
        methods.showAlert('Logo clicked!');
    });
});

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

"use strict";

console.log('hello world!');

$('a.logo').on('click', function(e){

e.preventDefault();

methods.showAlert('Logo clicked!');

});

view/frontend/web/js/methods.js

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

    var methods = {};

    methods.showAlert = function(arg) {
        alert(arg);
    }

    return methods;

});

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

var methods = {};

methods.showAlert = function(arg) {

alert(arg);

}

return methods;

});

[Magento 2] Ajouter le framework Foundation 6 for sites dans un thème et rendre ses widgets javascript disponibles avec RequireJS

22/10/2019 / admin

Pour ce tuto, nous allons intégrer la version 6.5.3 de Foundation for sites. Le pre-processing des assets se fait avec Webpack et Gulp (contre Grunt dans Magento 2) et les fichiers source sont fournis au format SASS pour les styles et ES5, jQuery (version 3+) pour les javascripts, ce qui les rend inexploitables de base avec Magento 2 (LESS pour les styles et version de jQuery 1.12 pour les javascripts). Nous utiliserons donc les versions déjà compilées (CSS et javascript « vanilla ») qui se trouvent dans le dossier dist du repository Git.

Les styles

Créer un dossier app/design/<Vendor_name>/<theme_name>/web/css/vendor/foundation/ dans lequel nous allons copier/coller l’intégralité des fichiers se trouvant dans le chemin dist/css du Git.

Dans app/design/<Vendor_name>/<theme_name>/web/css/source/_theme.less:

/**
 * Foundation for Sites by ZURB
 * Version 6.5.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
@import "../vendor/foundation/foundation.css";

/**

* Foundation for Sites by ZURB

* Version 6.5.3

* foundation.zurb.com

* Licensed under MIT Open Source

@import "../vendor/foundation/foundation.css";

A noter: le code CSS final du framework n’étant pas éclaté en différents fichiers, il faudra probablement que vous ré-éditiez ce fichier pour retirer les styles qui entrent en conflit avec ceux de votre thème. Vous pouvez importer foundation.min.css si vous souhaitez conserver le fichier en l’état.

Les scripts

Joindre l’intégralité des widgets

Solution la plus simple: la version minifiée dans l’intégralité du code JS du framework tient en 171ko.

Créer un dossier app/design/<Vendor_name>/<theme_name>/web/js/vendor/foundation/ dans lequel nous allons copier/coller l’intégralité des fichiers se trouvant dans le chemin dist/js du Git.

Dans app/design/<Vendor_name>/<theme_name>/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: {
        'foundation': 'js/vendor/foundation/foundation.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).
    // Exports: if the library is not AMD aware, you need to tell requirejs what
    // to look for so it knows the script has loaded correctly. You can do this with an
    // "exports" entry in your shim. The value must be a variable defined within
    // the library.
    shim: {
        'foundation': {
            deps: ['jquery'],
            exports: 'Foundation'
        }
    }

};

var config = {

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

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

paths: {

'foundation': 'js/vendor/foundation/foundation.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).

// Exports: if the library is not AMD aware, you need to tell requirejs what

// to look for so it knows the script has loaded correctly. You can do this with an

// "exports" entry in your shim. The value must be a variable defined within

// the library.

shim: {

'foundation': {

deps: ['jquery'],

exports: 'Foundation'

}

};

Dans un fichier *.phtml (ou *.js pour la partie entre <script />):

<script type="text/javascript">
    require([
        'jquery',
        'foundation'
    ], function($, Foundation) {
        'use strict';

        // console.log(Foundation);
        var $toggler = new Foundation.Toggler($('#menuBar'));
    });
</script>

<p><a data-toggle="menuBar">Expand!</a></p>
<ul class="menu" id="menuBar" data-toggler=".expanded">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
</ul>

require([

'jquery',

'foundation'

], function($, Foundation) {

'use strict';

// console.log(Foundation);

var $toggler = new Foundation.Toggler($('#menuBar'));

});

</script>

<p><a data-toggle="menuBar">Expand!</a></p>

<li><a href="#">Three</a></li>

</ul>

Problématiques:

Modifier un paramètre du composant et inclure une chaîne de traduction i18n

Avant d’instancier un nouvel objet, on modifier un ou plusieurs paramètres par défaut. La traduction se fait par la méthode PHP de Magento 2 (et pas par la méthode Javascript).

Foundation.Drilldown.defaults.backButton = '<li class="js-drilldown-back"><a tabindex="0"><?php echo __('Back') ?></a></li>';
var $drilldown = new Foundation.Drilldown($('#navigation-mobile-drilldown'));

1 2	Foundation.Drilldown.defaults.backButton = '<li class="js-drilldown-back"><a tabindex="0"><?php echo __('Back') ?></a></li>'; var $drilldown = new Foundation.Drilldown($('#navigation-mobile-drilldown'));

[RequireJS] Astuces, bonnes pratiques

21/10/2019 / admin

Apprendre les bases

Doc officielle

La documentation officielle de RequireJS avec un chapitre sur les erreurs les plus communes.

Tutoriels

RequireJS et le code JavaScript modulaire (tutoriel en français).

Tuto très clair de codedamn sur YouTube et code source. Permet d’aborder les bases avec:

Le fichier de config
La fonction require
La fonction define
AMD et les modules

Troubleshooting

La console me remonte cette erreur: require.js:166 Uncaught Error: Mismatched anonymous define(): dans le code source, remplacer define par require!

[Magento 2] Importer les points de rupture CSS LESS pour une exploitation avec javascript jQuery

18/10/2019 / admin

Source: Importing CSS Breakpoints Into JavaScript (adapté pour Magento 2).

!important: ce tuto demande à créer/modifier un certain nombre de fichiers. Le respect de l’organisation de ces derniers dans l’arborescence de votre thème est capital pour le bon fonctionnement de la fonctionnalité présentée. Vous pourrez bien-sûr modifier les emplacements des fichiers, mais pensez dans ce cas à mettre à jour tous les chemins en conséquence.

L’arborescence utilisée dans le code source fourni est mise à plat plus bas.

Intérêt pour le développeur Magento 2 d’importer les breakpoints LESS pour une exploitation avec javascript?

Magento 2 permet, par le biais de l’outil matchMedia.js, de déclencher du code javascript/jQuery en fonction d’un point de rupture. Extrait de la documentation officielle à ce sujet:

 /*...*/
    mediaCheck({
        media: '(min-width: 768px)',
        // Switch to Desktop Version
        entry: function () {
            /* The function that toggles page elements from desktop to mobile mode is called here */
        },
        // Switch to Mobile Version
        exit: function () {
            /* The function that toggles page elements from mobile to desktop mode is called here*/
        }
    }); /*...*/

/*...*/

mediaCheck({

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

// Switch to Desktop Version

entry: function () {

/* The function that toggles page elements from desktop to mobile mode is called here */

// Switch to Mobile Version

exit: function () {

/* The function that toggles page elements from mobile to desktop mode is called here*/

}

}); /*...*/

On remarque que la valeur du point de rupture est renseignée de manière statique (768px): media: '(min-width: 768px)'. Ce procédé a ses limites. Le jour où la valeur de ce breakpoint est modifiée dans la feuille de style, il faudra mettre à jour à la main toutes les déclarations faites avec matchMedia.

Le but est donc de rendre dynamique la valeur de media:.

Partie LESS:

Si il n’existe pas encore dans votre thème, créer un dossier app/design/frontend/<Vendor_name>/<theme_name>/web/css/vendor/less-curious/ et y placer, à la racine, l’intégralité des fichiers disponibles sur ce repository Git.

A ce stade, il est surtout important que les fichiers for.less et for-each.less soient accessibles respectivement depuis les chemins suivants:

app/design/frontend/<Vendor_name>/<theme_name>/web/css/vendor/less-curious/src/for.less
app/design/frontend/<Vendor_name>/<theme_name>/web/css/vendor/less-curious/src/for-each.less
Note: le repo Git pouvant disparaître du jour au lendemain, un backup au format ZIP est disponible ici 😉.
Note #2: si vous regardez le code source du projet less-curious, vous remarquerez peut-être que ce dernier est déprécié et que l’auteur fournit un lien vers une version plus actuelle, full JS à intégrer avec un pré-processeur comme Grunt. Problème: j’ai eu beau suivre les bonnes pratiques d’intégration d’un plug-in pour grunt-contrib-less dans le système mis en place dans Magento 2, je n’ai rien réussi à compiler… UPDATE (pas testé) 05/11/2019: la solution se situe peut-être dans la mise en place d’une configuration custom de Grunt.

Si il n’existe pas encore dans votre thème, créer un dossier app/design/frontend/<Vendor_name>/<theme_name>/web/css/source/devtools/.

Créer le fichier app/design/frontend/<Vendor_name>/<theme_name>/web/css/source/devtools/_js-mediaqueries.less et placez-y le code ci-dessous:

@import "../../vendor/less-curious/src/for.less";
//@import "../../vendor/less-curious/src/for-each.less";

body:before {
  content: "smartphone";
  display: none; // Prevent from displaying.
}

// Retrieve default breakpoints values from here:
// "lib/web/css/source/lib/variables/_responsive.less"
// (also, if any, add your custom breakpoints to the list too)
@breakpoints:
        screen__xxs @screen__xxs,
        screen__xs @screen__xs,
        screen__s @screen__s,
        screen__m @screen__m,
        screen__l @screen__l,
        screen__xl @screen__xl;

.for(@breakpoints); .-each(@value) {
  @breakpoint-key:  extract(@value, 1);
  @media (min-width: extract(@value, 2)) {
    body:before {
      content: "@{breakpoint-key}";
    }
  }
}



// Activate for front-end hints
.jsBreakpoints-hints {
  position: fixed;
  z-index: 99999;
  top: 10px;
  right: 10px;

  &.is-active {
    display: block;
  }

  &:hover {
    cursor: pointer;
  }

  .breakpoint {
    background-color: #ca322c;
    color: white;
    display: inline-block;
    padding: 2px 4px;
  }
}

@import "../../vendor/less-curious/src/for.less";

//@import "../../vendor/less-curious/src/for-each.less";

body:before {

content: "smartphone";

display: none; // Prevent from displaying.

}

// Retrieve default breakpoints values from here:

// "lib/web/css/source/lib/variables/_responsive.less"

// (also, if any, add your custom breakpoints to the list too)

@breakpoints:

screen__xxs @screen__xxs,

screen__xs @screen__xs,

screen__s @screen__s,

screen__m @screen__m,

screen__l @screen__l,

screen__xl @screen__xl;

.for(@breakpoints); .-each(@value) {

@breakpoint-key: extract(@value, 1);

@media (min-width: extract(@value, 2)) {

body:before {

content: "@{breakpoint-key}";

}

// Activate for front-end hints

.jsBreakpoints-hints {

position: fixed;

z-index: 99999;

top: 10px;

right: 10px;

&.is-active {

display: block;

}

&:hover {

cursor: pointer;

}

.breakpoint {

background-color: #ca322c;

color: white;

display: inline-block;

padding: 2px 4px;

}

Dans le fichier app/design/frontend/<Vendor_name>/<theme_name>/web/css/source/_theme.less, ajouter la ligne suivante JUSTE EN-DESSOUS des potentielles surcharges que vous avez faites des variables pré-déclarées dans le(s) thème(s) parent(s) dont votre thème va hériter:

// Import _js-mediaqueries.less from _theme.less,
// RIGHT AFTER declarations (overrides) of existing variables.
@import "../source/devtools/_js-mediaqueries.less";

// Import _js-mediaqueries.less from _theme.less,

// RIGHT AFTER declarations (overrides) of existing variables.

@import "../source/devtools/_js-mediaqueries.less";

Partie JS:

Créer le fichier app/design/frontend/<Vendor_name>/<theme_name>/web/js/js-mediaqueries.js:

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

    $(function () { // to ensure that code evaluates on page load

        var breakpoint = {};

        breakpoint.refreshValue = function () {
            this.value = window.getComputedStyle(
                document.querySelector('body'), ':before'
            ).getPropertyValue('content').replace(/\"/g, '');
        };

        // Activate for front-end hints
        $('<div id="jsBreakpoints" class="jsBreakpoints-hints"><span class="breakpoint breakpoint-isCurrent"></span></div>').appendTo('body');

        $(window).resize(function () {
            breakpoint.refreshValue();

            // Activate for front-end hints
            $('.breakpoint-isCurrent', '#jsBreakpoints').html(breakpoint.value);
        }).resize();

        // Activate for front-end hints
        $('#jsBreakpoints').on('click', function(){
           $(this).remove();
        });
    });
});

require([

'jquery'

], function($){

'use strict';

$(function () { // to ensure that code evaluates on page load

var breakpoint = {};

breakpoint.refreshValue = function () {

this.value = window.getComputedStyle(

document.querySelector('body'), ':before'

).getPropertyValue('content').replace(/\"/g, '');

};

// Activate for front-end hints

$('<div id="jsBreakpoints" class="jsBreakpoints-hints"><span class="breakpoint breakpoint-isCurrent"></span></div>').appendTo('body');

$(window).resize(function () {

breakpoint.refreshValue();

// Activate for front-end hints

$('.breakpoint-isCurrent', '#jsBreakpoints').html(breakpoint.value);

}).resize();

// Activate for front-end hints

$('#jsBreakpoints').on('click', function(){

$(this).remove();

});

Créer ou adapter le fichier app/design/frontend/<Vendor_name>/<theme_name>/requirejs-config.js:

// How To add JS file in frontend for all pages
// https://magento.stackexchange.com/a/131635
var config = {

    map: {
        '*': {
            'jsMediaqueries': 'js/js-mediaqueries'
        }
    },

    // 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: {
        'jsMediaqueries': {
            deps: ['jquery']
        }
    }

};

// How To add JS file in frontend for all pages

// https://magento.stackexchange.com/a/131635

var config = {

map: {

'*': {

'jsMediaqueries': 'js/js-mediaqueries'

}

// 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: {

'jsMediaqueries': {

deps: ['jquery']

}

};

Partie XML:

Créer le fichier app/design/frontend/<Vendor_name>/<theme_name>/Magento_Theme/layout/default_head_blocks.xml:

Note: si ce fichier existe déjà dans votre thème, ajouter simplement la ligne <script src="js/js-mediaqueries.js" /> entre les balises <head>.

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="js/js-mediaqueries.js" />
    </head>
</page>

<head>

</head>

</page>

Commandes à exécuter en bash:

Un cache:clean
$ rm -rf pub/static/*; rm -rf var/view_preprocessed/*

Un process Grunt doit tourner ou une compilation des assets front-end via une commande Magento doit être faite.

Arborescence complète, selon les fichiers de ce tuto:

app/design/frontend/[Vendor_name]/[theme_name]/
- Magento_Theme/
  - layout/
    - default_head_blocks.xml
- web/
  - css/
    - source/
      - devtools/
        
        _js-mediaqueries.less
      - vendor/
        
        less-curious/
        
        src/
        
        for.less
        
        for-each.less
      - _theme.less
  - js/
    - js-mediaqueries.js
- requirejs-config.js

[Magento 2] Exploiter matchMedia pour passer des paramètres différents à un widget javascript en fonction du breakpoint

17/10/2019 / admin

Ressources en ligne:

HOW TO USE THE MAGENTO2 MODAL WIDGET – code. Montre bien comment passer des options et exécuter des méthodes lors d’un événement.

Attention: en work-in-progress… Au chargement de la page, selon qu’on soit en vue Mobile ou Desktop, les paramètres correspondants sont bien pris en compte mais il reste encore pas mal de soucis.

Doc officielle de Magento 2 relative à l’utilisation de matchMedia: JavaScript in Magento responsive design.

Fichier du core de Magento 2 à étudier: lib/web/mage/menu.js qui exploite matchMedia via l’alias mediaCheck et la brique $.ui.menu de jQueryUI.

Ressources externes, documentation…

[Magento2 devdocs] (officielle) jQuery widget coding standard, instanciation
La version 1.9 de jQuery UI (si, si…)

TODOs

lorsqu’on change de breakpoint sans recharger la page, les paramètres du widget ne sont pas mis à jour pour la nouvelle vue correspondante (voir pour une méthode destroy ou (mieux) refresh (edit: refresh semble ne pas vouloir fonctionner avec Magento 2).
la fonction bindAccordion ne permet pas l’ajout de méthodes ou d’événements (edit: j’ai dégagé la fonction)
cherry on the cake: le breakpoint courant devrait être détecté automatiquement (changement après chargement de page compris)

Mise en place:

\app\design\frontend\<Vendor_name>\<theme_name>\web\js\accordion-config.js

require([
    'jquery',
    'matchMedia',
    'accordion'
], function($, mediaCheck){
    'use strict';

    $(function () { // to ensure that code evaluates on page load

        var $accordionEl = $('#narrow-by-list');

        var bpMobileOptions = {
            openedState: "active-mobile",
            collapsible: false,
            multipleCollapsible: false
        };
        var bpDesktopOptions = {
            openedState: "active-desktop",
            collapsible: true,
            multipleCollapsible: true
        };

        // 1st init of widget, with no particular options.
        $accordionEl.accordion();

        // Prevent scroll to top when clicking on a[href="#"]
        $('.filter-options-collapsible-trigger', $accordionEl).on("click", function(e){
            e.preventDefault();
        });

        mediaCheck({
            media: '(min-width: 768px)',
            // Switch to Desktop Version
            entry: function () {
                /* The function that toggles page elements from desktop to mobile mode is called here */
                $('body').css('border', '12px solid tomato');

                $accordionEl
                    .accordion('destroy')
                    .accordion(bpDesktopOptions);
            },
            // Switch to Mobile Version
            exit: function () {
                /* The function that toggles page elements from mobile to desktop mode is called here*/
                $('body').css('border', '12px solid aqua');

                $accordionEl
                    .accordion('destroy')
                    .accordion(bpMobileOptions);
            }
        });
    });
});

require([

'jquery',

'matchMedia',

'accordion'

], function($, mediaCheck){

'use strict';

$(function () { // to ensure that code evaluates on page load

var $accordionEl = $('#narrow-by-list');

var bpMobileOptions = {

openedState: "active-mobile",

collapsible: false,

multipleCollapsible: false

};

var bpDesktopOptions = {

openedState: "active-desktop",

collapsible: true,

multipleCollapsible: true

};

// 1st init of widget, with no particular options.

$accordionEl.accordion();

// Prevent scroll to top when clicking on a[href="#"]

$('.filter-options-collapsible-trigger', $accordionEl).on("click", function(e){

e.preventDefault();

});

mediaCheck({

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

// Switch to Desktop Version

entry: function () {

/* The function that toggles page elements from desktop to mobile mode is called here */

$('body').css('border', '12px solid tomato');

$accordionEl

.accordion('destroy')

.accordion(bpDesktopOptions);

// Switch to Mobile Version

exit: function () {

/* The function that toggles page elements from mobile to desktop mode is called here*/

$('body').css('border', '12px solid aqua');

$accordionEl

.accordion('destroy')

.accordion(bpMobileOptions);

}

});

\app\design\frontend\<Vendor_name>\<theme_name>\requirejs-config.js

var config = {

    map: {
        '*': {
            'configAccordion': 'js/accordion-config'
        }
    },

    // 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: {
        'configAccordion': {
            deps: ['jquery']
        }
    }

};

var config = {

map: {

'*': {

'configAccordion': 'js/accordion-config'

}

// 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: {

'configAccordion': {

deps: ['jquery']

}

};

\app\design\frontend\<Vendor_name>\<theme_name>\Magento_LayeredNavigation\templates\layer\view.phtml

<script>
    requirejs( [ 'jquery', 'configAccordion' ], function ( $, configAccordion ) { } );
</script>

requirejs( [ 'jquery', 'configAccordion' ], function ( $, configAccordion ) { } );

</script>

HOW TO USE THE MAGENTO2 MODAL WIDGET

HTML

<button id="modal-btn">Click me</button>
<div id="modal-content">
	<div class="modal-inner-content">
		<h2>Modal Title</h2>
		<p>Modal content…..</p>
	</div>
</div>

<button id="modal-btn">Click me</button>

<h2>Modal Title</h2>

<p>Modal content…..</p>

</div>

JS

<script type="text/javascript">
    require(["jquery", "Magento_Ui/js/modal/modal"],function($, modal) {
        var options = {
            type: 'popup', // popup or slide
            responsive: true, // true = on smaller screens the modal slides in from the right
            title: 'Modal main title',
            buttons: [{ // Add array of buttons within the modal if you need.
                text: $.mage.__('Dismiss & Continue'),
                class: '',
                click: function () {
                    this.closeModal(); // This button closes the modal
                }
            }]
        };

        var popup = modal(options, $('#modal-content'));
        $("#modal-btn").click(function() {
            $('#modal-content').modal('openModal');
        });
    });
</script>

require(["jquery", "Magento_Ui/js/modal/modal"],function($, modal) {

var options = {

type: 'popup', // popup or slide

responsive: true, // true = on smaller screens the modal slides in from the right

title: 'Modal main title',

buttons: [{ // Add array of buttons within the modal if you need.

text: $.mage.__('Dismiss & Continue'),

class: '',

click: function () {

this.closeModal(); // This button closes the modal

}

}]

};

var popup = modal(options, $('#modal-content'));

$("#modal-btn").click(function() {

$('#modal-content').modal('openModal');

});

</script>

[Magento 2] Utiliser des media queries, points de rupture, en LESS (CSS) et en javascript avec matchMedia

16/10/2019 / admin

Exploiter les media queries dans les fichiers styles LESS (CSS)
Avoir recours aux media queries dans les fichiers JS

Exploiter les media queries dans les fichiers styles LESS (CSS)

Variables de breakpoints

Les surcharges de valeurs de breakpoints existants (déjà déclarés dans un thème parent) se font dans le fichier _theme.less de votre thème enfant.

Utilisation des mixins `.media-width` fournis par Magento 2 et code compilé

Les fichiers CSS styles-m.less et styles-l.less sont auto-générés par Magento 2 lors de la compilation des fichiers *.less. Il ne faut PAS les recréer à la main dans vos thèmes enfants. Si on respecte les bonnes pratiques de déclaration des media-queries dictées par la doc officielle, on peut déclarer autant de fois qu’on veut un même breakpoint dans nos sources *.less et toutes nos déclarations seront regroupées sous une seule dans les fichiers *.css finaux. Exemple:

# Source LESS
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
  // your code
  body {
    border: 12px solid red;
  }
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
  // your code
  body {
    background-color: pink;
  }
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
  // your code
  body {
    font-size: 26px;
  }
}


# Rendu CSS généré
@media only screen and (max-width: 639px) {
  body {
    border: 12px solid red;
  }
  body {
    background-color: pink;
  }
  body {
    font-size: 26px;
  }
}

# Source LESS

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

// your code

body {

border: 12px solid red;

}

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

// your code

body {

background-color: pink;

}

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

// your code

body {

font-size: 26px;

}

# Rendu CSS généré

@media only screen and (max-width: 639px) {

body {

border: 12px solid red;

}

body {

background-color: pink;

}

body {

font-size: 26px;

}

Avoir recours aux media queries dans les fichiers JS avec `matchMedia`

Doc officielle – JavaScript in Magento responsive design.

Utiliser `matchMedia` directement dans une vue *.phtml

Le code ci-dessous affiche une bordure rose sur les écrans de Mobile (dont la résolution est inférieure à 768px) et bleue sur les écrans dont la résolution est plus large.

<script>
    requirejs([
        'jquery',
        'matchMedia'
    ], function($, mediaCheck){
        'use strict';

        mediaCheck({
            media: '(min-width: 768px)',
            // Switch to Desktop Version
            entry: function () {
                /* The function that toggles page elements from desktop to mobile mode is called here */
                $('body').css('border', '12px solid aqua');
            },
            // Switch to Mobile Version
            exit: function () {
                /* The function that toggles page elements from mobile to desktop mode is called here*/
                $('body').css('border', '12px solid pink');
            }
        });
    });
</script>

requirejs([

'jquery',

'matchMedia'

], function($, mediaCheck){

'use strict';

mediaCheck({

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

// Switch to Desktop Version

entry: function () {

/* The function that toggles page elements from desktop to mobile mode is called here */

$('body').css('border', '12px solid aqua');

// Switch to Mobile Version

exit: function () {

/* The function that toggles page elements from mobile to desktop mode is called here*/

$('body').css('border', '12px solid pink');

}

});

</script>

Utiliser `matchMedia` depuis un fichier *.js

Attention: de part la nature « protectrice » de requireJS, le code encapsulé dans votre fichier Js ne sera pris en compte qu’après avoir été déclaré dans une vue *.phtml ou (mauvaise pratique) dans un JS inclus à l’arrache (dans app\design\frontend\<Vendor_name>\<theme_name>\Magento_Theme\layout\default_head_blocks.xml par exemple) et non-contrôlé par requireJS.

Dans mon exemple, je crée un fichier app\design\frontend\<Vendor_name>\<theme_name>\web\js\mediaqueries.js:

Attention, à retenir: il faut bien encapsuler le code qui doit être exécuté au chargement de la page dans une fonction anonyme $(function(){ // mon code ici... });. Sinon, pas d’exécution. C’est du jQuery 😉

require([
    'jquery',
    'matchMedia'
], function($, mediaCheck){
    'use strict';

    $(function () { // to ensure that code evaluates on page load
        mediaCheck({
            media: '(min-width: 768px)',
            // Switch to Desktop Version
            entry: function () {
                /* The function that toggles page elements from desktop to mobile mode is called here */
                $('body').css('border', '12px solid aqua');
            },
            // Switch to Mobile Version
            exit: function () {
                /* The function that toggles page elements from mobile to desktop mode is called here*/
                $('body').css('border', '12px solid pink');
            }
        });
    });
});

require([

'jquery',

'matchMedia'

], function($, mediaCheck){

'use strict';

$(function () { // to ensure that code evaluates on page load

mediaCheck({

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

// Switch to Desktop Version

entry: function () {

/* The function that toggles page elements from desktop to mobile mode is called here */

$('body').css('border', '12px solid aqua');

// Switch to Mobile Version

exit: function () {

/* The function that toggles page elements from mobile to desktop mode is called here*/

$('body').css('border', '12px solid pink');

}

});

Dans le fichier app\design\frontend\<Vendor_name>\<theme_name>\requirejs-config.js, je déclare mon nouveau fichier mediaqueries.js et je le rends disponible pour requireJS:

var config = {

    map: {
        '*': {
            'jsMediaqueries': 'js/mediaqueries'
        }
    },

    // 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: {
        'jsMediaqueries': {
            deps: ['jquery']
        }
    }

};

var config = {

map: {

'*': {

'jsMediaqueries': 'js/mediaqueries'

}

// 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: {

'jsMediaqueries': {

deps: ['jquery']

}

};

Dans un fichier *.phtml, je fais exécuter le code se trouvant dans le fichier mediaqueries.js:

<script>
    requirejs(['jquery', 'jsMediaqueries'], function($, jsMediaqueries){});
</script>

requirejs(['jquery', 'jsMediaqueries'], function($, jsMediaqueries){});

</script>

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

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!

Utilisation dans un fichier PHTML:

Détail des fichiers à mettre en place:

En-dehors d’un thème, en créant un module

view/frontend/requirejs-config.js

view/frontend/web/js/hello-world.js

view/frontend/web/js/methods.js

Les styles

Les scripts

Joindre l’intégralité des widgets

Problématiques:

Modifier un paramètre du composant et inclure une chaîne de traduction i18n

Apprendre les bases

Doc officielle

Tutoriels

Troubleshooting

Intérêt pour le développeur Magento 2 d’importer les breakpoints LESS pour une exploitation avec javascript?

Partie LESS:

Partie JS:

Partie XML:

Commandes à exécuter en bash:

Arborescence complète, selon les fichiers de ce tuto:

Ressources externes, documentation…

TODOs

Mise en place:

HOW TO USE THE MAGENTO2 MODAL WIDGET

HTML

JS

Exploiter les media queries dans les fichiers styles LESS (CSS)

Variables de breakpoints

Utilisation des mixins .media-width fournis par Magento 2 et code compilé

Avoir recours aux media queries dans les fichiers JS avec matchMedia

Utiliser matchMedia directement dans une vue *.phtml

Utiliser matchMedia depuis un fichier *.js

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

Utilisation des mixins `.media-width` fournis par Magento 2 et code compilé

Avoir recours aux media queries dans les fichiers JS avec `matchMedia`

Utiliser `matchMedia` directement dans une vue *.phtml

Utiliser `matchMedia` depuis un fichier *.js