Page 2 of 67

[Magento 2] Utiliser Knockout JS pour ajouter un message dans le minicart lorsque ce dernier est vide

Dans le fichier de surcharge app/design/frontend///Magento_Checkout/web/template/minicart/content.html, immédiatement sous la condition:

…ajouter la nouvelle condition:

[Magento 2] Un module Javascript embarqué via RequireJS pour bloquer le scroll de la page à l’affichage d’un élément en surimpression

Testé fonctionnel Magento 2.4 CE. L’idée de ce billet est surtout de montrer comment Magento 2 permet l’accès à de petites fonctionnalités écrites en Javascript/jQuery de manière modulaire via RequireJS.

Le code source du plugin:

app/design/frontend///web/js/utils/page-scroll-state.js

Retenez le nom de la fonction handle() du plugin, car elle nous servira plus bas.

Déclarer le plugin via RequireJS:

app/design/frontend///requirejs-config.js

A noter: si l’on souhaite rendre notre plug-in disponible immédiatement dans toutes les pages du site, nous pouvons ajouter ceci au fichier requirejs-config.js (je ne sais pas si la présence d’une virgule en fin de ligne peut poser problème):

Exploiter le plugin dans un autre fichier JS, un PHTML, etc…:

  • ligne 3: on requiert notre plugin tel que déclaré dans la partie paths: du fichier app/design/frontend///requirejs-config.js
  • (ligne 2: on n’oublie pas la dépendance à jquery ou autre si besoin…)
  • ligne 4: on définit un alias pour notre plugin, à invoquer par la suite dans le code qui est encapsulé dans la fonction que nous ouvrons
  • lignes 10 et 18: on invoque la fonction .handle() de notre plugin, via l’alias pageScrollState (défini comme argument de la fonction en ligne 4)

Bonus: les styles!

[Magento 2] Déplacer l’affichage du nombre de produits au panier de minicart.phtml vers un autre template

Testé fonctionnel Magento 2.4 CE. Voici le code à déplacer (bloc de code minicart-counter):

Suggestion de styles:

[Magento 2] Modifier le positionnement des messages d’erreur lors de la validation d’un formulaire

Testé fonctionnel Magento 2.4 CE. Source: form-validation-with-custom-error-placement-magento-2.

The function errorPlacement is a function of the mage.validation widget in Magento 2 and can be found under vendor/magento/magento2-base/lib/web/mage/validation.js

Je suis parti, pour mon exemple ci-dessous, d’une surcharge du template PHTML subscribe.phtml issu du module Newsletter.

J’ai ajouté un élément <div id="custom-newsletter-validate-detail-error-message-container"></div> avec un ID à l’endroit où je souhaitais voir se positionner mon message d’erreur. Puis j’ai rajouté le contenu sous la seconde balise <script> dans mon exemple ci-dessous (utilisation de la fonction errorPlacement de validation.js.

[Magento 2] Ajouter des polices Google Fonts

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

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

[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

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

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

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

registration.php

requirejs-config.js

Pas obligatoire…

theme.xml

Les styles/fichiers LESS

Ressources en ligne:

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. Ce fichier écrase le fichier du même nom situé dans le thème parent (Blank dans notre exemple).
    • _variables.less Doit contenir uniquement des variables propres au thème auquel ce fichier appartient. Ce fichier écrase le fichier du même nom situé dans le thème parent (Blank dans notre exemple).

Mediaqueries

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

[Magento 2] Mediaqueries LESS avec les mixins du core

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

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

© 2021 devfrontend.info

Theme by Anders NorénUp ↑