Tagiframe

[Magento 2] Afficher un lien vers la fiche produit depuis la quickview en exploitant le localStorage

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

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):

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

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é:

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

Les styles:

[CSS] Un élément sticky en position: fixed; dans une iFrame sous iOS/iPhone

Source: https://github.com/PierBover/ios-iframe-fix.

Code source de la solution en full CSS: ios-iframe-fix-master.

[jQuery] Accéder à un élément contenu dans une iframe depuis la page parente avec la méthode contents()

Attention : ne fonctionne pas si le contenu chargé dans l'iframe provient d’un domaine différent de celui de la page parente. Fonctionne notamment si vous cherchez à accéder à du contenu affiché dans une popin (plug-in jQuery Fancybox), une modal (boite de dialogue)…

Source : How to Access Elements in FancyBox iframe, mais voir aussi Access child iFrame DOM from parent page.

[CSS] Scroller dans une page contenant une iframe sur périphériques mobiles.

Sources : Momentum Scrolling on iOS Overflow Elements et Scroll IFRAMEs on iOS.

La présence d’une iframe peut venir bloquer le scroll dans le corps de la page qui accueille celle-ci. Les articles cités en source remontent un souci sous iOS, mais j’ai pu le constater également sous Android (Nexus 5 + Navigateur Chrome).

Afin de contourner le problème, appliquer les styles suivants sur l’élément qui englobe votre iframe :

[CSS] Iframe, object & embed responsive

Ressources en ligne


Solution 1 :

La plus récente, mais pas testée!

Responsive Iframes — The Right Way (CSS Only)! par Ben Marshall. Version PDF.

Solution 2 :

Mise en place dans un projet OK. Source : Fluid Width Video.

Solution 3 :

Attention : privilégier la solution #1. La solution #2 fonctionne en demo sur le site de l’auteur, mais j’ai rencontré quelques soucis lorsque j’ai souhaité la mettre en pratique.
Source : Iframe, object & embed responsive.

Solution 4 avec Bootstrap 3

Jamais testé… Bootstrap 3 Tips and Tricks You Still Might Not Know – Responsive Video Embeds that Maintain Aspect Ratio.

[jQuery] Accéder à un élément d’une frame parente depuis une iframe avec window.parent.document

Source : Using jQuery to access an element from the parent frame from an iFrame


jQuery('div#hello', window.parent.document).hide();

© 2021 devfrontend.info

Theme by Anders NorénUp ↑