Étiquette : Accordion

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

[Foundation 6] Contourner le bug du composant Modal en full screen qui empêche de scroller jusqu’en bas si on utilise l’attribut optionnel data-v-offset

11/10/2017 / admin

Présentation du problème

Voir en fin de ce billet le paragraphe « Améliorations ».

Demande pour un site Responsive avec un menu qui, en vue Mobile:

S’ouvre en cliquant sur une icône Sandwich placée dans le bandeau
S’ouvre immédiatement sous le bandeau (pas de off-canvas) et par-dessus le contenu de la page (comprendre: sans s’intercaler entre le bandeau et le contenu de page, donc sans pousser ce dernier vers le bas).
Le menu doit être en accordéon

J’ai eu l’idée d’utiliser le composant Modal de Foundation 6 qui intègre une option full-screen et la possibilité de faire débuter la modale à x pixels du haut de la fenêtre (pour laisser le bandeau apparent). La modale de Foundation étant scrollable, je me suis dit « Bingo! ». Le code de ma modale ressemble à peu près à ceci :

<p><button class="button" data-toggle="showNavAndSwitchlanguageForMobile">Menu</button></p>

<div class="full reveal" id="showNavAndSwitchlanguageForMobile" data-reveal>
  <ul class="vertical menu accordion-menu" data-accordion-menu>
    <li>
      <a href="#">Item 1</a>
      <ul class="menu vertical nested">
        <li><a href="#">Item 1A</a></li>
        <li><a href="#">Item 1B</a></li>
      </ul>
    </li>
    <li><a href="#">Item 2</a></li>
  </ul>
</div>

<li>

</ul>

</li>

</ul>

</div>

Problème: la modale semble mal calculer les hauteurs lorsqu’on utilise l’attribut optionnel data-v-offset pour faire débuter la modale à x pixels du haut de la fenêtre. On ne peut pas scroller jusqu’en bas lorsque le contenu de celle-ci est plus haut que la hauteur totale de la fenêtre!!!

Mise en place de la solution

(optimisation) On stocke l’ID affecté à l’élément Modal dans une variable, car on va l’appeler à plusieurs reprises ensuite:

// Global vars
var $mobileNavModal = $('#showNavAndSwitchlanguageForMobile');

1 2	// Global vars var $mobileNavModal = $('#showNavAndSwitchlanguageForMobile');

On commence par récupérer la hauteur du bandeau (en utilisant la très pratique javascript Utility BOX fournie avec Foundation 6) pour l’affecter à la modale via l’attribut optionnel data-v-offset du plugin Reveal (lui aussi fourni avec Foundation 6).

var mobileHeaderInfo = Foundation.Box.GetDimensions(document.getElementById('mobileHeader'));
function printMobileHeaderHeight(){
  $mobileNavModal.attr('data-v-offset', mobileHeaderInfo.height);
}

// Si la fenêtre est redimensionnée, on réinitialise la valeur.
$('window').on('resize', printMobileHeaderHeight());

var mobileHeaderInfo = Foundation.Box.GetDimensions(document.getElementById('mobileHeader'));

function printMobileHeaderHeight(){

$mobileNavModal.attr('data-v-offset', mobileHeaderInfo.height);

}

// Si la fenêtre est redimensionnée, on réinitialise la valeur.

$('window').on('resize', printMobileHeaderHeight());

Seulement ensuite, on initialise le plugin Reveal de Foundation 6 (ou tous les plugins d’un coup dans notre exemple) :

$(document).foundation();

1	$(document).foundation();

De base, la modale Foundation a une hauteur et une hauteur minimale fixées à 100% ou 100vh pour les navigateurs les plus récents. Ces styles sont affectés à l’élément Modal via CSS.

.reveal.full {
  height: 100%;
  height: 100vh;
  min-height: 100vh;
}

.reveal.full {

height: 100%;

height: 100vh;

min-height: 100vh;

}

D’autres styles sont affectés à l’élément Modal, lors de son ouverture, via javascript (voir l’attribut style="") :

