É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

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

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:

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

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

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

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:

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

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

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] Gérer l’affichage des formulaires avec les mixins LESS de la Magento UI Library

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

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.

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

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.

[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

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:

Utiliser la fonction calc de CSS

Pour 4 produits par rangée:

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

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

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

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)

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

Puis lancez les commandes:

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

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:

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:

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:

Partie JS:

Créer le fichier app/design/frontend/<Vendor_name>/<theme_name>/web/js/js-mediaqueries.js:

Créer ou adapter le fichier app/design/frontend/<Vendor_name>/<theme_name>/requirejs-config.js:

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

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

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

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

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

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

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:

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:

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

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

Rendu CSS :