Attention: Ces sources concernent l’observation de modifications dans le DOM une fois que la page est chargée et/ou qu’un utilisateur effectue des actions. Voir aussi l’article qui consiste à tester la présence de certains éléments dans le DOM au chargement de la page.
Attention #2: bien que préfixé Magento 2, cette astuce fonctionnera également en dehors de la solution e-commerce d’Adobe. Dans mon cas, c’est de cette manière que j’ai dû la mettre en place donc c’est comme ça que je la documente. Donc lisez le billet, car vous êtres peut-être quand même au bon endroit 🙂
Source: https://developer.mozilla.org/fr/docs/Web/API/MutationObserver.
La problématique:
Au chargement de la fiche produit d’un produit configurable dans Magento 2, la référence par défaut s’affiche sous le libellé produit alors qu’aucune option n’a encore été sélectionnée par l’utilisateur.
Ce dernier à la possibilité de changer (la couleur du produit dans notre exemple ci dessous) via une liste de sélection <select>.
Nous cherchons à masquer l’affichage de la référence jusqu’à ce qu’une option ait été sélectionnée par l’utilisateur.
La solution:
Surcharge d’un fichier PHTML pour y ajouter un observer via les Mutation Observers de Javascript
Nous allons surcharger, dans notre thème custom, le fichier vendor/magento/module-catalog/view/frontend/templates/product/view/attribute.phtml qui contient le markup permettant l’affichage de la référence dans la fiche produit.
Exemple de chemin vers le fichier surchargé: app/design/frontend/MyVendor/mytheme/Magento_Catalog/templates/product/view/attribute.phtml.
Rajout d’une classe CSS et d’un ID
Par rapport au fichier original, nous rajoutons la classe CSS is-hidden-if-product-is-configurable à la ligne <div class="product attribute <?= $block->escapeHtmlAttr($_className) ?>"> et un ID productRef à la ligne <div class="value" <?= /* @noEscape */ $_attributeAddAttribute ?>><?= /* @noEscape */ $_attributeValue ?></div>.
|
|
<?php if ($_attributeValue) :?> <div class="product attribute <?= $block->escapeHtmlAttr($_className) ?> is-hidden-if-product-is-configurable"> <?php if ($renderLabel) :?> <strong class="type"><?= $block->escapeHtml($_attributeLabel) ?></strong> <?php endif; ?> <div id="productRef" class="value" <?= /* @noEscape */ $_attributeAddAttribute ?>><?= /* @noEscape */ $_attributeValue ?></div> </div> <?php endif; ?> |
Rajout de l’observer JS
En toute fin de fichier:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<script> require([ 'jquery' ], function($){ 'use strict'; // https://developer.mozilla.org/fr/docs/Web/API/MutationObserver // Selectionne le noeud dont les mutations seront observées (#productRef pour nous) var targetNode = document.getElementById('productRef'); // Options de l'observateur (quelles sont les mutations à observer) // Il y a tout un tas de propriétés possibles ici; voir la documentation pour adapter ce code à votre besoin. // Pour ma part, je devais observer les changements de texte dans un noeud précis. // https://developer.mozilla.org/fr/docs/Web/API/MutationObserver#MutationObserverInit var config = { childList: true }; // Fonction callback à éxécuter quand une mutation est observée var callback = function(mutationsList) { for(var mutation of mutationsList) { if (mutation.type == 'childList') { // console.log('L_utilisateur a switché sur une autre référence produit.'); // Si changement sur le noeud #productRef, alors on supprime la classe .is-hidden-if-product-is-configurable du DOM! $('#productRef').closest('.is-hidden-if-product-is-configurable').removeClass('is-hidden-if-product-is-configurable'); } } }; // Créé une instance de l'observateur lié à la fonction de callback var observer = new MutationObserver(callback); // Commence à observer le noeud cible pour les mutations précédemment configurées observer.observe(targetNode, config); // L'observation peut être arrêtée par la suite // observer.disconnect(); }); </script> |
Le reste du fichier demeure inchangé.
Le style qui va venir masquer la référence au chargement de la page
|
|
.page-product-configurable { .is-hidden-if-product-is-configurable { visibility: hidden; } } |
