[Magento 2] Etendre ou surcharger des styles less parent, de composants ou de modules dans un thème

Testé fonctionnel Magento 2.4

Sources: Best way to extend module less found in web/css/source/module, like _minicart.less? et Extend or override parent, components or modules styles in Magento 2 et version PDF pour la postérité.

Etendre les styles less d’un composant

Fichier parent: app/design/frontend/Vendor/default/Magento_Catalog/web/css/source/module/listings/_prod-small.less.

Son extension: app/design/frontend/Vendor/germany/Magento_Catalog/web/css/source/module/listings/_prod-small_extend.less

L’import de l’extension: app/design/frontend/Vendor/germany/Magento_Catalog/web/css/source/_extend.less

[Magento 2] Afficher les champs additionnels d’adresse client (street2, street3) dans les pages du compte client et les mails de confirmation de commande

Source: How to get Customer Address in formated way and print it – Magento2.3 et version PDF pour la postérité.

Pour les lignes d’adresse manquantes, il faut aller en BO, choisir le scope et effectuer la manip’ décrite dans la méthode 2 du tuto.
J’ai pour ma part modifié les Address templates Text et HTML. Il faut commencer par décocher les cases « Use Default » pour les champs que tu veux modifier, puis:

Pour Text, remplacer:

…par:

Pour HTML, remplacer:

…par:

Avec ça:

  • Ok compte client > historique des commandes
  • Ok checkout > succès de la commande
  • Ok mail de confirmation de commande

[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

[JavaScript] Déléguer un événement à un élément du DOM créé dynamiquement (ou détecter l’événement click sur un SVG)

ATTENTION: la méthode décrite dans ce billet fonctionne très bien pour deux choses bien distinctes:

  • déléguer un événement à un élément du DOM créé dynamiquement
  • détecter l’événement click sur un SVG

Néanmoins, dans le 1er cas et pour des raisons de performance, il serait plutôt conseillé de se tourner vers une solution d’event bubbling.

Source: Detecting click events on SVGs with vanilla JS event delegation – Listening for clicks inside an element.

Javascript dans le cas d’un SVG:

[Javascript] Envelopper du contenu existant dans un nouvel élément du DOM

Source: Pure javascript method to wrap content in a div

[Javascript] Annuler la sélection d’un bouton radio

Décocher un bouton radio sélectionné en cliquant dessus. Source: How to make a radio button unchecked by clicking it?

[Javascript] Accéder dynamiquement et via un chemin sous forme de chaîne de caractères à une information consignée dans un objet ou un tableau JS

Source: DYNAMICALLY Accessing nested JavaScript objects and arrays by string path et un petit jsFiddle pour la route.

[UIKit v3] Mettre à jour les options d’un composant

Source: Is it possible to update the options of a component?. ATTENTION: le code d’illustration donnée dans l’issue Git est FAUX! Mais il m’a mis sur la bonne piste. Reportez-vous au code ci-dessous:

[Javascript] Construire un chemin dynamique vers des valeurs de clés stockées dans un objet avec Object.byString

Source: Accessing nested JavaScript objects and arrays by string path et demo.

Mon chemin dynamique était, par exemple, de ce type: const combinedPath = buildPath( $_THIS ) + "." + matchingThreshold;. Le problème venait du fait qu’il n’était pas interprété par javascript comme un chemin mais comme une chaîne de caractères (un console.log m’affichait quelque chose d’aplati du style: priceTable.<=2.size[0].100 au lieu de m’afficher la valeur stockée dans l’objet priceTable qui correspondait au chemin <=2.size[0].100).

Afin que le chemin construit dynamiquement via javascript ne soit pas interprété comme une chaîne de caractères, nous pouvons utiliser la fonction suivante:

Utilisation:

[Twig] Utiliser le tag Set et la fonction Include pour récupérer les informations d’un fichier JSON dans un template Twig

Source: Set twig variable to json file as an include.

Fichier _data/test.json:

Fichier template.twig: