Tagmutation observer

[Magento 2] Utiliser les Mutation Observers de javascript pour détecter les changement dans le DOM suite à une action utilisateur

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>.

Rajout de l’observer JS

En toute fin de fichier:

Le reste du fichier demeure inchangé.

Le style qui va venir masquer la référence au chargement de la page

[javaScript] Exploiter les Mutation Observers pour surveiller la disponibilité d’éléments dans le DOM

Attention: l’article et le code ci-dessous ne sont valables qu’au document ready. Ceci signifie qu’au chargement de la page seulement, on va vérifier la disponibilité d’un ou plusieurs éléments dans le DOM. Les sources ne concernent pas l’observation de modifications dans le DOM une fois que la page est chargée et/ou qu’un utilisateur effectue des actions. Pour cette deuxième fonctionnalité, se référer à la documentation de Mutation Observer sur developer.mozilla.org et un exemple d’utilisation ici: [Magento 2] Utiliser les Mutation Observers de javascript pour détecter les changement dans le DOM suite à une action utilisateur.

Source: Using Mutation Observers to Watch for Element Availability. Code source sous GIT. Version PDF pour la postérité.

© 2021 devfrontend.info

Theme by Anders NorénUp ↑