Mois : octobre 2019

[jQuery][bxSlider] Les liens dans le slider ne fonctionnent pas

30/10/2019 / admin

Solution: stevenwanderski/bxslider-4: links in sliders aren’t working – Error in the latest version of Chrome (73.0.3683.75).

I might have found a reliable fix for this. The problem happens in Chrome because it doesn’t fire a click event after pointerup unlike other browsers such as Firefox. This is because bxslider in onTouchStart function sets slider viewport as target of all succeeding pointer events. Now if you have a link inside a slide when you click the link the target of pointerdown is not slider viewport, but the link content and since this target is different from pointerup target (which is slider viewport), then Chrome doesn’t fire a click. The solution is to make sure pointerup fires on the same element as pointerdown so that Chrome fires a click. So we need to refactor this snippet:

        if (slider.viewport.get(0).setPointerCapture) {
          slider.pointerId = orig.pointerId;
          slider.viewport.get(0).setPointerCapture(slider.pointerId);
        }

if (slider.viewport.get(0).setPointerCapture) {

slider.pointerId = orig.pointerId;

slider.viewport.get(0).setPointerCapture(slider.pointerId);

}

to this:

        if (e.target.setPointerCapture) {
          slider.pointerId = orig.pointerId;
          e.target.setPointerCapture(slider.pointerId);
        }

if (e.target.setPointerCapture) {

slider.pointerId = orig.pointerId;

e.target.setPointerCapture(slider.pointerId);

}

This solved the problem for me in Chrome without loss of any functionality in any browser or mobile device.

[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] Modifier le nombre de produits par rangée dans les listes produits

29/10/2019 / admin

app\design\frontend\<Vendor_name>\<theme_name>\web\css\source\module\_listing_extend.less

//
//  Desktop (style-l.css)
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
  .page-products {
    .products-grid {
      .product-item {
        margin-left: 2%;
        padding: 0;
        width: calc(~'(100% - 4%) / 3');

        &:nth-child(3n + 1) {
          margin-left: 0;
        }
      }
    }
  }
}

// Desktop (style-l.css)

// _____________________________________________

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

.page-products {

.products-grid {

.product-item {

margin-left: 2%;

padding: 0;

width: calc(~'(100% - 4%) / 3');

&:nth-child(3n + 1) {

margin-left: 0;

}

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

[javascript] Importer des breakpoints CSS

17/10/2019 / admin

Article de lullabot.com: Importing CSS Breakpoints Into JavaScript. Demo Codepen.

Version PDF pour la postérité.

[jQuery] Exploiter $.noConflict(true); pour utiliser plusieurs versions de jQuery dans une même page

17/10/2019 / admin

Source: Can I use multiple versions of jQuery on the same page?. Utiliser de multiples versions de jQuery dans une même page.

<!-- load jQuery 1.1.3 -->
<script type="text/javascript" src="http://example.com/jquery-1.1.3.js"></script>
<script type="text/javascript">
var jQuery_1_1_3 = $.noConflict(true);
</script>

<!-- load jQuery 1.3.2 -->
<script type="text/javascript" src="http://example.com/jquery-1.3.2.js"></script>
<script type="text/javascript">
var jQuery_1_3_2 = $.noConflict(true);
</script>

var jQuery_1_1_3 = $.noConflict(true);

</script>

var jQuery_1_3_2 = $.noConflict(true);

</script>

A l’utilisation, à la place de $('#selector').function();, vous utiliseriez jQuery_1_3_2('#selector').function(); ou jQuery_1_1_3('#selector').function();

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

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

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