CategoryMagento 2

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

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

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

[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

[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] Afficher de manière dynamique la base URL d’un store dans un bloc statique, un template PHTML, un layout XML

Note: billet amené à être enrichi au gré de mes besoins.

Doc officielle: Using Markup Tags in Links

Blocs CMS statiques

Templates PHTML

nada for now …

Layouts XML

nada for now …

[Magento 2] Changer la valeur de l’attribut Colspan dans les tableaux des commandes du compte client

Vous allez trouver des valeurs pour l’attribut colspan dans certains Layouts. Exemple ici: /Magento/Sales/view/frontend/layout/sales_order_view.xml#L32 pour les tableaux ayant la classe .sales-order-view.

© 2021 devfrontend.info

Theme by Anders NorénUp ↑