edit: je me suis rendu compte que la solution #1 n’était pas fonctionnelle. En effet, à l’utilisation, le local storage (clé: product_data_storage) était vide/n’avait aucune valeur!
Solution #2 (fonctionnelle)
app/design/frontend/Vendor/theme/Magento_Catalog/templates/product/list.phtml: au clic sur un item produit (parce qu’au clic sur le trigger de la quickview, il ne se passait rien), on cherche dans le markup enfant le lien vers la fiche produit cible et on le stocke dans le local storage via window.localStorage.setItem('clé', valeur);.
|
1 2 3 4 5 6 7 8 9 10 |
<script> require([ 'jquery' ], function ($) { $('.product-item').on('click', function(){ let quickviewRelatedProductURL = $(this).find('.product-item-link').attr('href'); window.localStorage.setItem('quickviewRelatedProductURL', quickviewRelatedProductURL); }); }); </script> |
app/design/frontend/Vendor/theme/Magento_Catalog/templates/product/view/product-url.phtml: au clic sur le lien « voir la fiche produit », on récupère l’URL dans le local storage (clé quickviewRelatedProductURL):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="product-url"> <a id="currentlyViewedProductURL" class="link-see-product"><?= __('link-see-product'); ?></a> </div> <script> require([ 'jquery' ], function ($) { const $currentlyViewedProductURL = $('#currentlyViewedProductURL'); $currentlyViewedProductURL.on('click', function(){ // ...on fait une redirection JS dans la fenêtre parente de l'iFrame (la quickview) qui contient une partie de la fiche produit window.top.location.href = window.localStorage.getItem('quickviewRelatedProductURL'); // ...et seulement ensuite, on simule le click sur la croix de fermeture de la quickview. $('.action-close', parent.document).click(); }); }); </script> |
Le layout XML et les styles de la solution #1 restent valables. Merci de vous y référer.
Solution #1 (pas focntionnelle)
Quickview rattachée au module CartQuickPro fourni avec le thème Venuse.
La quickview s’affiche en cliquant sur un item produit dans le listing produit (page catégorie) du site Magento 2. Elle affiche, dans une iFrame, une partie des éléments de la fiche produit (c’est le même code qui est utilisé pour la quickview et la fiche produit).
Le fichier template PHTML:
- Objectif: placer un lien vers la fiche produit dans la page.
- On récupère l’URL de la fiche produit en consultation dans le localStorage (clé:
product_data_storage) sous forme de chaîne JSON. Il faut convertir cette chaîne JSON en objet JavaScript pour pouvoir l’exploiter. - On récupère l’ID du produit dans le DOM.
- Au clic sur l’élément a#currentlyViewedProductURL (le lien « Voir la fiche produit »)…
- …on fait une redirection JS dans la fenêtre parente de l’iFrame (la quickview) qui contient une partie de la fiche produit
- …et seulement ensuite, on simule le click sur la croix de fermeture de la quickview.
app/design/frontend/Vendor/theme/Magento_Catalog/templates/product/view/product-url.phtml
|
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 |
<div class="product-url"> <a id="currentlyViewedProductURL" class="link-see-product"><?= __('link-see-product'); ?></a> </div> <script> require([ 'jquery' ], function ($) { const $currentlyViewedProductURL = $('#currentlyViewedProductURL'); // On récupère l'URL de la fiche produit dans le localStorage (clé: product_data_storage) sous forme de chaîne JSON. // Il faut convertir cette chaîne JSON en objet JavaScript pour pouvoir l'exploiter. // https://blog.logrocket.com/the-complete-guide-to-using-localstorage-in-javascript-apps-ba44edb53a36/ let productDataStorageObject = JSON.parse(window.localStorage.getItem('product_data_storage')), // On récupère l'ID du produit dans le DOM. viewedProductID = $('.price-box').attr('data-product-id'); // On assigne l'URL de la fiche produit à l'élément a#currentlyViewedProductURL via le pseudo attribut href. $currentlyViewedProductURL.attr('href', productDataStorageObject[viewedProductID].url); // Au clic sur l'élément a#currentlyViewedProductURL (le lien "Voir la fiche produit")... $currentlyViewedProductURL.on('click', function(){ // ...on fait une redirection JS dans la fenêtre parente de l'iFrame (la quickview) qui contient une partie de la fiche produit // https://stackoverflow.com/questions/580669/redirect-parent-window-from-an-iframe-action window.top.location.href = productDataStorageObject[viewedProductID].url; // ...et seulement ensuite, on simule le click sur la croix de fermeture de la quickview. // https://stackoverflow.com/questions/23913951/how-to-get-an-element-outside-of-iframe-with-javascript-or-jquery/23914011 $('.action-close', parent.document).click(); }); }); </script> |
Bonus:
(inutile pour ce qu’on essaye de faire, mais bon à savoir) Récupérer la première clé d’un objet JSON sans connaître le libellé de cette clé:
|
1 2 3 |
// https://stackoverflow.com/questions/42097143/how-to-get-first-key-pair-element-of-json-object-without-knowing-key-and-deletin let firstKey = Object.keys(productDataStorageObject)[0]; $('#currentlyViewedProductURL').attr('href', productDataStorageObject[firstKey].url); |
Le fichier layout XML:
On s’en sert pour positionner le template PHTML dans la page.
app/design/frontend/Vendor/theme/Magento_Catalog/layout/catalog_product_view.xml
|
1 2 3 4 5 6 7 8 |
<?xml version="1.0"?> <page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <referenceContainer name="content"> <referenceContainer name="product.info.main"> <container name="product.info.url" after="product.info"> <block class="Magento\Framework\View\Element\Template" name="product.url" template="Magento_Catalog::product/view/product-url.phtml"/> </container> </referenceContainer> |
Les styles:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.product-url { display: none; width: 100%; // On affiche le lien vers la fiche produit UNIQUEMENT dans la quickview .cartquickpro-catalog_product-view & { display: flex; } .link-see-product { text-decoration: underline; &:hover { text-decoration: none; } } } |