devfrontend.info

[Magento 2] Ajouter des polices Google Fonts

26/01/2021 / admin

Testé fonctionnel Magento 2.4. Source: Add Google Fonts using Google’s new URL format.

[Magento 2] Depuis un template PHTML, détecter si la page sur laquelle nous nous trouvons est la homepage, une page produit, une page catégorie

21/01/2021 / admin

Source: How to check IsHomePage in Magento 2? Are we on the homepage?

<?php if ($this->getRequest()->getFullActionName() == 'cms_index_index') : ?>
    <h1>you are on the homepage</h1>
<?php endif; ?>

<?php if ($this->getRequest()->getFullActionName() == 'cms_index_index') : ?>

<h1>you are on the homepage</h1>

<?php endif; ?>

if ($this->getRequest()->getFullActionName() == 'cms_index_index') {
    //you are on the homepage
}
if ($this->getRequest()->getFullActionName() == 'catalog_product_view') {
    //you are on the product page
}
if ($this->getRequest()->getFullActionName() == 'catalog_category_view') {
    //you are on the category page
}

if ($this->getRequest()->getFullActionName() == 'cms_index_index') {

//you are on the homepage

}

if ($this->getRequest()->getFullActionName() == 'catalog_product_view') {

//you are on the product page

}

if ($this->getRequest()->getFullActionName() == 'catalog_category_view') {

//you are on the category page

}

[CSS] Désactiver le scroll dans la page lorsqu’un élément en position absolue (de type Modale, Off-Canvas, …) est ouvert en sur-impression

21/01/2021 / admin

ATTENTION: cette solution testée fonctionnelle est plus simple à mettre en place que les solutions précédemment citées sur ce blog:

Source: Disable Scrolling on Body

// Bloquer le scroll de la page lorsqu'un élément en position absolute (off-canvas, modale...) est ouvert:
function handlePageScrollState() {
    const $_HTML = $('html');
    if ($_HTML.hasClass('is-disabled-page-scroll')) {
        $_HTML.removeClass('is-disabled-page-scroll');
    } else {
        $_HTML.addClass('is-disabled-page-scroll');
    }
}

// Bloquer le scroll de la page lorsqu'un élément en position absolute (off-canvas, modale...) est ouvert:

function handlePageScrollState() {

const $_HTML = $('html');

if ($_HTML.hasClass('is-disabled-page-scroll')) {

$_HTML.removeClass('is-disabled-page-scroll');

} else {

$_HTML.addClass('is-disabled-page-scroll');

}

.is-disabled-page-scroll {
    margin: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
}

.is-disabled-page-scroll {

margin: 0 !important;

height: 100% !important;

overflow: hidden !important;

}

[Magento 2] Créer un thème enfant du thème Blank, astuces et bonnes pratiques

20/01/2021 / admin

Astuces éprouvées sur un Magento 2 CE, version 2.4.
Billet qui sera probablement encore mis à jour.

Architecture de votre thème

Architecture globale d’un thème Magento 2 enfant de Blank

A partir de app/code/design/frontend/Vendor/theme/

composer.json
registration.php
requirejs-config.js
theme.xml

composer.json

{
    "name": "Vendor/theme",
    "description": "N/A",
    "require": {
        "php": "~5.5.0|~5.6.0|~7.0.0",
        "magento/theme-frontend-blank": "*",
        "magento/framework": "100.0.*"
    },
    "type": "magento2-theme",
    "version": "1.0.0",
    "license": [

    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

{

"name": "Vendor/theme",

"description": "N/A",

"require": {

"php": "~5.5.0|~5.6.0|~7.0.0",

"magento/theme-frontend-blank": "*",

"magento/framework": "100.0.*"

"type": "magento2-theme",

"version": "1.0.0",

"license": [

"autoload": {

"files": [

"registration.php"

]

}

registration.php

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Vendor/theme',
    __DIR__
);

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

\Magento\Framework\Component\ComponentRegistrar::THEME,

'frontend/Vendor/theme',

__DIR__

);

requirejs-config.js

theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Mon thème enfant de Blank</title>
    <parent>Magento/blank</parent>
</theme>

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">

<title>Mon thème enfant de Blank</title>

<parent>Magento/blank</parent>

</theme>

Les styles/fichiers LESS

Dans les thèmes Magento 2, certains fichiers LESS (_extend.less, _theme.less, critical.css, …),ont des noms/libellés et des fonctions prédéfinies qu’il convient de conserver. Le développeur de thèmes n’est pas obligé de tous les avoir dans son thème. Mais dès qu’il à recours à l’une ou l’autre des fonctionnalités que ces fichiers couvrent, il faut utiliser ces derniers.

A partir de app/code/design/frontend/Vendor/theme/web/css/

source/
- _extend.less Doit contenir tous les @import vers les fichiers LESS spécifiques au thème que vous allez créer. Vous pouvez organiser ces fichiers comme bon vous semble.
- _theme.less Doit contenir uniquement des surcharges de variables déjà déclarées précédemment dans les thèmes parent ou dans le dossier lib de Magento.
- global/ Nom de dossier purement indicatif.
  - _vars.less Nom de fichier purement indicatif. Il doit contenir les variables que vous allez créer spécifiquement pour votre thème. Autrement dit, ces dernières ne doivent PAS se trouver dans les fichiers pré-existants _theme.less et _variables.less, mais dans un fichier custom que vous créerez exprès pour l’occasion et que vous @import-erez depuis le fichier _extend.less.

Mediaqueries

Pour des recettes qui fonctionnent: [Magento 2] Mediaqueries LESS avec les mixins du core.

[Magento 2] Mediaqueries LESS avec les mixins du core

20/01/2021 / admin

Pour utiliser min-width et max-width dans la même déclaration, voir l’exemple donné pour Tablet
Pour soustraire 1px à une valeur déclarée dans une variable du core (@screen__xl par exemple), se référer à l’exemple donné pour Tablet. L’utilisation de calc() est obligatoire car les valeurs des variables du core incluent l’unité (@screen__xl: 1440px par exemple) et que, contrairement à ce qu’indique la documentation officielle (dont l’exemple est FAUX!!!), il ne faut pas déclarer (max-width: @screen__xl - 1) mais bien (max-width: calc(@screen__xl ~"- 1px")). Merci les gars pour le mal de tête, hein.

/*
 * Out-of-the-box MEDIAQUERIES
 * https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/responsive-web-design/rwd_css.html
 * Responsive mixins usage documentation: lib/web/css/docs/source/_responsive.less
 */

//  # Consider out-of-the-box Magento 2 responsive breakpoints
//  In Magento UI library there are predefined variables for breakpoints.
//  ```css
//  @screen__xxs: 320px;
//  @screen__xs: 480px;
//  @screen__s: 640px;
//  @screen__m: 768px;
//  @screen__l: 1024px;
//  @screen__xl: 1440px;



//
//  Common (styles-m.css)
//  _____________________________________________

& when (@media-common = true) {
    // your code
}



//
//  Mobile (styles-m.css)
//  _____________________________________________

// From 0px to 640px
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
    // your code
}

// From 0px to 768px
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    // your code
}



//
//  Mobile + Tablet
//  _____________________________________________

// From 0px to 1439px
& when (@media-target = 'mobile'), (@media-target = 'all') {
    @media only screen and (max-width: calc(@screen__xl ~"- 1px")) {
        // your code
    }
}



//
//  Tablet + Desktop
//  _____________________________________________

// From 768px to ∞ (overrides ALL Tablet!)
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    // your code
}

// From 1024px to ∞ (overrides big Tablet only!)
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
    // your code
}



//
//  Tablet ONLY
//  _____________________________________________

// This will add styles for tablet devices. When using native media-queries, we recommend wrapping your media-queries with media-width Magento mixins or media-target
// Between 768px and 1439px
& when (@media-target = 'desktop'), (@media-target = 'all') {
    @media only screen and (min-width: @screen__m) and (max-width: calc(@screen__xl ~"- 1px")) {
        // your code
    }
}



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

// From 1440px to ∞
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__xl) {
    // your code
}

/*
 * End: Out-of-the-box MEDIAQUERIES
 */

* Out-of-the-box MEDIAQUERIES

* https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/responsive-web-design/rwd_css.html

* Responsive mixins usage documentation: lib/web/css/docs/source/_responsive.less

// # Consider out-of-the-box Magento 2 responsive breakpoints

// In Magento UI library there are predefined variables for breakpoints.

// ```css

// @screen__xxs: 320px;

// @screen__xs: 480px;

// @screen__s: 640px;

// @screen__m: 768px;

// @screen__l: 1024px;

// @screen__xl: 1440px;

// Common (styles-m.css)

// _____________________________________________

& when (@media-common = true) {

// your code

}

// Mobile (styles-m.css)

// _____________________________________________