<div class="full reveal without-overlay" 
     id="showNavAndSwitchlanguageForMobile" 
     data-reveal="95bnsl-reveal" 
     data-v-offset="65" 
     role="dialog" 
     aria-hidden="false" 
     data-yeti-box="showNavAndSwitchlanguageForMobile" 
     data-resize="showNavAndSwitchlanguageForMobile" 
     style="display: block; top: 65px; left: 0px; margin: 0px;" 
     tabindex="-1">

<div class="full reveal without-overlay"

id="showNavAndSwitchlanguageForMobile"

data-reveal="95bnsl-reveal"

data-v-offset="65"

role="dialog"

aria-hidden="false"

data-yeti-box="showNavAndSwitchlanguageForMobile"

data-resize="showNavAndSwitchlanguageForMobile"

style="display: block; top: 65px; left: 0px; margin: 0px;"

tabindex="-1">

Pour éviter le bug nous concernant, il faut surcharger les valeurs de height et de min-height en les recalculant via javaScript en fonction de la valeur de data-v-offset récupérée plus haut. On stocke les styles existants dans une variable elementStandardStyle et on ajoute les nouvelles valeurs de hauteur via une variable elementCustomStyle :

$mobileNavModal.on('open.zf.reveal', function(){
  var elementStandardStyle = $(this).attr('style');
  var elementCustomStyle = 'height: calc(100% - '+mobileHeaderInfo.height+'px); min-height: calc(100% - '+mobileHeaderInfo.height+'px);';

  $(this)
    .attr('style', '')
    .attr('style', elementStandardStyle + elementCustomStyle);
});

$mobileNavModal.on('open.zf.reveal', function(){

var elementStandardStyle = $(this).attr('style');

var elementCustomStyle = 'height: calc(100% - '+mobileHeaderInfo.height+'px); min-height: calc(100% - '+mobileHeaderInfo.height+'px);';

$(this)

.attr('style', '')

.attr('style', elementStandardStyle + elementCustomStyle);

});

Optimisations d’ordre ergonomiques

Refermer la modale (le menu) au clic n’importe où d’autre sur l’écran

On commence par créer une fonction qui ferme la modale (cf. doc de Foundation).

function closeMobileNavModal(){
  $mobileNavModal.foundation('close');
}

function closeMobileNavModal(){

$mobileNavModal.foundation('close');

}

Puis on exécute du code à l’événement open.zf.reveal (une fois la modale est ouverte) :

Pour une sélection d’éléments, la modale ne se refermera pas si on clique dessus.
Pour tout le reste du document, on exécute la fonction closeMobileNavModal() qui referme la modale.
Le 2ème point n’est exécuté qu’une seule fois grâce au $(this).off(e); (sinon, on ne peut plus ré-ouvrir la modale).

$mobileNavModal.on('open.zf.reveal', function(){
  $('#primaryNav-mobile, #mobileSwitchlanguage').on('click', function(e){
    e.stopPropagation();
  });

  $(document).on('click', 'html', function(e){
    closeMobileNavModal();
    $(this).off(e);

    // [FIX][iPhone] A la 1ère fermeture de la modale, l'affichage ne revient pas
    // automatiquement en haut de page
    if ($('html.iphone').length == 1){
      $(window).scrollTop(0);
    }
  });
});

