Tagoptions

[Magento 2] Créer des Swatches (ou échantillons) pour afficher toutes les options et prix d’un produit configurable dans la liste des catégories et des produits

Testé fonctionnel Magento 2.3!

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

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.

    [Gulp] Passer des options pour lancer des tâches spécifiques suivant l’environnement (–dev –prod par exemple) avec yargs et gulp-if

    Source: Is it possible to pass a flag to Gulp to have it run tasks in different ways?

    Yargs

    Gulp doesn’t offer any kind of util for that, but you can use one of the many command args parsers. I like yargs. Should be:

    Combinaison de Yargs et de Gulp-if

    You can also combine it with gulp-if to conditionally pipe the stream, very useful for dev vs. prod building:

    And call with gulp my-js-task or gulp my-js-task --production.

    Remarque: selon les cas, on peut vouloir n’exécuter une tâche que dans le cas ou l’argument --dev n’a pas été précisé. Il suffit de mettre un caractère ! (signifiant « différent de ») devant la condition:


    Autre alternative (moins pratique, mais qui fonctionne aussi) : gulp-options.

    [Gulp] Stocker ses options de configuration dans un fichier JSON externe surveillé (gulp watch)

    Sources :

    Problématique :

    Ce message laissé sur Stack Overflow. J’utilise Gulp pour minifier 2 types bien distincts de fichiers JS :

    1. L’ensemble des fichiers JS stockés dans un dossier ./src/js qui sont des plugins custom écrits spécifiquement pour les besoins du projet ou des vendor (ou « third-party ») plugins surchargés et modifiés spécifiquement pour les besoins du projets.
    2. .

    3. Une sélection de fichiers JS stockés dans un dossier ./src/vendor/[...] qui sont des vendor plugins que je souhaite utiliser en l’état, sans les modifier (composant Bootstrap, Modernizr, ou autre…).

    J’utilise un fichier de configuration externe gulpconf.json pour (notamment) constituer une liste de chemins vers les third-party plugins que je souhaite ajouter aux sources de mon projet. Ce fichier ressemble à ceci :

    Le problème est que lorsque je lance ma tâche gulp watch, des modifications (typiquement, l’ajout d’un chemin vers un nouveau vendor plugin que je souhaite ajouter à mon projet) sont détectées dans mon fichier de config mais elles ne sont pas appliquées. Exemple des logs que j’obtiens :

    Solution :

    A partir du JSON fourni plus haut, dans le gulpfile.js placer ces différentes parties :

    © 2020 devfrontend.info

    Theme by Anders NorénUp ↑