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/
Retenez le nom de la fonction handle() du plugin, car elle nous servira plus bas.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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/
|
1 2 3 4 5 6 7 8 9 |
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):
|
1 2 3 4 5 |
// 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’aliaspageScrollState(défini comme argument de la fonction en ligne 4)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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!
|
1 2 3 4 5 6 7 8 9 10 11 |
// // Common (styles-m.css) // _____________________________________________ & when (@media-common = true) { .is-disabled-page-scroll { margin: 0 !important; height: 100% !important; overflow: hidden !important; } } |