$mobileNavModal.on('open.zf.reveal', function(){

$('#primaryNav-mobile, #mobileSwitchlanguage').on('click', function(e){

e.stopPropagation();

});

$(document).on('click', 'html', function(e){

closeMobileNavModal();

$(this).off(e);

// [FIX][iPhone] A la 1ère fermeture de la modale, l'affichage ne revient pas

// automatiquement en haut de page

if ($('html.iphone').length == 1){

$(window).scrollTop(0);

}

});

ATTENTION!!! Sur iPhone, il existe un bug connu qui empêche le clic sur l’ensemble du $(document). Il faut impérativement ajouter la propriété cursor: pointer; sur l’élément ciblé par le clic.

Dans l’exemple ci-dessous, je lance une détection de l’appareil servant à l’internaute et j’affiche une classe en conséquence sur l’élément html via le plugin browser-detection.

html.iphone {
  cursor: pointer;
}

html.iphone {

cursor: pointer;

}

Améliorations (pas testé)

J’appelle deux fois l’événement open.zf.reveal. On peut optimiser ça en ne l’appelant qu’une seule fois:

$mobileNavModal.on('open.zf.reveal', function(){
  var elementStandardStyle = $(this).attr('style');
  var elementCustomStyle = 'height: calc(100% - '+mobileHeaderInfo.height+'px); min-height: calc(100% - '+mobileHeaderInfo.height+'px);';

  $(this)
    .attr('style', '')
    .attr('style', elementStandardStyle + elementCustomStyle);

  $('#primaryNav-mobile, #mobileSwitchlanguage').on('click', function(e){
    e.stopPropagation();
  });

  $(document).on('click', 'html', function(e){
    closeMobileNavModal();
    $(this).off(e);

    // [FIX][iPhone] A la 1ère fermeture de la modale, l'affichage ne revient pas
    // automatiquement en haut de page
    if ($('html.iphone').length == 1){
      $(window).scrollTop(0);
    }
  });
});

$mobileNavModal.on('open.zf.reveal', function(){

var elementStandardStyle = $(this).attr('style');

var elementCustomStyle = 'height: calc(100% - '+mobileHeaderInfo.height+'px); min-height: calc(100% - '+mobileHeaderInfo.height+'px);';

$(this)

.attr('style', '')

.attr('style', elementStandardStyle + elementCustomStyle);

$('#primaryNav-mobile, #mobileSwitchlanguage').on('click', function(e){

e.stopPropagation();

});

$(document).on('click', 'html', function(e){

closeMobileNavModal();

$(this).off(e);

// [FIX][iPhone] A la 1ère fermeture de la modale, l'affichage ne revient pas

// automatiquement en haut de page

if ($('html.iphone').length == 1){

$(window).scrollTop(0);

}

});

On peut conserver le menu ouvert sur la page en cours (à condition d’avoir les classes standard d’un menu Change .in-path, .current) en ajoutant le code suivant:

Juste en dessous de l’initialisation des plug-ins Foundation ($(document).foundation();) :

    function openChildren($child){
        if ($($child).attr('aria-expanded') === "false") {
            $($child).children('a').first().trigger('click');
        }

        if ($($child).find('.inpath').length){
            openChildren($($child).find('.inpath').first());
        }
    }

function openChildren($child){

if ($($child).attr('aria-expanded') === "false") {

$($child).children('a').first().trigger('click');

}

if ($($child).find('.inpath').length){

openChildren($($child).find('.inpath').first());

}

…puis à l’événement open.zf.reveal (le if ($(primaryNav)) :

  $mobileNavModal.on('open.zf.reveal', function(){
    var elementStandardStyle = $(this).attr('style');
    var elementCustomStyle = 'height: calc(100% - '+mobileHeaderInfo.height+'px); min-height: calc(100% - '+mobileHeaderInfo.height+'px);';
    var primaryNav = $('#primaryNav-mobile');

    $(this)
      .attr('style', '')
      .attr('style', elementStandardStyle + elementCustomStyle);

      if ($(primaryNav).find('.inpath').first().length) {
          openChildren($(primaryNav).find('.inpath').first());
      }
  });

$mobileNavModal.on('open.zf.reveal', function(){

var elementStandardStyle = $(this).attr('style');

var elementCustomStyle = 'height: calc(100% - '+mobileHeaderInfo.height+'px); min-height: calc(100% - '+mobileHeaderInfo.height+'px);';

var primaryNav = $('#primaryNav-mobile');

$(this)

.attr('style', '')

.attr('style', elementStandardStyle + elementCustomStyle);

if ($(primaryNav).find('.inpath').first().length) {

openChildren($(primaryNav).find('.inpath').first());

}

});

[jQuery][Foundation 3.5.2] Modifier le comportement natif du composant Accordion pour empêcher la fermeture d’un panneau au clic sur son en-tête

15/06/2015 / admin

Les versions récentes de Foundation incluent toute une batterie d’options pour le composant Accordion.

Le comportement standard consiste à pouvoir fermer un panneau au clic sur son en-tête. Tous les panneaux sont alors fermés.
Nous allons modifier le code natif du composant accordion.js de Foundation 3.5.2 afin qu’un panneau ouvert ne puisse plus être fermé (par l’utilisateur) au clic sur son en-tête.

Il suffit de repérer et de commenter la ligne suivante : p.find('li').removeClass('active').end().find('.content').hide();.

// Please note : this is a fork of original "jquery.foundation.accordion.js" code.
//
// Accordion panels could originaly be closed by clicking on their headers.
// When loading this fork, accordion panels can only be closed when another is opened by user.

;(function ($, window, undefined){
  'use strict';

  $.fn.foundationAccordion = function (options) {

    // DRY up the logic used to determine if the event logic should execute.
    var hasHover = function(accordion) {
      return accordion.hasClass('hover') && !Modernizr.touch
    };

    $(document).on('mouseenter', '.accordion li', function () {
        var p = $(this).parent();

        if (hasHover(p)) {
          var flyout = $(this).children('.content').first();

          $('.content', p).not(flyout).hide().parent('li').removeClass('active');
          flyout.show(0, function () {
            flyout.parent('li').addClass('active');
          });
        }
      }
    );

    $(document).on('click.fndtn', '.accordion li .title', function () {
        var li = $(this).closest('li'),
            p = li.parent();

        if(!hasHover(p)) {
          var flyout = li.children('.content').first();

          if (li.hasClass('active')) {
            //p.find('li').removeClass('active').end().find('.content').hide();
          } else {
            $('.content', p).not(flyout).hide().parent('li').removeClass('active');
            flyout.show(0, function () {
              flyout.parent('li').addClass('active');
            });
          }
        }
      }
     );

  };

})( jQuery, this );

// Please note : this is a fork of original "jquery.foundation.accordion.js" code.

// Accordion panels could originaly be closed by clicking on their headers.

// When loading this fork, accordion panels can only be closed when another is opened by user.

;(function ($, window, undefined){

'use strict';

$.fn.foundationAccordion = function (options) {

// DRY up the logic used to determine if the event logic should execute.

var hasHover = function(accordion) {

return accordion.hasClass('hover') && !Modernizr.touch

};

$(document).on('mouseenter', '.accordion li', function () {

var p = $(this).parent();

if (hasHover(p)) {

var flyout = $(this).children('.content').first();

$('.content', p).not(flyout).hide().parent('li').removeClass('active');

flyout.show(0, function () {

flyout.parent('li').addClass('active');

});

}

);

$(document).on('click.fndtn', '.accordion li .title', function () {

var li = $(this).closest('li'),

p = li.parent();

if(!hasHover(p)) {

var flyout = li.children('.content').first();

if (li.hasClass('active')) {

//p.find('li').removeClass('active').end().find('.content').hide();

} else {

$('.content', p).not(flyout).hide().parent('li').removeClass('active');

flyout.show(0, function () {

flyout.parent('li').addClass('active');

});

}

);

};

})( jQuery, this );

[CSS][Foundation 3.5.2] Reset CSS des styles du composant Accordion de Foundation v3.5.2

15/06/2015 / admin

en SASS (ajouter la classe .css-reset) :

/* [CSS reset] Foundation Accordion component */
ul.accordion.css-reset {
    margin: 0;
    border: none 0;
    > li {
        border: none 0;
        > div.title {
            &:after {
                border: none 0;
            }
        }
        .content {
            padding: 0;
        }
    }
    > li.active {
        border: none 0;
        > div.title {
            border: none 0;
            &:after {
                border: none 0;
            }
        }
        .content {
            border: none 0;
        }
    }
}

/* [CSS reset] Foundation Accordion component */

ul.accordion.css-reset {

margin: 0;

border: none 0;

> li {

border: none 0;

> div.title {

&:after {

border: none 0;

}

.content {

padding: 0;

}

> li.active {

border: none 0;

> div.title {

border: none 0;

&:after {

border: none 0;

}

.content {

border: none 0;

}

Articles récents

Catégories

Archives

Méta

Étiquette : Accordion

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

Imperative notation

Declarative notation

[jQuery][Foundation 3.5.2] Modifier le comportement natif du composant Accordion pour empêcher la fermeture d’un panneau au clic sur son en-tête

[CSS][Foundation 3.5.2] Reset CSS des styles du composant Accordion de Foundation v3.5.2