Étiquette : LESS

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

[Magento 2] Etirer de manière homothétique le visuel principal de la fiche produit affiché via Fotorama

05/01/2021 / admin

Testé fonctionnel Magento 2.4. La markup HTML de la fiche produit a cependant été surchargé par rapport au standard. On retrouve la première rangée d’informations sur deux colonnes (gauche: visuel principal et carousel Fotorama; droite: libellé produit, prix, formulaire d’ajout au panier).

<div class="column main"> <section class="product-top row"> <div class="product-top-left"></div> <div class="product-top-right"></div> </section> </div>

1
2
3
4
5
6

<div class="column main">
    <section class="product-top row">
        <div class="product-top-left"></div>
        <div class="product-top-right"></div>
    </section>
</div>

Surcharger la largeur et la hauteur max du visuel principal dans le fichier etc/view.xml de votre thème:

<?xml version="1.0"?> <view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd"> <media> <images module="Magento_Catalog"> <image id="product_page_image_large" type="image"/> <image id="product_page_image_medium" type="image"> <width>968</width> <height>968</height> </image> </images> </media>

1
2
3
4
5
6
7
8
9
10
11

<?xml version="1.0"?>
<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
    <media>
        <images module="Magento_Catalog">
            <image id="product_page_image_large" type="image"/>
            <image id="product_page_image_medium" type="image">
                <width>968</width>
                <height>968</height>
            </image>
        </images>
    </media>

