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 (?!)
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:
|
1 |
_RenderSwatchOptions: function (config, controlId) |
Après modification:
|
1 |
_RenderSwatchOptions: function (config, controlId, $widget) |
Change #2: search with _RenderSwatchOptions and change argument from where this function call from swatch-renderer.js file
Avant:
|
1 |
options = $widget._RenderSwatchOptions(item, controlLabelId), |
Après modification:
|
1 |
options = $widget._RenderSwatchOptions(item, controlLabelId, $widget), |
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:
|
1 2 3 |
var item = this, controlLabelId = 'option-label-' + item.code + '-' + item.id, options = $widget._RenderSwatchOptions(item, controlLabelId), |
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 valeur12s’affichait) à cause de l’utilisation de la méthodeparseInt()(qui renvoie seulement un entier) que j’ai remplacé par la méthodeparseFloat()(qui renvoie également les décimales). J’ai également utilisé la méthodetoFixed(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éthodereplace(replace(/\./g,',').
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
$.each(this.options.jsonConfig.attributes, function () { var item = this; $widget.optionsMap[item.id] = {}; // Aggregate options array to hash (key => value) $.each(item.options, function () { if (this.products.length > 0) { $widget.optionsMap[item.id][this.id] = { price: parseFloat( $widget.options.jsonConfig.optionPrices[this.products[0]].finalPrice.amount, 10 ).toFixed(2).replace(/\./g,','), products: this.products }; } }); var controlLabelId = 'option-label-' + item.code + '-' + item.id, options = $widget._RenderSwatchOptions(item, controlLabelId, $widget), select = $widget._RenderSwatchSelect(item, chooseText), input = $widget._RenderFormInput(item), listLabel = '', label = ''; |
Change #4: Add price div into _RenderSwatchOptions function.
My attribute is swatch options with type = text. So, I made below changes.
Avant:
|
1 2 3 4 5 |
if (type === 0) { // Text html += '<div class="' + optionClass + ' text" ' + attr + '>' + (value ? value : label) + '</div>'; } |
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.
|
1 2 3 4 5 6 |
if (type === 0) { // Text html += '<div class="' + optionClass + ' text" ' + attr + '>' + (value ? value : label) + '<div class="custom-option-price">' + $widget.optionsMap[config.id][id]['price'] + ' €</div>'+ '</div>'; } else if (type === 1) { |