Page 2 of 70

[Javascript] Créer des chemins dynamiques vers des données contenues dans un objet ou un tableau

Source: Accessing nested JavaScript objects and arrays by string path et la demo sur jsFiddle.net.

Utilisation:

Source: How to create a dynamic nested object from array of properties.

PDF – How to create a dynamic nested object from array of properties · GitHub

Code source (zip)

[Javascript] Déclaration de condition If dynamique

Source: Dynamic JavaScript If Statement

[Javascript] Transformer une fonction fléchée (arrow function) en fonction classique

Comment transformer une fonction fléchée en fonction de Javascript à papa. Utile, par exemple, lorsqu’on travaille avec Magento 2.

Note: la fonction d’exemple provient de ce sujet sur stack overflow: best way to filter based on dynamic condition.

Fonction fléchée (arrow function)

Fonction classique


Autre exemple:

Fonction fléchée

Fonction classique

[Google Maps] Astuces et bonnes pratiques

  • Tutoriaux Google map V3 en français: Créer un marker personnalisé, Insérer les coordonnées d’une adresse en BDD, Adresses au format JSON, Filtrer les markers par rapport à un périmètre, Récupérer le département ou le pays d’une adresse, Ajouter un type de carte – V3, Geocodage Inversé – V3, Géocoder une adresse – V3, Récupérer les limites de la carte – getBounds, Classe Map V3, Zoom automatique avec Fitbounds, classe MVCArray, classe MVCObject.
  • Des cluster makers custom: How to use CSS-only for cluster icons for Google Maps

[SASS][LESS] BEM, Block Element Modifier, astuces et bonnes pratiques

Ressources en ligne sur BEM, Block Element Modifier

Une liste de ressources qui m’ont aidé à comprendre la méthodologie BEM:

Example perso avec un store locator

Regarder notamment le principe d’imbrication de plusieurs BLOCKs et la présence de la classe helper .is-store--china (comment elle est utilisée dans le code LESS ensuite).

Code HTML

Code CSS (LESS)

Première explication sous forme de code commenté (pour comprendre)

…mais, ATTENTION: ce n’est pas comme ça que vous devez organiser votre code. Voir la section suivante.

Organisation du code LESS en composants/BLOCKs

Valable pour SASS/SCSS également.

L’organisation du code en parties représentant chacune un block/composant permet le respect du principe d’inception: pas plus de 3 niveaux d’imbrication (à l’exception de la déclaration de :pseudo-classes).

Autre exemple, avec du HTML cette fois:

Le h3 class="store__name" s’affichera:

  • en rouge si la classe store--is-boutique est présente sur l’élément parent
  • en gris si la classe store--is-retailer est présente sur l’élément parent

Les autres styles appliqués au h3 class="store__name" seront affectés aux deux.

Exploitation d’une classe helper .is-store--china

L’organisation du code en parties représentant chacune un block/composant est reprise. La classe helper s’intercale au besoin.

Pour <div class="store-locator">, toutes les bordures seront pink.

Pour <div class="store-locator is-store--china">, toutes les bordures seront red.

[Magento 2] Un widget JS toggle on/off accessible WCAG avec les attributs Hidden et Aria-Expanded

Objectif: créer un widget Toggle flexible dont le rôle sera uniquement d’affiche/masquer des éléments du DOM lorsque les utilisateurs interagissent avec un autre élément d’interface (bouton, checkbox, autre…).

Source: Marking elements expandable using aria-expanded. Exemple d’utilisation sur l’élément HTML Button. Exemple d’utilisation sur l’élément HTML Checkbox.

Exemple d’utilisation sur l’élément HTML Checkbox:

Source: https://www.accessibility-developer-guide.com/.

Fichier wcag-toggle.js:

Fichier PHTML:

Partie DOM (attention, je mets juste les grandes lignes). Se référer à l’example de code proposé par le site source.

On n’oublie pas la déclaration (à votre propre sauce) dans un fichier requirejs-config.js:

[Magento 2] Surcharger le markup HTML du template de prix

Le markup HTML par défaut pour l’affichage du prix (dans le fiche produit par exemple) est régi par un widget mage.priceBox qu’on peut retrouver ici: view/base/web/js/price-box.js. C’est l’option priceTemplate qui définit le markup par défaut <span class="price"><%- data.formatted %></span>.

Pour le surcharger, dans app/design/frontend/<Vendor>/<theme>/Magento_Catalog/templates/product/price/amount/default.phtml, rajouter à la fin:

[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