// From 0px to 640px

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {

// your code

}

// From 0px to 768px

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {

// your code

}

// Mobile + Tablet

// _____________________________________________

// From 0px to 1439px

& when (@media-target = 'mobile'), (@media-target = 'all') {

@media only screen and (max-width: calc(@screen__xl ~"- 1px")) {

// your code

}

// Tablet + Desktop

// _____________________________________________

// From 768px to ∞ (overrides ALL Tablet!)

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

// your code

}

// From 1024px to ∞ (overrides big Tablet only!)

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

// your code

}

// Tablet ONLY

// _____________________________________________

// This will add styles for tablet devices. When using native media-queries, we recommend wrapping your media-queries with media-width Magento mixins or media-target

// Between 768px and 1439px

& when (@media-target = 'desktop'), (@media-target = 'all') {

@media only screen and (min-width: @screen__m) and (max-width: calc(@screen__xl ~"- 1px")) {

// your code

}

// Desktop (style-l.css)

// _____________________________________________

// From 1440px to ∞

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

// your code

}

* End: Out-of-the-box MEDIAQUERIES

[Magento 2] Les fichiers styles-m.css ou styles-l.css ne se génèrent pas dans le cadre d’un thème qui hérite de Blank ou de Luma

20/01/2021 / admin

Quelques trucs à vérifier:

Le problème que j’ai rencontré:

Magento 2 ne parvient pas à me générer « styles-m.css » par exemple; j’ai ce message d’erreur lorsque j’essaye d’afficher dans le navigateur, la source du fichier http://mon-site.local/static/version1611129694/frontend/MyVendor/mytheme/fr_FR/css/styles-m.css

Notice: Trying to access array offset on value of type null in /home/mike/www/project/vendor/wikimedia/less.php/lib/Less/Tree/Variable.php on line 49
#1 Magento\Framework\View\Asset\PreProcessor\AlternativeSource->processContent() called at [vendor/magento/framework/View/Asset/PreProcessor/AlternativeSource.php:114]
#2 Magento\Framework\View\Asset\PreProcessor\AlternativeSource->process() called at [vendor/magento/module-developer/Model/View/Asset/PreProcessor/PreprocessorStrategy.php:78]
#3 Magento\Developer\Model\View\Asset\PreProcessor\PreprocessorStrategy->process() called at [vendor/magento/framework/View/Asset/PreProcessor/Pool.php:77]
#4 Magento\Framework\View\Asset\PreProcessor\Pool->process() called at [vendor/magento/framework/View/Asset/Source.php:152]
#5 Magento\Framework\View\Asset\Source->preProcess() called at [vendor/magento/framework/View/Asset/Source.php:105]
#6 Magento\Framework\View\Asset\Source->getFile() called at [vendor/magento/framework/View/Asset/File.php:158]
#7 Magento\Framework\View\Asset\File->getSourceFile() called at [vendor/magento/framework/App/StaticResource.php:146]
#8 Magento\Framework\App\StaticResource->launch() called at [vendor/magento/framework/App/Bootstrap.php:263]
#9 Magento\Framework\App\Bootstrap->run() called at [pub/static.php:13]

Notice: Trying to access array offset on value of type null in /home/mike/www/project/vendor/wikimedia/less.php/lib/Less/Tree/Variable.php on line 49

#1 Magento\Framework\View\Asset\PreProcessor\AlternativeSource->processContent() called at [vendor/magento/framework/View/Asset/PreProcessor/AlternativeSource.php:114]

#2 Magento\Framework\View\Asset\PreProcessor\AlternativeSource->process() called at [vendor/magento/module-developer/Model/View/Asset/PreProcessor/PreprocessorStrategy.php:78]

#3 Magento\Developer\Model\View\Asset\PreProcessor\PreprocessorStrategy->process() called at [vendor/magento/framework/View/Asset/PreProcessor/Pool.php:77]

#4 Magento\Framework\View\Asset\PreProcessor\Pool->process() called at [vendor/magento/framework/View/Asset/Source.php:152]

#5 Magento\Framework\View\Asset\Source->preProcess() called at [vendor/magento/framework/View/Asset/Source.php:105]

#6 Magento\Framework\View\Asset\Source->getFile() called at [vendor/magento/framework/View/Asset/File.php:158]

#7 Magento\Framework\View\Asset\File->getSourceFile() called at [vendor/magento/framework/App/StaticResource.php:146]

#8 Magento\Framework\App\StaticResource->launch() called at [vendor/magento/framework/App/Bootstrap.php:263]

