Catégorie : Magento 2.x

[Magento 2] Validation des champs de formulaire via les UI components, ressources en ligne et astuces

Ressources en ligne:

ATTENTION: il y a pas mal de ressources en ligne (blogs, stack overflow) qui, sans donner de solutions incorrectes, ne donnent que des solutions partielles ou partiellement dépréciées.

J’ai notamment perdu pas mal de temps avant de comprendre qu’il existait deux systèmes de validation des champs de formulaires, dont un
est spécifique au Checkout et que ça avait son importance au moment d’ajouter un nouveau test de validation par le biais d’une mixin
!

DONC… J’ai trié les ressources en deux catégories: celles à consulter en 1er et celles qui vous aideront moins, voire vous embrouilleront…

D’une manière générale avec les ressources en ligne sur Magento 2 (ou Adobe Commerce maintenant), préférez en priorité la documentation officielle de développement Front sous Magento 2/Adobe Commerce avant toute autre ressource!

Ressources à consulter en priorité

Ressources à consulter ensuite, si vous n’avez pas résolu votre problème

Ressources sur ce blog (ma propre expérience de dev avec la validation des champs de formulaire sous Magento 2/Adobe Commerce)

Ajouter une validation supplémentaire au champ Code Postal (name="postcode") dans l’étape de Livraison/Shipping du Tunnel d’Achat/Checkout de Magento 2/Adobe Commerce

Comme expliqué dans l’excellent billet de Hervé Hennes sur l’ajout d’une validation sur un champ « Numéro de téléphone » dans Magento 2:

L’environnement de validation de données utilisées dans le compte clients et dans le tunnel de commandes étant différents il faudra créer 2 mixins.

app/code/Vendor/Customer/view/frontend/requirejs-config.js

app/code/Vendor/Customer/view/frontend/web/js/validator-mixin.js

app/code/Vendor/Customer/view/frontend/layout/checkout_index_index.xml

[Magento 2] Gestion des événements et du passage de l’objet This dans les widgets jQuery UI avec les méthodes proxy ou bind

Ce post sur stack overflow qui explique très bien le problème et donne des solutions: How to handle events in jQuery UI widgets.

Cet autre post sur stack overflow qui explique comment solutionner le problème à l’aide de la méthode .bind(): Pass correct « this » context to setTimeout callback?.

Exemple de widget complet

$(document).on('click', <DOM element>, <JS function>.bind(this)); et setTimeout(function () { ... }.bind(this), 250);

