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

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>

Articles récents

Catégories

Archives

Méta