#9 Magento\Framework\App\Bootstrap->run() called at [pub/static.php:13]

Vérifier l’héritage des thèmes via l’interface d’admin

CONTENU > Design > Configuration.
La première rangée doit être renseigner avec le thème dont vous héritez (si vous décidez d’hériter d’un thème). Ce n’est qu’à partir de la seconde rangée que vous assignerez votre ou vos thème(s) custom.

Exemple: première rangée du tableau (« Par défaut: Global », « Nom du thème: »), assigner le thème « Magento Blank » (ou Luma, selon celui duquel votre thème custom hérite).
A partir de la seconde rangée seulement, assignez votre ou vos thème(s) custom.

On n’oublie pas de vider tous les caches suite à cette modification!

Désactiver les caches Front-End

Via la commande bin/magento cache:disable full_page block_html layout

Désactiver le versionning des statiques

Via la commande bin/magento config:set dev/static/sign 0

Assigner les droits sur tous les fichiers de l’instance (sur tout le projet)

Deux commandes à saisir l’une après l’autre:

// pour le user et le groupe:
chmown -R user_www:groupe_www dossier_du_site
// pour donner à user et group (ug) les droits de lecture/écriture (+rw)
chmod -R ug+rw dossier_du_site

// pour le user et le groupe:

chmown -R user_www:groupe_www dossier_du_site

// pour donner à user et group (ug) les droits de lecture/écriture (+rw)

chmod -R ug+rw dossier_du_site

Vérifier l’arbo et les noms des fichiers dans votre thème custom

Ces derniers doivent correspondre au modèle Magento 2 afin que l’héritage se fasse correctement.

