Testé fonctionnel Magento 2.4!
Dans mon exemple, l’ID « narrow-by-list » est présent deux fois dans le DOM (ce qui n’est pas du tout une bonne pratique) car la liste des filtres s’affiche dans deux zones bien distinctes de la page: 1. en mode horizontal au-dessus de la liste des catégories/produits et dans un volet glissant qui ne s’affiche qu’au clic sur un bouton de type « Voir plus de filtres ».
Il faudra donc adapter un peu mon code à votre propre utilisation.
Chemin: app/design/frontend/MyVendor/MyTheme/Magento_LayeredNavigation/templates/layer/view.phtml.
- Je désactive la condition PHP
<?php if ($block->getLayer()->getState()->getFilters()) : ?>qui sette la visibilité du bouton « Effacer tout », mais uniquement au rechargement de la page. - J’ajoute un ID
<div id="filterActions" class="block-actions filter-actions">.
|
1 2 3 4 5 6 7 8 9 10 |
<?php //if ($block->getLayer()->getState()->getFilters()) : ?> <div id="filterActions" class="block-actions filter-actions"> <a href="<?= $block->escapeUrl($block->getClearUrl()) ?>" class="action secondary icon clear small filter-clear"> <span><?= $block->escapeHtml(__('Clear All')) ?></span> <span class="icon"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="20" viewBox="0 0 24 20"><g><g><g><path fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="20" d="M1 6.99v0l3 4.5v0l3.5-4v0"/></g><g><path fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="20" d="M13.5 19.5A9.5 9.5 0 1 0 4 10v1.494"/></g></g></g></svg> </span> </a> </div> <?php //endif; ?> |
Dans le même fichier view.phtml, j’ajoute ce bout de code javaScript (il vous faudra probablement adapter le ciblage du selecteur suivant qui n’existera pas chez vous: let FILTER = $('#narrow-by-list.is-view-top').find('.active');):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<script> require([ 'jquery' ], function($){ 'use strict'; // On vérifie dans le noeud '#narrow-by-list.is-view-top' (view-top.phtml) // qu'il y a au moins 1 filtre d'actif. function checkForActiveFilter() { let FILTER = $('#narrow-by-list.is-view-top').find('.active'); if (FILTER.length >= 1) { return true; } else { return false; } } // On sette la visibilité du bouton "Effacer tout" en fonction du résultat // retourné par la fonction checkForActiveFilter(). function setFilterActionsVisibility() { const $FILTER_ACTIONS = $('#filterActions'); if ( checkForActiveFilter() == true ){ $FILTER_ACTIONS.removeClass('no-active-filter'); } else { $FILTER_ACTIONS.addClass('no-active-filter'); } } // console.log("is any filter active? " + checkForActiveFilter()); setFilterActionsVisibility(); }); </script> |
On n’oublie pas le petit CSS qui va bien:
|
1 2 3 |
#filterActions.no-active-filter { display: none !important; } |