Le code LESS (qui fait appel à un mixin spécifique permettant d’écrire des boucles FOR qui exploitent des données consignées dans un ARRAY. Il ne faudra donc pas oublier de l’inclure dans votre projet! (Documentation).
Lisez les commentaires dans mon code pour plus de documentation:

.product-top { .product-top-left { /* * @screen-resolutions: un tableau des résolutions d'écran (largeurs) ciblées par le redimensionnement du visuel principal de la fiche produit. * C'est LA SEULE VALEUR A MODIFIER! Ajouter ou retirer des résolutions d'écran selon vos besoins de support. * Résolutions les plus répandues en Europe (en décembre 2020 pour ce qui est renseigné dans le tableau): * https://gs.statcounter.com/screen-resolution-stats/all/europe */ @screen-resolutions: 1280px, 1366px, 1440px, 1536px, 1640px, 1920px; /* * @global-gutter-width: la largeur des gouttières telle que définie dans :root{ var(--gutter) }. * @thumbs-col-width: la largeur (marge à droite comprise) de la colonne des miniatures. */ @global-gutter-width: 3.75rem; @thumbs-col-width: 80px; // Dépendant de "global/lib/for.less" pour exploiter les données issues d'un tableau dans une boucle FOR avec LESS; .for(@screen-resolutions); .-each(@value) { /* * @parent-row-width: la largeur de l'élément du DOM qui a la classe ".product-top". */ @parent-row-width: @value - (@global-gutter-width * 2); @media (min-width: @value) { min-height: (@parent-row-width/2) !important; flex: 0 0 (@parent-row-width/2) + @thumbs-col-width !important; } } } } /* * Résolution minimum consignée dans le tableau @screen-resolutions */ @media (min-width: 1280px) { .product-top .product-top-left { max-width: 100% !important; .fotorama__stage__frame { display: flex; background: rgba(231, 231, 231, 0.5); } .product.media .fotorama__stage img { top: unset !important; align-self: center; } } }

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
36
37
38
39
40
41
42
43
44
45
46

.product-top {
    .product-top-left {
        /*
         * @screen-resolutions: un tableau des résolutions d'écran (largeurs) ciblées par le redimensionnement du visuel principal de la fiche produit.
         * C'est LA SEULE VALEUR A MODIFIER! Ajouter ou retirer des résolutions d'écran selon vos besoins de support.
         * Résolutions les plus répandues en Europe (en décembre 2020 pour ce qui est renseigné dans le tableau):
         * https://gs.statcounter.com/screen-resolution-stats/all/europe
         */
        @screen-resolutions: 1280px, 1366px, 1440px, 1536px, 1640px, 1920px;
        /*
         * @global-gutter-width: la largeur des gouttières telle que définie dans :root{ var(--gutter) }.
         * @thumbs-col-width: la largeur (marge à droite comprise) de la colonne des miniatures.
         */
        @global-gutter-width: 3.75rem;
        @thumbs-col-width: 80px;

        // Dépendant de "global/lib/for.less" pour exploiter les données issues d'un tableau dans une boucle FOR avec LESS;
        .for(@screen-resolutions); .-each(@value) {
            /*
             * @parent-row-width: la largeur de l'élément du DOM qui a la classe ".product-top".
             */
            @parent-row-width: @value - (@global-gutter-width * 2);
            @media (min-width: @value) {
                min-height: (@parent-row-width/2) !important;
                flex: 0 0 (@parent-row-width/2) + @thumbs-col-width !important;
            }
        }
    }
}

/*
* Résolution minimum consignée dans le tableau @screen-resolutions
*/
@media (min-width: 1280px) {
    .product-top .product-top-left {
        max-width: 100% !important;
        .fotorama__stage__frame {
            display: flex;
            background: rgba(231, 231, 231, 0.5);
        }
        .product.media .fotorama__stage img {
            top: unset !important;
            align-self: center;
        }
    }
}

Version non factorisée (ça fait la même chose en moins bien conceptualisé et en beaucoup plus chiant à maintenir):

.product-top { .product_page_image_large(@parent-row-width) { /* * @parent-row-width: la largeur de l'élément qui a la classe .product-top * 80px: la largeur (marge à droite comprise) de la colonne des miniatures */ max-width: 100% !important; min-height: (@parent-row-width/2) !important; flex: 0 0 (@parent-row-width/2) + 80px !important; } // Résolutions les plus répandues en Europe en décembre 2020: // https://gs.statcounter.com/screen-resolution-stats/all/europe @media (min-width: 1280px) { // @parent-row-width: 1160px; .product-top-left { .product_page_image_large(1160px); .fotorama__stage__frame { display: flex; background: rgba(231, 231, 231, 0.5); } .product.media .fotorama__stage img { top: unset !important; align-self: center; } } } @media (min-width: 1366px) { // @parent-row-width: 1246px; .product-top-left { .product_page_image_large(1246px); } } @media (min-width: 1440px) { // @parent-row-width: 1320px; .product-top-left { .product_page_image_large(1320px); } } @media (min-width: 1536px) { // @parent-row-width: 1416px; .product-top-left { .product_page_image_large(1416px); } } @media (min-width: 1640px) { // @parent-row-width: 1775px; .product-top-left { .product_page_image_large(1775px); } } @media (min-width: 1920px) { // @parent-row-width: 1800px; .product-top-left { .product_page_image_large(1800px); } } }

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

.product-top {
    .product_page_image_large(@parent-row-width) {
        /*
         * @parent-row-width: la largeur de l'élément qui a la classe .product-top
         * 80px: la largeur (marge à droite comprise) de la colonne des miniatures
         */
        max-width: 100% !important;
        min-height: (@parent-row-width/2) !important;
        flex: 0 0 (@parent-row-width/2) + 80px !important;
    }
    // Résolutions les plus répandues en Europe en décembre 2020:
    // https://gs.statcounter.com/screen-resolution-stats/all/europe
    @media (min-width: 1280px) {
        // @parent-row-width: 1160px;
        .product-top-left {
            .product_page_image_large(1160px);

            .fotorama__stage__frame {
                display: flex;
                background: rgba(231, 231, 231, 0.5);
            }
            .product.media .fotorama__stage img {
                top: unset !important;
                align-self: center;
            }
        }
    }
    @media (min-width: 1366px) {
        // @parent-row-width: 1246px;
        .product-top-left {
            .product_page_image_large(1246px);
        }
    }
    @media (min-width: 1440px) {
        // @parent-row-width: 1320px;
        .product-top-left {
            .product_page_image_large(1320px);
        }
    }
    @media (min-width: 1536px) {
        // @parent-row-width: 1416px;
        .product-top-left {
            .product_page_image_large(1416px);
        }
    }
    @media (min-width: 1640px) {
        // @parent-row-width: 1775px;
        .product-top-left {
            .product_page_image_large(1775px);
        }
    }
    @media (min-width: 1920px) {
        // @parent-row-width: 1800px;
        .product-top-left {
            .product_page_image_large(1800px);
        }
    }
}

[Magento 2] Des cases à cocher et des boutons radio sexy dans vos formulaires avec le markup HTML du core

10/06/2020 / admin

ATTENTION: les input et label doivent respectivement avoir des attributs for et id ayant une valeur identique afin que les styles fonctionnent correctement!

// Magento 2 core forms sexy inputs type=radio and type=checkbox // !!! Will only work with Magento 2 core forms markup (replace "checkbox" with "radio" whenever needed) !!! // <div class="field choice"> // <input type="checkbox" id="is_subscribed" class="checkbox" /> // <label for="is_subscribed" class="label"><span>Abonnez-vous à la lettre d’information</span></label> // </div> .field.choice { @custom-field_choice---width: 20px; position: relative; input[type="radio"], input[type="checkbox"] { position: absolute; left: -99999em; + .label { &:before { content: ""; display: inline-block; vertical-align: bottom; margin-right: 8px; width: @custom-field_choice---width; height: @custom-field_choice---width; border: 1px solid @color_green; cursor: pointer; background: #fff; // Fine tuning vertical-align if needed //position: relative; //top: 2px; } } &:checked { + .label { &:before { background: @color_green; } } } } input[type="radio"] { + .label { &:before { border-radius: @custom-field_choice---width; } } } input[type="checkbox"] { + .label { &:before { border-radius: @custom-field_choice---width/10; } } } }

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

// Magento 2 core forms sexy inputs type=radio and type=checkbox
// !!! Will only work with Magento 2 core forms markup (replace "checkbox" with "radio" whenever needed) !!!
// <div class="field choice">
//     <input type="checkbox" id="is_subscribed" class="checkbox" />
//     <label for="is_subscribed" class="label"><span>Abonnez-vous à la lettre d’information</span></label>
// </div>
.field.choice {
    @custom-field_choice---width: 20px;
    position: relative;
    input[type="radio"],
    input[type="checkbox"] {
        position: absolute;
        left: -99999em;
        + .label {
            &:before {
                content: "";
                display: inline-block;
                vertical-align: bottom;
                margin-right: 8px;
                width: @custom-field_choice---width;
                height: @custom-field_choice---width;
                border: 1px solid @color_green;
                cursor: pointer;
                background: #fff;

                // Fine tuning vertical-align if needed
                //position: relative;
                //top: 2px;
            }
        }
        &:checked {
            + .label {
                &:before {
                    background: @color_green;
                }
            }
        }
    }
    input[type="radio"] {
        + .label {
            &:before {
                border-radius: @custom-field_choice---width;
            }
        }
    }
    input[type="checkbox"] {
        + .label {
            &:before {
                border-radius: @custom-field_choice---width/10;
            }
        }
    }
}

[Magento 2] Gérer l’affichage des formulaires avec les mixins LESS de la Magento UI Library

10/06/2020 / admin

Documentation officielle: Magento UI Library – Forms mixins.

Bonnes pratiques

Si vous avez simplement l’intention de changer les valeurs des variables existantes (regardez la doc, il y en a beaucoup, vous pouvez probablement vous en tirer sans aller plus loin que ça…) faites le dans le fichier _theme.less de votre thème.

Fields customization variables – The .lib-form-field() mixin variables

Libellés au-dessus des champs, une colonne

& when (@media-common = true) { .fieldset { > .field { .lib-form-field( @_type: block ); } } }

1
2
3
4
5
6
7
8
9

& when (@media-common = true) {
    .fieldset {
        > .field {
            .lib-form-field(
                @_type: block
            );
        }
    }
}

Libellés au-dessus des champs, deux colonnes

A savoir: lorsqu’on affiche le champ sur plusieurs colonnes, on peut utiliser la variable (appartenant au mixin) @_column-number (qui répond elle-même à la variable globale @form-field-column__number paramétrée par défaut à 2 pour modifier le nombre de colonnes sur lesquelles le formulaire va s’étaler.

& when (@media-common = true) { .fieldset { > .field { .lib-form-field( @_type: block, @_column: true ); } } }

1
2
3
4
5
6
7
8
9
10

& when (@media-common = true) {
    .fieldset {
        > .field {
            .lib-form-field(
                @_type: block,
                @_column: true
            );
        }
    }
}

Libellés à côté des champs, une colonne

& when (@media-common = true) { .fieldset { > .field { .lib-form-field( @_type: inline ); } } }

1
2
3
4
5
6
7
8
9

& when (@media-common = true) {
    .fieldset {
        > .field {
            .lib-form-field(
                @_type: inline
            );
        }
    }
}

Libellés à côté des champs, deux colonnes

A savoir: (je me répète…) lorsqu’on affiche le champ sur plusieurs colonnes, on peut utiliser la variable (appartenant au mixin) @_column-number (qui répond elle-même à la variable globale @form-field-column__number paramétrée par défaut à 2 pour modifier le nombre de colonnes sur lesquelles le formulaire va s’étaler.

& when (@media-common = true) { .fieldset { > .field { .lib-form-field( @_type: inline, @_column: true ); } } }

1
2
3
4
5
6
7
8
9
10

& when (@media-common = true) {
    .fieldset {
        > .field {
            .lib-form-field(
                @_type: inline,
                @_column: true
            );
        }
    }
}

[Magento 2] Nombre de produits par rangée via CSS LESS dans les listes de catégories

03/03/2020 / admin

Utiliser les variables mises à disposition par Magento 2

Si votre thème hérite de blank: dans le fichier @product-grid-items-per-row-layout-2-left-screen-s (que vous devrez surcharger dans votre thème), modifiez les valeurs des variables suivantes:

@product-grid-items-per-row-layout-default: 2; @product-grid-items-per-row-layout-1-screen-s: 3; @product-grid-items-per-row-layout-1-screen-m: 4; @product-grid-items-per-row-layout-1-screen-l: 5; @product-grid-items-per-row-layout-2-left-screen-s: 3; @product-grid-items-per-row-layout-2-left-screen-m: 4; @product-grid-items-per-row-layout-2-left-screen-l: ''; @product-grid-items-per-row-layout-2-right-screen-s: 3; @product-grid-items-per-row-layout-2-right-screen-m: 4; @product-grid-items-per-row-layout-2-right-screen-l: ''; @product-grid-items-per-row-layout-3-screen-s: 3; @product-grid-items-per-row-layout-3-screen-m: ''; @product-grid-items-per-row-layout-3-screen-l: '';

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

@product-grid-items-per-row-layout-default: 2;

@product-grid-items-per-row-layout-1-screen-s: 3;
@product-grid-items-per-row-layout-1-screen-m: 4;
@product-grid-items-per-row-layout-1-screen-l: 5;

@product-grid-items-per-row-layout-2-left-screen-s: 3;
@product-grid-items-per-row-layout-2-left-screen-m: 4;
@product-grid-items-per-row-layout-2-left-screen-l: '';

@product-grid-items-per-row-layout-2-right-screen-s: 3;
@product-grid-items-per-row-layout-2-right-screen-m: 4;
@product-grid-items-per-row-layout-2-right-screen-l: '';

@product-grid-items-per-row-layout-3-screen-s: 3;
@product-grid-items-per-row-layout-3-screen-m: '';
@product-grid-items-per-row-layout-3-screen-l: '';

Utiliser la fonction calc de CSS

Pour 4 produits par rangée:

.products-grid .product-items .product-item { -ms-flex: 0 0 calc(100% / 4); flex: 0 0 calc(100% / 4); max-width: calc(100% / 4); }

1
2
3
4
5

  .products-grid .product-items .product-item {
    -ms-flex: 0 0 calc(100% / 4);
    flex: 0 0 calc(100% / 4);
    max-width: calc(100% / 4);
  }

Pour 1 produit par rangée en Mobile, 2 produits par rangée en Tablet, 4 produits par rangée en Desktop:

// Normalement, media-query inutile pour le Mobile (mobile-first) @media (max-width: 767px) { .products-grid .product-items .product-item { -ms-flex: 0 0 calc(100% / 1); flex: 0 0 calc(100% / 1); max-width: calc(100% / 1); } } @media (min-width: 768px) and (max-width: 991px) { .products-grid .product-items .product-item { -ms-flex: 0 0 calc(100% / 2); flex: 0 0 calc(100% / 2); max-width: calc(100% / 2); } } @media (min-width: 992px) { .products-grid .product-items .product-item { -ms-flex: 0 0 calc(100% / 4); flex: 0 0 calc(100% / 4); max-width: calc(100% / 4); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// Normalement, media-query inutile pour le Mobile (mobile-first)
@media (max-width: 767px) {
  .products-grid .product-items .product-item {
    -ms-flex: 0 0 calc(100% / 1);
    flex: 0 0 calc(100% / 1);
    max-width: calc(100% / 1);
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .products-grid .product-items .product-item {
    -ms-flex: 0 0 calc(100% / 2);
    flex: 0 0 calc(100% / 2);
    max-width: calc(100% / 2);
  }
}

@media (min-width: 992px) {
  .products-grid .product-items .product-item {
    -ms-flex: 0 0 calc(100% / 4);
    flex: 0 0 calc(100% / 4);
    max-width: calc(100% / 4);
  }
}

Petite subtilité pour les thèmes de merde qui n’utilisent pas Flexbox

Vous allez vous retrouver à devoir surcharger des choses de ce style:

.page-layout-1column { .products.wrapper.products-grid .product-items .product-item { width: calc((100% - 6%) / 4); &:nth-child(3n+1){ margin-left: 2%; } &:nth-child(4n+1){ margin-left: 0; } } }

1
2
3
4
5
6
7
8
9
10
11

  .page-layout-1column {
      .products.wrapper.products-grid .product-items .product-item {
        width: calc((100% - 6%) / 4);
        &:nth-child(3n+1){
          margin-left: 2%;
        }
        &:nth-child(4n+1){
          margin-left: 0;
        }
      }
  }

Dans width: calc((100% - 6%) / 4);, la valeur de 6% correspond à la somme des valeurs des marges margin-left apposées pour une rangée donnée et la valeur 4 au nombre de produits attendus pour une rangée.

Dans mon exemple, j’ai par exemple 2% de marge entre mes produits. 4 produits par rangées = 3x la marge de séparation de 2% = 6%.

[Magento 2] Exploiter la fonctionnalité CSS critical path avec un fichier LESS (via Grunt)

24/01/2020 / admin

Versions de Magento 2.3.3+: Petit topo sur le CSS critical path dans la doc front-end officielle.

La fonctionnalité est limitée, nativement, à l’utilisation d’un fichier au format CSS (pas de LESS).

Pour contourner cette limitation, créez un fichier critical.less dans app/design/frontend/Vendor/theme/web/css/critical.less et déclarez ce dernier dans votre config Grunt (dev/tools/grunt/configs/local-themes.js):

module.exports = { yourcustomtheme: { area: 'frontend', name: 'Vendor/yourcustomtheme', locale: 'fr_FR', files: [ 'css/critical' ], dsl: 'less' } };

1
2
3
4
5
6
7
8
9
10
11

module.exports = {
    yourcustomtheme: {
        area: 'frontend',
        name: 'Vendor/yourcustomtheme',
        locale: 'fr_FR',
        files: [
            'css/critical'
        ],
        dsl: 'less'
    }
};

Puis lancez les commandes:

$ n98-magerun2 config:set dev/css/use_css_critical_path 1 $ rm -rf pub/static/*; rm -rf var/view_preprocessed/*

1
2

$ n98-magerun2 config:set dev/css/use_css_critical_path 1
$ rm -rf pub/static/*; rm -rf var/view_preprocessed/*

[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*/ } }); /*...*/

1
2
3
4
5
6
7
8
9
10
11
12

/*...*/
    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; } }

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

@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";

1
2
3

// 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(); }); }); });

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

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'] } } };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

1
2
3
4
5

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

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] Ajouter et exploiter une librairie CSS tierce

15/10/2019 / admin

Astuce testée, fonctionnelle!. Dans mon exemple, nous allons chercher à mettre en place la librairie Animate CSS pour animer le bloc product-reviews-summary short au chargement de la page page-products catalog-category-view avec l’animation SlideInUp.

Ajouter les sources d’Animate CSS 3 dans: /<Vendor>/<theme>/web/css/vendor/animate/. Pour éviter de surcharger les sources CSS en production, nous allons importer uniquement l’animation qui nous intéresse (SlideInUp) et pas la librairie complète. Pour rendre l’ensemble disponible pour plus tard, vous pouvez placer ici l’ensemble des sources (fichiers animate.css, animate.min.css et dossier complet /source.

Ajouter au fichier /<Vendor>/<theme>/web/css/source/_theme.less (ou un autre fichier de votre thème qui centralise les imports de third-party libraries):

@import '../vendor/animate/source/sliding_entrances/slideInUp.css';

1

@import '../vendor/animate/source/sliding_entrances/slideInUp.css';

Ajouter au fichier /<Vendor>/<theme>/Magento_Catalog/web/css/source/_extend.less:

// // Common (style-m.css) // _____________________________________________ & when (@media-common = true) { .product-reviews-summary.short { animation: slideInUp 0.75s; } }

1
2
3
4
5
6
7
8

//
//  Common (style-m.css)
//  _____________________________________________
& when (@media-common = true) {
  .product-reviews-summary.short {
    animation: slideInUp 0.75s;
  }
}

Attention, commande à exécuter avant de rafraîchir la fenêtre du navigateur: $ rm -rf pub/static/*; rm -rf var/view_preprocessed/*. Il faut, bien sûr, qu’un processus de compilation des assets front-end (server side ou client side) soit en-train de tourner.

[Magento 2] Ajouter et exploiter dans un fichier PHTML un composant javascript issu de Bootstrap 3 par l’intermédiaire de requireJS

15/10/2019 / admin

Astuce testée, fonctionnelle!. Dans mon exemple, nous allons chercher à mettre en place le composant Modal de Bootstrap 3.

LESS/CSS

Ajouter les sources CSS de Bootstrap 3 dans: /<Vendor>/<theme>/web/css/vendor/bootstrap/. Il faut embarquer:

le fichier /less/variables.less

le fichier /less/mixins.less

le fichier /less/modals.less

et TOUT LE DOSSIER /less/mixins/

…et pas le fichier /dist/css/bootstrap.css.

Ne pas oublier d’importer les fichiers LESS nécessaires dans une feuille de style source de votre thème (je l’ai fait dans /web/css/source/_theme.less, même si à priori ce fichier ne serait là que pour surcharger des valeurs de variables dèjà précédemment définiers dans un thème parent de Magento 2):

// Core variables and mixins @import "../vendor/bootstrap/less/variables.less"; @import "../vendor/bootstrap/less/mixins.less"; // Components w/ JavaScript @import "../vendor/bootstrap/less/modals.less";

1
2
3
4
5
6

// Core variables and mixins
@import "../vendor/bootstrap/less/variables.less";
@import "../vendor/bootstrap/less/mixins.less";

// Components w/ JavaScript
@import "../vendor/bootstrap/less/modals.less";

JS

Ajouter les sources JS de Bootstrap 3 dans: /<Vendor>/<theme>/web/js/vendor/bootstrap/. Attention: sachant que nous allons nous concentrer uniquement sur le composant Modal, il faut utiliser le fichier /js/modal.js (et pas le fichier /dist/js/bootstrap.js).

Créer le fichier: /<Vendor>/<theme>/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: { 'bsModal': 'js/vendor/bootstrap/modal' }, // 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: { 'bsModal': { deps: ['jquery'], exports: 'jQuery.fn.modal' } } };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

var config = {

    // Paths defines associations from library name (used to include the library,
    // for example when using "define") and the library file path.
    paths: {
        'bsModal': 'js/vendor/bootstrap/modal'
    },

    // 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: {
        'bsModal': {
            deps: ['jquery'],
            exports: 'jQuery.fn.modal'
        }
    }

};

Dans n’importe quel fichier *.phtml, placez le code HTML de votre modale Bootstrap. Si vos balises comportent les attributs qui vont bien vous n’aurez pas besoin de déclarer votre modale via JS. Dans le cas contraire, dans le fichier *.phtml qui contient le markup HTML de votre modale:

<script type="text/javascript"> requirejs(['jquery', 'bsModal'], function( $, bsModal ){ $('#myModal').modal(); }); </script>

1
2
3
4
5

<script type="text/javascript">
    requirejs(['jquery', 'bsModal'], function( $, bsModal ){
        $('#myModal').modal();
    });
</script>

Attention, commande à exécuter avant de rafraîchir la fenêtre du navigateur: $ php bin/magento cache:clean; rm -rf pub/static/*; rm -rf var/view_preprocessed/*.

[LESS] Un mixin pour boucler dans un tableau contenant des valeurs allant par pairs

12/06/2018 / admin

Attention: le plugin for.less utilisé dans l’exemple ci-dessous est déprécié selon un commenatire laissé dans le code source de l’auteur. Il faut désormais utiliser List/Array manipulation for Less.

Source: Loop over an array of name value pairs in LESS et mixin sous Git.

CSS color codes & names (tableaux de correspondances Nom de couleur > Code hexadécimal).

Mixin LESS (ne pas oublier d’inclure le mixin for.less) :

.Couleur { .facet-mark { &:before { display: inline-block; vertical-align: sub; content: "" !important; width: 18px; height: 18px; border: 1px solid #ededed; } } @facetColors: Beige #DEB887, Blanc #ffffff, Bleu #00b0f0, Gris #777777, Jaune #ffe209, Marron #974706, Multicolore linear-gradient(to right, #9400D3 0%,#4B0082 (100%/7)*2,#0000FF (100%/7)*3,#00FF00 (100%/7)*4,#FFFF00 (100%/7)*5, #FF7F00 (100%/7)*6,#FF0000 100%), Noir #000000, Orange #fb6e05, Rose #ff338a, Rouge #ff0000, Vert #00b050, Violet #800080; .for(@facetColors); .-each(@value) { @name: extract(@value, 1); .@{name} { .facet-mark { &:before { background: extract(@value, 2); } } } } }

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

.Couleur {
  .facet-mark {
    &:before {
      display: inline-block;
      vertical-align: sub;
      content: "" !important;
      width: 18px;
      height: 18px;
      border: 1px solid #ededed;
    }
  }
  @facetColors: Beige #DEB887,
                Blanc #ffffff,
                Bleu #00b0f0,
                Gris #777777,
                Jaune #ffe209,
                Marron #974706,
                Multicolore linear-gradient(to right, #9400D3 0%,#4B0082 (100%/7)*2,#0000FF (100%/7)*3,#00FF00 (100%/7)*4,#FFFF00 (100%/7)*5, #FF7F00 (100%/7)*6,#FF0000 100%),
                Noir #000000,
                Orange #fb6e05,
                Rose #ff338a,
                Rouge #ff0000,
                Vert #00b050,
                Violet #800080;
  .for(@facetColors); .-each(@value) {
      @name:  extract(@value, 1);
      .@{name} {
        .facet-mark {
          &:before {
            background: extract(@value, 2);
          }
        }
      }
  }
}

Rendu CSS :

.Couleur .facet-mark:before { display: inline-block; vertical-align: sub; content: "" !important; width: 18px; height: 18px; border: 1px solid #ededed; } .Couleur .Beige .facet-mark:before { background: #000; } .Couleur .Blanc .facet-mark:before { background: #fff; } .Couleur .Bleu .facet-mark:before { background: #00b0f0; } .Couleur .Gris .facet-mark:before { background: #777; } .Couleur .Jaune .facet-mark:before { background: #ffe209; } .Couleur .Marron .facet-mark:before { background: #974706; } .Couleur .Multicolore .facet-mark:before { background: #000; } .Couleur .Noir .facet-mark:before { background: #000; } .Couleur .Orange .facet-mark:before { background: #fb6e05; } .Couleur .Rose .facet-mark:before { background: #ff338a; } .Couleur .Rouge .facet-mark:before { background: red; } .Couleur .Vert .facet-mark:before { background: #00b050; } .Couleur .Violet .facet-mark:before { background: #000; }

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
36
37
38
39
40
41
42
43
44
45
46
47

.Couleur .facet-mark:before {
  display: inline-block;
  vertical-align: sub;
  content: "" !important;
  width: 18px;
  height: 18px;
  border: 1px solid #ededed;
}
.Couleur .Beige .facet-mark:before {
  background: #000;
}
.Couleur .Blanc .facet-mark:before {
  background: #fff;
}
.Couleur .Bleu .facet-mark:before {
  background: #00b0f0;
}
.Couleur .Gris .facet-mark:before {
  background: #777;
}
.Couleur .Jaune .facet-mark:before {
  background: #ffe209;
}
.Couleur .Marron .facet-mark:before {
  background: #974706;
}
.Couleur .Multicolore .facet-mark:before {
  background: #000;
}
.Couleur .Noir .facet-mark:before {
  background: #000;
}
.Couleur .Orange .facet-mark:before {
  background: #fb6e05;
}
.Couleur .Rose .facet-mark:before {
  background: #ff338a;
}
.Couleur .Rouge .facet-mark:before {
  background: red;
}
.Couleur .Vert .facet-mark:before {
  background: #00b050;
}
.Couleur .Violet .facet-mark:before {
  background: #000;
}

Articles récents

Catégories

Archives

Méta

Étiquette : LESS

[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

[Magento 2] Etirer de manière homothétique le visuel principal de la fiche produit affiché via Fotorama

[Magento 2] Des cases à cocher et des boutons radio sexy dans vos formulaires avec le markup HTML du core

[Magento 2] Gérer l’affichage des formulaires avec les mixins LESS de la Magento UI Library

Bonnes pratiques

Fields customization variables – The `.lib-form-field()` mixin variables

Libellés au-dessus des champs, une colonne

Libellés au-dessus des champs, deux colonnes

Libellés à côté des champs, une colonne

Libellés à côté des champs, deux colonnes

[Magento 2] Nombre de produits par rangée via CSS LESS dans les listes de catégories

Utiliser les variables mises à disposition par Magento 2

Utiliser la fonction `calc` de CSS

Petite subtilité pour les thèmes de merde qui n’utilisent pas Flexbox

[Magento 2] Exploiter la fonctionnalité CSS critical path avec un fichier LESS (via Grunt)

[Magento 2] Importer les points de rupture CSS LESS pour une exploitation avec javascript jQuery

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:

[Magento 2] Ajouter et exploiter une librairie CSS tierce

[Magento 2] Ajouter et exploiter dans un fichier PHTML un composant javascript issu de Bootstrap 3 par l’intermédiaire de requireJS

LESS/CSS

JS

[LESS] Un mixin pour boucler dans un tableau contenant des valeurs allant par pairs

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

Bonnes pratiques

Libellés au-dessus des champs, une colonne

Libellés au-dessus des champs, deux colonnes

Libellés à côté des champs, une colonne

Libellés à côté des champs, deux colonnes

Utiliser les variables mises à disposition par Magento 2

Utiliser la fonction calc de CSS

Petite subtilité pour les thèmes de merde qui n’utilisent pas Flexbox

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:

LESS/CSS

JS

Utiliser la fonction `calc` de CSS