Exemple: lorsque vous héritez de Blank, un fichier web/css/source/_extend.less (ATTENTION pas de « s » à la fin de « extend »!!! doit vous servir à importer vos fichiers LESS spécifiques.

[javaScript] Quelques expressions régulières (Regex) utiles

15/01/2021 / admin

Source: Regex match string until whitespace Javascript.

Une regex qui extrait, à partir d’une chaîne de caractères de type level1 nav-1-1 category-item first active parent is-submenu-item is-drilldown-submenu-item la classe qui commence par nav- et se termine au prochain espacement (whitespace):

$('.level1', '#megaMenu').on('click', function(e){ e.preventDefault(); let $_THIS = $(this); $_THIS.removeClass(function () { // Select the element divs which has class that starts with "nav-" var className = this.className.match(/(nav-)[^\s]+/gi); // Get a match to match the pattern "Starts with nav- and until next whitespace" and extract that classname console.log(className); // ["nav-1-1"] }); });

1
2
3
4
5
6
7
8
9

$('.level1', '#megaMenu').on('click', function(e){
    e.preventDefault();
    let $_THIS = $(this);

    $_THIS.removeClass(function () { // Select the element divs which has class that starts with "nav-"
        var className = this.className.match(/(nav-)[^\s]+/gi); // Get a match to match the pattern "Starts with nav- and until next whitespace" and extract that classname
        console.log(className); // ["nav-1-1"]
    });
});

[Magento 2] Utiliser une Regex et la méthode Trim de jQuery pour affecter une largeur dynamique aux tooltips

13/01/2021 / admin

En fait on ne va pas utiliser de regex comme annoncé dans le titre, car la méthode trim() de jQuery fait le boulot attendu de supprimer tous les espaces au début et à la fin d’une chaîne de caractères.

Le code ci-dessous vérifie si il y a au moins un tooltip dans la page. Si « oui », il récupère le contenu de chaque tooltip présent, retire les espaces blancs (white spaces) au début et à la fin de la chaîne de caractères récupérée, compte le nombre de caractères restant et attribue une largeur fixe en pixels au tooltip en fonction de la formule nombre de caractères * 2.25.

// Set tooltip dynamic width regarding its content if ( $('.field-tooltip-content').length ) { $('.field-tooltip-content').each(function(){ let $_THIS = $(this), TOOLTIP_CONTENT = $_THIS.html(), TOOLTIP_CHARACTER_COUNT = $.trim(TOOLTIP_CONTENT).length; $_THIS.css('width', TOOLTIP_CHARACTER_COUNT *2.25 + 'px'); }); }

1
2
3
4
5
6
7
8
9
10

        // Set tooltip dynamic width regarding its content
        if ( $('.field-tooltip-content').length ) {
            $('.field-tooltip-content').each(function(){
               let $_THIS = $(this),
                   TOOLTIP_CONTENT = $_THIS.html(),
                   TOOLTIP_CHARACTER_COUNT = $.trim(TOOLTIP_CONTENT).length;

               $_THIS.css('width', TOOLTIP_CHARACTER_COUNT *2.25 + 'px');
            });
        }

Résoudre les problèmes d’affichage d’un picto SVG sous Mac et le navigateur Safari

13/01/2021 / admin

Picto SVG qui s’affiche correctement sous Mac et le navigateur Safari:

<?xml version="1.0" encoding="UTF-8"?> <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>①/icons/expand</title> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"> <g stroke="#34393b"> <line x1="15.5" y1="8.499" x2="23.5" y2="0.499"></line> <line x1="0.5" y1="23.499" x2="8.5" y2="15.499"></line> <polyline points="5.5 23.499 0.5 23.499 0.5 18.499"></polyline> <polyline points="23.5 5.499 23.5 0.499 18.5 0.499"></polyline> <line x1="15.5" y1="15.499" x2="23.5" y2="23.499"></line> <line x1="0.5" y1="0.499" x2="8.5" y2="8.499"></line> <polyline points="0.5 5.499 0.5 0.499 5.5 0.499"></polyline> <polyline points="18.5 23.499 23.5 23.499 23.5 18.499"></polyline> </g> </g> </svg>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>①/icons/expand</title>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
        <g stroke="#34393b">
            <line x1="15.5" y1="8.499" x2="23.5" y2="0.499"></line>
            <line x1="0.5" y1="23.499" x2="8.5" y2="15.499"></line>
            <polyline points="5.5 23.499 0.5 23.499 0.5 18.499"></polyline>
            <polyline points="23.5 5.499 23.5 0.499 18.5 0.499"></polyline>
            <line x1="15.5" y1="15.499" x2="23.5" y2="23.499"></line>
            <line x1="0.5" y1="0.499" x2="8.5" y2="8.499"></line>
            <polyline points="0.5 5.499 0.5 0.499 5.5 0.499"></polyline>
            <polyline points="18.5 23.499 23.5 23.499 23.5 18.499"></polyline>
        </g>
    </g>
</svg>

Le même picto SVG (code source différent) qui ne s’affiche pas sous Mac et le navigateur Safari:

<?xml version="1.0" encoding="UTF-8"?> <svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="filter-1"> <feColorMatrix in="SourceGraphic" type="matrix" values=""></feColorMatrix> </filter> </defs> <g id="——-WS-fiche-produit" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"> <g id="fiche-produit-qté---WS" transform="translate(-724.000000, -733.000000)"> <g id="produit" transform="translate(30.000000, 130.000000)"> <g id="icons-expand" transform="translate(69.000000, 0.000000)" filter="url(#filter-1)"> <g transform="translate(626.000000, 604.000000)" id="expand-1"> <line x1="12.9166667" y1="7.0825" x2="19.5833333" y2="0.415833333" id="Shape" stroke="#000000"></line> <line x1="0.416666667" y1="19.5825" x2="7.08333333" y2="12.9158333" id="Shape" stroke="#000000"></line> <polyline id="Shape" stroke="#000000" points="4.58333333 19.5825 0.416666667 19.5825 0.416666667 15.4158333"></polyline> <polyline id="Shape" stroke="#000000" points="19.5833333 4.5825 19.5833333 0.415833333 15.4166667 0.415833333"></polyline> <line x1="12.9166667" y1="12.9158333" x2="19.5833333" y2="19.5825" id="Shape" stroke="#000000"></line> <line x1="0.416666667" y1="0.415833333" x2="7.08333333" y2="7.0825" id="Shape" stroke="#000000"></line> <polyline id="Shape" stroke="#000000" points="0.416666667 4.5825 0.416666667 0.415833333 4.58333333 0.415833333"></polyline> <polyline id="Shape" stroke="#000000" points="15.4166667 19.5825 19.5833333 19.5825 19.5833333 15.4158333"></polyline> </g> </g> </g> </g> </g> </svg>

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

<?xml version="1.0" encoding="UTF-8"?>
<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <filter id="filter-1">
            <feColorMatrix in="SourceGraphic" type="matrix" values=""></feColorMatrix>
        </filter>
    </defs>
    <g id="——-WS-fiche-produit" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
        <g id="fiche-produit-qté---WS" transform="translate(-724.000000, -733.000000)">
            <g id="produit" transform="translate(30.000000, 130.000000)">
                <g id="icons-expand" transform="translate(69.000000, 0.000000)" filter="url(#filter-1)">
                    <g transform="translate(626.000000, 604.000000)" id="expand-1">
                        <line x1="12.9166667" y1="7.0825" x2="19.5833333" y2="0.415833333" id="Shape" stroke="#000000"></line>
                        <line x1="0.416666667" y1="19.5825" x2="7.08333333" y2="12.9158333" id="Shape" stroke="#000000"></line>
                        <polyline id="Shape" stroke="#000000" points="4.58333333 19.5825 0.416666667 19.5825 0.416666667 15.4158333"></polyline>
                        <polyline id="Shape" stroke="#000000" points="19.5833333 4.5825 19.5833333 0.415833333 15.4166667 0.415833333"></polyline>
                        <line x1="12.9166667" y1="12.9158333" x2="19.5833333" y2="19.5825" id="Shape" stroke="#000000"></line>
                        <line x1="0.416666667" y1="0.415833333" x2="7.08333333" y2="7.0825" id="Shape" stroke="#000000"></line>
                        <polyline id="Shape" stroke="#000000" points="0.416666667 4.5825 0.416666667 0.415833333 4.58333333 0.415833333"></polyline>
                        <polyline id="Shape" stroke="#000000" points="15.4166667 19.5825 19.5833333 19.5825 19.5833333 15.4158333"></polyline>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

[Magento 2] Afficher/masquer le bouton « Effacer tous les filtres » dans la liste des catégories/produits

12/01/2021 / admin

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">.

<?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; ?>

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');):

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

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:

#filterActions.no-active-filter { display: none !important; }

1
2
3

#filterActions.no-active-filter {
    display: none !important;
}

Le bloc-notes professionnel d'un développeur front-end senior

Articles récents

Catégories

Archives

Méta

[Magento 2] Ajouter des polices Google Fonts

[Magento 2] Depuis un template PHTML, détecter si la page sur laquelle nous nous trouvons est la homepage, une page produit, une page catégorie

[CSS] Désactiver le scroll dans la page lorsqu’un élément en position absolue (de type Modale, Off-Canvas, …) est ouvert en sur-impression

[Magento 2] Créer un thème enfant du thème Blank, astuces et bonnes pratiques

Architecture de votre thème

Architecture globale d’un thème Magento 2 enfant de Blank

composer.json

registration.php

requirejs-config.js

theme.xml

Les styles/fichiers LESS

Mediaqueries

[Magento 2] Mediaqueries LESS avec les mixins du core

[Magento 2] Les fichiers styles-m.css ou styles-l.css ne se génèrent pas dans le cadre d’un thème qui hérite de Blank ou de Luma

Le problème que j’ai rencontré:

Vérifier l’héritage des thèmes via l’interface d’admin

Désactiver les caches Front-End

Désactiver le versionning des statiques

Assigner les droits sur tous les fichiers de l’instance (sur tout le projet)

Vérifier l’arbo et les noms des fichiers dans votre thème custom

[javaScript] Quelques expressions régulières (Regex) utiles

[Magento 2] Utiliser une Regex et la méthode Trim de jQuery pour affecter une largeur dynamique aux tooltips

Résoudre les problèmes d’affichage d’un picto SVG sous Mac et le navigateur Safari

Picto SVG qui s’affiche correctement sous Mac et le navigateur Safari:

Le même picto SVG (code source différent) qui ne s’affiche pas sous Mac et le navigateur Safari:

[Magento 2] Afficher/masquer le bouton « Effacer tous les filtres » dans la liste des catégories/produits

Le bloc-notes professionnel d'un développeur front-end senior

Articles récents

Catégories

Tags

Archives

Méta

Architecture de votre thème

Architecture globale d’un thème Magento 2 enfant de Blank

composer.json

registration.php

requirejs-config.js

theme.xml

Les styles/fichiers LESS

Mediaqueries

Le problème que j’ai rencontré:

Vérifier l’héritage des thèmes via l’interface d’admin

Désactiver les caches Front-End

Désactiver le versionning des statiques

Assigner les droits sur tous les fichiers de l’instance (sur tout le projet)

Vérifier l’arbo et les noms des fichiers dans votre thème custom

Picto SVG qui s’affiche correctement sous Mac et le navigateur Safari:

Le même picto SVG (code source différent) qui ne s’affiche pas sous Mac et le navigateur Safari: