Étiquette : produit configurable

Testé fonctionnel Magento 2.3!

Ressources en ligne m’ayant permises d’arriver à mes fins:

• La documentation officielle de Magento 2 sur la création de Swatches (échantillons)
• Want to display price in configurable products each options in magento 2 qui donne une bonne partie de la solution côté code, mais qui a nécessité encore quelques adaptations
• Un peu de documentation sur les méthodes parseInt() et sa remplaçante dans ma solution parseFloat()
• How to replace all dots in a string using JavaScript?

Créer un produit configurable

A la création des configurations, vous allez créer un attribut dont le type d’entrée catalogue pour le propriétaire de la boutique sera Texte échantillon (Text Swatches). Ceci permettra d’afficher les différentes options de votre produit configurable comme Magento 2 le fait pour les couleurs par exemple.

• Boutiques > Produit [Attributs]
• Propriétés > Propriétés de l’attribut:
• Type d’entrée catalogue pour le propriétaire de la boutique: Texte échantillon
• Propriétés > Gérer les échantillons (valeurs de votre attribut) > ajouter des échantillons. Attention: la valeur saisie dans le champ « Admin » sera celle affichée en front (?!)

Propriétés du front office > Propriétés du front office

Utiliser dans la navigation par filtres: Filtrable (avec résultats)

Visible sur les pages du catalogue de la boutique: Oui

Utiliser dans les listes de produits: Oui

Utiliser pour le tri des listes produits: Oui

Remarque importante: la visibilité pour chacune de vos configuration doit être sur Non visible individuellement.

Modifier le fichier vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js

Archive contenant le fichier final modifié: swatch-renderer.

NDLA: pardon pour ce contenu moitié anglais/moitié français repris en partie de ce post sur StackOverflow. Et attention car je n’ai pas repris ligne pour ligne les directives données dans ce dit post. J’ai amélioré le code notamment sur certains aspects que je décris au moment venu.

Dans Magento 2, la gestion des différentes options/swatches/échantillons des produits configurables se fait via javaScript, dans ce fichier plus précisément: vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js. Il faudra donc commencer par le surcharger dans app/design/frontend/Vendor/default/Magento_Swatches/web/js/swatch-renderer.js.

Dans ce fichier, les valeurs de chaque échantillon sont générées via la fonction _RenderSwatchOptions.

Modification #1: _RenderSwatchOptions do not get data of $widget veriable. So, I have make below change.

Avant:

Après modification:

Change #2: search with _RenderSwatchOptions and change argument from where this function call from swatch-renderer.js file

Avant:

Après modification:

Change #3: Now I can get the value of $widget object in to _RenderSwatchOptions function but not abel to get price value of options.

So, to add option id wise price please add below code below the line change which applied in #2.

Avant:

Après modification… De nombreux axes d’amélioration du code trouvé sur StackOverflow ici:

• Le prix retourné était un nombre entier (pour un prix de 12,50 € renseigné en backoffice, c’est la valeur 12 s’affichait) à cause de l’utilisation de la méthode parseInt() (qui renvoie seulement un entier) que j’ai remplacé par la méthode parseFloat() (qui renvoie également les décimales). J’ai également utilisé la méthode toFixed(2) avec une valeur de « 2 » pour afficher deux chiffres après la virgule.
• Le prix retourné via la méthode parseFloat() séparait les décimales avec un caractère . au lieu d’une virgule. J’ai donc mis en place un remplacement automatique via la méthode replace (replace(/\./g,',').

Change #4: Add price div into _RenderSwatchOptions function.

My attribute is swatch options with type = text. So, I made below changes.

Avant:

Après modification… Un tout petit axe d’amélioration du code trouvé sur StackOverflow ici:

• J’ai rajouté la devise €, mais de façon totalement fixe (pas récupérée dynamiquement). C’est encore un axe d’amélioration.