L’objet this passé dans l’événement .on('click', ...) par l’intermédiaire de la méthode .bind() est bien celui du widget et pas la cible du click (récupérable au besoin dans la fonction _handleNewOptionSelection via un e.target.

Autres manières d’utiliser des événements:

ATTENTION: dans l’exemple ci-dessus, la présence du paramètre true dans this.element.on('focus', this.setActiveState.bind(this, true)); peut dans certains cas faire que la fonction cible ne soit pas exécutée!
A ce moment, essayer ceci:

Cas d’utilisation de .bind() avec setInterval():

Cas avec l’utilisation de matchMedia/mediaCheck

Notez la présence de .bind(this) après chaque fonction (entry, exit).

Utiliser la méthode .bindAll de Underscore

La méthode dans le code source du framework Underscore (version 1.8.2):

Dans les faits:

[Magento 2] Récupérer des informations via un Block PHP plutôt qu’en passant par l’invocation de l’Object Manager dans un template PHTML

L’invocation de l’Object Manager dans un template PHTML pour de la récupération d’informations est une mauvaise pratique dans Magento 2. Pourtant, sur le web, bon nombre de solutions données à nos problèmes partent de ce principe…

Dans mon exemple, je souhaitais récupérer depuis une page produit des informations sur les attributs produit associées (leurs attribute_code à proprement parler). Le template PHTML et le Block PHP desquels je suis parti sont détaillés dans le billet [Magento 2] Etendre un Block pour en hériter et lui ajouter de nouvelles fonctionnalités.

Avec l’Object Manager dans le template PHTML (mauvaise pratique dans Magento 2)

J’ai d’abord procédé comme suggéré ici (How to Get Product Options in Magento 2) en invoquant l’object manager directement dans le template PHTML (mauvaise pratique).

Et ça fonctionne: la variable $attributeCodeArr me remonte bien un tableau avec plusieurs attribute_code.

Même chose via un Block PHP (bonne pratique dans Magento 2)

Dans le Block app/code/MyVendor/KlarnaOnsitemessaging/Block/Product.php:

Dans le template PHTML:

De la même manière, la variable $attributeCodeArr me remonte bien un tableau avec plusieurs attribute_code.

[Magento 2] Google Tag Manager Google Analytics

Admin, backoffice

Trouver et activer l’extension Google Tag Manager

Dans STORES > Configuration > SALES > Google API > Google Analytics. Mettre enable à « Yes ».

Ne pas oublier de mettre le Container Id dans le champ prévu à cet effet.

[Magento 2] Exploiter l’Escaper dans les fichiers PHTML et HTML utilisant Knockout JS (extension Page Builder) pour maintenir certaines balises dans du contenu HTML

Escaper dans les templates PHTML

Magento 2 supprime de manière radicale toutes les balises HTML que vous pourriez renseigner dans des champs du BO. Dans notre exemple, le champ à renseigner affiche un titre en front et si on renseigne ceci: 50<sup>th</sup> Anniversary, l’élément <sup> est automatiquement supprimé.

Pour éviter ceci, on peut déclarer(1) et exploiter l’Escaper dans les fichiers PHTML en listant dans un tableau(2) l’ensemble des balises HTML à conserver:

Valable également en cas d’utilisation d’une clé de traduction (fichiers CSV):

Extension Page Builder de Magento 2 (payante)

Documentation officielle du Page Builder Adobe Commerce (ex Magento 2).

Knockout JS dans les fichiers HTML

C’est en fait dans un fichier title-tag-escaper.js qu’on liste les tags HTML à ne pas échapper:

Configuration d’un module dans un fichier XML

Dans app/code/MyVendor/PageBuilder/view/adminhtml/pagebuilder/content_type/module_XX, afin que la liste des balises autorisées soit prise en compte il faut ajouter un attribut converter pour l’élément (le champ du formulaire d’édition en BO) ciblé:

[Magento 2] Utiliser le binding Foreach de Knockout JS pour splitter un tableau en autant d’items que le nombre qu’il contient dans un fichier html

Sources:

Exemple pour splitter un tableau contenant une adresse postale sur trois lignes:

Extrait du fichier: app/design/frontend/Vendor/theme/Magento_Checkout/web/js/view/address-renderer-mixin.js

Extrait du fichier: app/design/frontend/Vendor/theme/Magento_Checkout/web/template/shipping-information/address-renderer/default.html

Résultat en front:
Street 1,Street 2,Street 3

Résultat en front:
Street 1
Street 2
Street 3

[Magento 2] Etendre les possibilités de l’éditeur WYSIWYG TinyMCE 4

Par défaut, l’éditeur WYSIWYG TinyMCE 4 proposé par Magento 2 n’inclut pas une bonne partie des fonctionnalités embarquées par la librairie TinyMCE 4 (couleur du texte, du fond, …) qui peuvent être utiles pour un rédacteur de contenu. Je prends pour exemple les Custom Formats (Demo CodePen), très utiles lorsque vous créez des styles qui reposent sur un assemblage d’éléments HTML et de classes.

Solution #1: Utiliser le plugin Magefan module-wysiwyg-advanced

Testé fonctionnel Magento 2.3.3. Attention: le plugin ne fournissant aucune licence, il est déconseillé de l’utiliser sur des projets que vous vendez.

Vous pouvez utiliser le plugin Better Magento 2 WYSIWYG TinyMCE4 Editor par Magefan.

Solution #2: Créer votre module d’extension du WYSIWYG TinyMCE 4 pour Magento 2 from-scratch

Testé fonctionnel Magento 2.3.3. Source: Magento 2.3 – TinyMCE4 Toolbar and Plugin Configuration. Créer plusieurs fichiers:

Convention: dans notre exemple, Project et project sont à remplacer par le libellé de votre Vendor.

Create the directory [app/code/vendor/module]: app/code/Project/Customtinymce

Create app/code/Project/Customtinymce/etc/di.xml:

Create app/code/Project/Customtinymce/etc/module.xml:

Create app/code/Project/Customtinymce/registration.php

Create the after plugin app/code/Project/Customtinymce/Plugin/Config.php:

Remarque: dans ce fichier Config.php, si on désactive tous les $settings[''] = ; (comme ci-dessous), c’est les fonctionnalités prévues par défaut dans Magento 2 qui s’afficheront dans vos champs d’éditeurs WYSIWYG en admin.

Lancer les commandes:

[Magento 2] Bonnes pratiques et astuces de développement front-end

Les commandes Magento 2 du développeur Front-End

Disponibles ici: Commandes Magento 2 Magerun développeur front-end.

Installation des sample datas: comment se logger sur repo.magento.com pour Composer ?

Problème: j’essaye d’installer les sample datas de Magento 2 via Composer, mais lorsque je tape la commande $ bin/magento sampledata:deploy, j’obtiens un message Authentication required (repo.magento.com): Username Password.

Solution: Il faudra créer un compte sur marketplace.magento.com et récupérer le login (clé publique) et le mot de passe (clé privée) sous My Profile > My Products > Access Keys. Il sera peut-être nécessaire de générer une paire de clé.

Le Username demandé correspond à la clé publique. Le Password demandé correspond à la clé privée. Et PAS aux username et password de votre compte marketplace.magento.com!

Ajouter un nouveau module à votre projet Magento 2

En ligne de commande: $ n98-magerun2 dev:module:create

Ajouter un nouveau thème à votre projet Magento 2

Fichiers à préparer

Partir d’un thème Luma Child

Tips: les sources d’un starter-theme Luma Child sont disponibles en suivant ce lien.

Partie conf à ajouter dans <project_root>\dev\tools\grunt\configs\local-themes.js:

Partir from-scratch

Sinon, si vous souhaitez débuter +/- from-scratch, vous pouvez suivre la documentation officielle de Magento 2 pour créer un nouveau thème.

Différentes manipulations à effectuer et commandes à exécuter

Dans cet ordre (et PAS dans un autre ordre, sinon ça ne fonctionne pas) :

  1. Ajouter le dossier du nouveau thème dans: app/design/frontend/<Vendor_name>/<theme_name>
  2. Mettre à jour le nouveau thème dans l’interface admin: Content > Design > Configuration > (Select Edit on your Store View) > Default Theme > Applied Theme > "<your_new_theme_name>"
  3. Flusher les caches avec la commande: $ n98-magerun2 cache:flush
  4. Lancer les commandes Grunt: $ grunt clean && grunt exec && grunt less && grunt watch
  5. Vider les caches statiques des thèmes: $ rm -rf pub/static/*; rm -rf var/view_preprocessed/
  6. Vous pouvez rafraîchir votre navigateur: ctrl + F5

Styles et héritage

Deux notions bien distinctes à intégrer: l’extension et la surcharge de styles.

Extension (extend) des styles

L’extension permet de conserver, pour le fichier qui est étendu, les styles déclarés dans le(s) thème(s) parent(s) et d’en écrire des supplémentaires. Cette méthode est pratique lorsque votre thème hérite d’un thème parent dont les styles vous conviennent déjà. Elle s’utilise pour apporter des modifications mineures à l’existant.

Surcharge (override) des styles

La surcharge écrase, pour le fichier qui est surchargé, l’intégralité des styles déclarés dans le(s) thème(s) parent(s) pour repartir d’une base neutre. Cette dernière demande beaucoup plus de travail côté front-end.

Override et déclaration de nouvelles variables less

Tips: Magento naming convention for the Less variables et Modifier les valeurs des variables par défaut d’un thème parent (blank/luma).

Ce qu’il faut retenir:

  • Pour surcharger les valeurs de variables existantes et déclarées dans un thème parent, il faut surcharger le fichier _theme.less. Ce fichier doit contenir uniquement des déclarations concernant des variables déjà existantes dans des thèmes parents.
  • Pour déclarer de nouvelles variables propres à votre thème enfant, il faut créer un nouveau fichier. Vous avez le choix entre:
    • Créer un fichier _variables_extend.less qu’il faudra importer depuis le fichier _extend.less
    • ou créer un fichier qui peut s’appeler comme vous voulez (à part _variables.less qui va faire exploser votre affichage!) et dans lequel vous consignerez vos nouvelles variables

Héritage des thèmes dans Magento 2: Luma < (hérite de) Blank < (hérite de) Core.

  • vendor/magento/theme-frontend-luma/web/css/source/_theme.less
    • Contient uniquement des surcharges de variables ayant déjà été déclarées dans les fichiers .less du Core (cf. lib/web/css/source/lib/_variables.less).
  • vendor/magento/theme-frontend-luma/web/css/source/_variables.less
    • Contient des surcharges de variables ayant déjà été déclarées dans le/les thème(s) parent(s) (Blank < Core), ainsi que de nouvelles variables qui seront exploitées dans plusieurs fichiers du thème Luma.
    • Ce fichier n’a pas l’air surchargeable dans un theme qui serait enfant de Luma (héritage: Luma Child < Luma < Blank < Core). Il faut obligatoirement l'étendre en créant un nouveau ficher app/design/frontend/<Vendor_name>/<Luma_child_theme_name>/css/source/_variables_extend.less, lui-même importé via @import '_variables_extend.less'; depuis app/design/frontend/<Vendor_name>/<Luma_child_theme_name>/css/source/_extend.less.
    • Ce fichier n’a pas l’air d’avatage surchargeable dans un theme qui serait simplement enfant de Blank (héritage: Blank Child < Blank < Core). Il faut obligatoirement l'étendre en créant un nouveau ficher app/design/frontend/<Vendor_name>/<Blank_child_theme_name>/css/source/_variables_extend.less, lui-même importé via @import '_variables_extend.less'; depuis app/design/frontend/<Vendor_name>/<Blank_child_theme_name>/css/source/_extend.less.
  • vendor/magento/theme-frontend-luma/web/css/source/_forms.less contient de nouvelles variables qui seront exploitées uniquement dans ce fichier.

vendor/magento/theme-frontend-luma/web/css/source/_variables.less

Luma nous donne un bon exemple de comment doit être organisée cette feuille de styles. Les grandes parties (Typography, Icons, …) contiennent des surcharges des valeurs de variables existantes déclarées respectivement au minimum dans lib/web/css/source/lib/variables/_typography.less et dans lib/web/css/source/lib/variables/_icons.less.

« Au minimum«  car elles peuvent déjà être surchargées une première fois dans le thème Blank (intermédiaire). @font-family-name__base est, en effet, déclarée pour la première fois dans vendor/magento/theme-frontend-blank/web/css/source/_variables.less.

vendor/magento/theme-frontend-luma/web/css/source/_forms.less

Aliases

Une série d’aliases à ajouter au fichier .bashrc.

  • Pour éditer le fichier: $ vim ~/.bashrc
  • Pour valider les changements sans quitter le terminal: $ source ~/.bashrc

[Magento 2.x] Les options du slider Fotorama natif

Magento2 : How to disable product image slider on detail page. Dans /theme_folder/etc/view.xml :