Authoradmin

[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

theme.xml

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

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

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

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

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

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.

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

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

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

On n’oublie pas le petit CSS qui va bien:

[Magento 2] Pour créer un attribut produit custom depuis l’interface d’administration

Pour afficher votre nouvel attribut dans un PHTML

getData(‘best_offer’);
$newOffer = $_product->getData(‘new_offer’);
?>

Création d’un nouvel attribut:

* BOUTIQUES > Attributs > Produit
* Bouton orange « Ajouter un attribut » (au-dessus du tableau, tout à droite)
* Section « Propriétés de l’attribut »:
* Champ « Libellé par défaut »: mettre « new offer »
* Champ « Type d’entrée catalogue pour le propriétaire de la boutique »: mettre « Yes/No »
* Champ « Valeurs requises »: mettre « Non »
* Bouton orange « Enregistrer l’attribut » (en-haut à droite)

Après enregistrement du nouvel attribut, nous sommes redirigés sur la page qui liste l’ensemble des attributs disponibles.

* Pour retrouver notre nouvel attribut, dans la colonne « Libellé par défaut », renseigner le champ placé immédiatement sous l’en-tête avec le mot-clé « new » et taper la touche Entrée. Le nouvel attribut (« new offer ») est, normalement, dans le résultat du filtrage que nous venos d’effectuer.
* Pour l’éditer, cliquer sur la ligne correspondant à l’attribut « new offer »
* Bloc « INFORMATIONS ATTRIBUTS » en colonne de gauche > cliquer sur « Propriétés du front office »
* Section « Propriétés du front office » (colonne principale):
* Champ « Utiliser dans les listes produits »: mettre « Oui »
* Bouton orange « Enregistrer l’attribut » (en-haut à droite)

Après édition du nouvel attribut, il faut l’ajouter au jeu d’attributs des produits de type « Abonnement ».

* BOUTIQUES > Attributs > Jeu d’attributs
* Dans la liste, cliquer sur « Abonnements »
* Dans la colonne du milieu « Groupes », scroller vers la bas jusqu’à apparition du dossier « Attributes »
* Puis effectuer un glisser-déposer de l’attribut non assigné « new_offer » (colonne de droite « Attributs non assignés ») vers le groupe d’attributs « Attributes » (colonne du milieu « Groupes »)
* ATTENTION: l’attribut « new_offer » doit bien se trouver listé parmi les attributs du dossier « Attributes ». Pour ne pas se tromper, on peut le glisser sous l’attribut existant « best_offer »
* Bouton orange « Enregistrer » (en-haut à droite)

Assignation de l’attribut à un produit:

* CATALOGUE > Produits
* Choisir un produit Abonnement à éditer (colonne « Action », cliquer sur « Modifier »)
* Scroller jusqu’au volet « Attributs » et cliquer dessus pour l’ouvrir
* Passer le champ « new offer » à « Oui »
* Bouton orange « Enregistrer » (en-haut à droite)
* Ne pas oublier de vider les caches

© 2021 devfrontend.info

Theme by Anders NorénUp ↑