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

<script>
    require([
        'jquery'
    ], function ($) {
        $('.product-item').on('click', function(){
            let quickviewRelatedProductURL = $(this).find('.product-item-link').attr('href');
            window.localStorage.setItem('quickviewRelatedProductURL', quickviewRelatedProductURL);
        });
    });
</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):

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

</div>

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

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

</div>

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

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

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

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

<?xml version="1.0"?>

</container>

</referenceContainer>

Les styles:

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

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

}

Note: ce plugin est une évolution du code posté dans un précédent billet: [jQuery] Une fonction Toggle simple pour afficher et masquer des éléments dans un page.

Demo jsfiddle.net. Appuyez sur F12 pour voir les console.log();

Se référer au Git car la doc et le code présentés dans ce billet ne sont plus à jour! nui-Toggle on GitHub.

Description

Ce plugin permet d’afficher/masquer (en off-canvas) un petit encart en sticky dans la page. Sur la capture ci-dessus il s’agit d’un petit menu, utilisé dans une page longue, qui permet de naviguer d’ancre en ancre. Le clic sur le chevron masque le menu. Le chevron reste visible afin de pouvoir, au clic, faire ré-apparaître le menu.

La petite particularité de ce plugin est qu’il gère également l’état affiché/masqué lorsque la page est rechargée (si l’utilisateur a masqué le menu, celui-ci reste masqué au rechargement de la page et pour des connexions ultérieures aussi longtemps que ce premier n’a pas cliqué pour le ré-afficher). Ce comportement est rendu possible en exploitant la propriété localStorage de l’objet Window.

Usage:

Adapter à votre source HTML

  // Fermer/Ouvrir l'encart d'accès rapide et stocker l'état en local
  const $IN_PAGE_NAVIGATION = $('#inPageNavigation'),
        IN_PAGE_NAVIGATION_DEFAULT_ARIA_EXPANDED = $IN_PAGE_NAVIGATION.attr('aria-expanded');

  $IN_PAGE_NAVIGATION.nuiToggle('#toggleInPageNavigation', IN_PAGE_NAVIGATION_DEFAULT_ARIA_EXPANDED);
  // fin: Fermer/Ouvrir l'encart d'accès rapide et stocker l'état en local

// Fermer/Ouvrir l'encart d'accès rapide et stocker l'état en local

const $IN_PAGE_NAVIGATION = $('#inPageNavigation'),

IN_PAGE_NAVIGATION_DEFAULT_ARIA_EXPANDED = $IN_PAGE_NAVIGATION.attr('aria-expanded');

$IN_PAGE_NAVIGATION.nuiToggle('#toggleInPageNavigation', IN_PAGE_NAVIGATION_DEFAULT_ARIA_EXPANDED);

// fin: Fermer/Ouvrir l'encart d'accès rapide et stocker l'état en local

Source HTML

Ce qu’il faut comprendre: 2 choses à vérifier:

Vous avez un élément parent (ici <div id="inPageNavigation">[...]</div>) qui va contenir l’ensemble des informations à afficher/masquer.
Vous avez un élément OBLIGATOIREMENT enfant du parent <div id="inPageNavigation">[...]</div> qui va permettre, au clic sur celui-ci, d’afficher/masquer le parent (ici un bouton <button id="toggleInPageNavigation" class="btn-InPageNavigation--toggle" role="button"></button>, mais ça peut également être un lien).

<div id="inPageNavigation" class="InPageNavigation" aria-expanded="true">
  <button id="toggleInPageNavigation" class="btn-InPageNavigation--toggle" role="button">
    <i class="fas fa-chevron-right" title="Masquer l'accès rapide"></i><i class="fas fa-chevron-left" title="Afficher l'accès rapide"></i>
  </button>
  <p>Accès rapide:</p>
  <ul>
    <li><a class="link" href="#typeIs01">Section 01 dans ma page</a></li>
    <li><a class="link" href="#typeIs02">Section 02 dans ma page</a></li>
    <li><a class="link" href="#typeIs03">Section 03 dans ma page</a></li>
    <li><a class="link" href="#typeIs04">Section 04 dans ma page</a></li>
    <li><a class="link" href="#typeIs05">Section 05 dans ma page</a></li>
  </ul>
</div>

</button>

<p>Accès rapide:</p>

<ul>

<li><a class="link" href="#typeIs01">Section 01 dans ma page</a></li>

<li><a class="link" href="#typeIs02">Section 02 dans ma page</a></li>

<li><a class="link" href="#typeIs03">Section 03 dans ma page</a></li>

<li><a class="link" href="#typeIs04">Section 04 dans ma page</a></li>

<li><a class="link" href="#typeIs05">Section 05 dans ma page</a></li>

</ul>

</div>

Source JS (jQuery)

/**
 * "Naked UI Toggle" jQuery plug-in
 * @author: Frank LANG (https://github.com/franklang/)
 *
 * Usage:
 * $('#targetElement').nuiToggle('#triggerElement', default value for #targetElement's state in the HTML (true or false));
 */
;( function ( $, window, undefined ) {
  $.fn.nuiToggle = function(triggerElement, localStorageDefaultValue) {

    var defaults = {
      triggerElement: triggerElement,
      storedValue: localStorageDefaultValue
    };

    var settings = $.extend( {}, defaults, triggerElement, localStorageDefaultValue );

    // Get a dynamic local storage KEY named after given #targetElement
    const $_THIS = this,
          $_SELECTOR = $_THIS.selector,
          LOCAL_STORAGE_KEY = $_SELECTOR.substring( 1, $_SELECTOR.length );

    // On page load or DOM ready, get current VALUE of dynamic local storage KEY (if it exists...).
    let localStorageValue = localStorage.getItem( LOCAL_STORAGE_KEY );


    // Local Storage
    // If a KEY/VALUE pair is already set...
    if ( localStorageValue !== null ) {
        // console.log('There_s already a local storage KEY called: ' + LOCAL_STORAGE_KEY + ' and it_s VALUE is: ' + localStorageValue);
      // ...append VALUE to selector's aria-expanded attribute in the HTML.
      $_THIS.attr('aria-expanded', localStorageValue);

    // Else...
    } else {
        // console.log('There_s NO local storage KEY called: ' + LOCAL_STORAGE_KEY + ', so we create one with given default VALUE: ' + defaults.storedValue);
      // ...dynamically set a default KEY/VALUE pair regarding generated LOCAL_STORAGE_KEY and given defaults.storedValue.
      localStorage.setItem( LOCAL_STORAGE_KEY, defaults.storedValue );

      // If HTML selector's aria-expanded default value doesn't match with given defaults.storedValue...
      if ( $_THIS.attr('aria-expanded') !== defaults.storedValue ) {
        // ...make it match in the HTML.
        $_THIS.attr('aria-expanded', defaults.storedValue);
      }
    }



    // On Click
    // When clicking on given triggerElement...
    $(defaults.triggerElement, $_THIS).on('click', function(){
      // ...store HTML selector's current aria-expanded value.
      const ARIA_EXPANDED_VALUE = $_THIS.attr('aria-expanded');

      // If selector's aria-expanded value is true...
      if ( ARIA_EXPANDED_VALUE === 'true' ) {
        // ...set it to false...
        $_THIS.attr('aria-expanded', false);
        // ...and update local storage VALUE accordingly.
        localStorage.setItem( LOCAL_STORAGE_KEY, false );
          // console.log( 'KEY: ' + LOCAL_STORAGE_KEY + ' now set to VALUE: ' + localStorage.getItem( LOCAL_STORAGE_KEY ) );

      // Else...
      } else {
        // ...set it to true...
        $_THIS.attr('aria-expanded', true);
        // ...and update local storage VALUE accordingly.
        localStorage.setItem( LOCAL_STORAGE_KEY, true );
          // console.log( 'KEY: ' + LOCAL_STORAGE_KEY + ' now set to VALUE: ' + localStorage.getItem( LOCAL_STORAGE_KEY ) );
      }
    });
  };
}( jQuery, window ));

/**

* "Naked UI Toggle" jQuery plug-in

* @author: Frank LANG (https://github.com/franklang/)

* Usage:

* $('#targetElement').nuiToggle('#triggerElement', default value for #targetElement's state in the HTML (true or false));

;( function ( $, window, undefined ) {

$.fn.nuiToggle = function(triggerElement, localStorageDefaultValue) {

var defaults = {

triggerElement: triggerElement,

storedValue: localStorageDefaultValue

};

var settings = $.extend( {}, defaults, triggerElement, localStorageDefaultValue );

// Get a dynamic local storage KEY named after given #targetElement

const $_THIS = this,

$_SELECTOR = $_THIS.selector,

LOCAL_STORAGE_KEY = $_SELECTOR.substring( 1, $_SELECTOR.length );

// On page load or DOM ready, get current VALUE of dynamic local storage KEY (if it exists...).

let localStorageValue = localStorage.getItem( LOCAL_STORAGE_KEY );

// Local Storage

// If a KEY/VALUE pair is already set...

if ( localStorageValue !== null ) {

// console.log('There_s already a local storage KEY called: ' + LOCAL_STORAGE_KEY + ' and it_s VALUE is: ' + localStorageValue);

// ...append VALUE to selector's aria-expanded attribute in the HTML.

$_THIS.attr('aria-expanded', localStorageValue);

// Else...

} else {

// console.log('There_s NO local storage KEY called: ' + LOCAL_STORAGE_KEY + ', so we create one with given default VALUE: ' + defaults.storedValue);

// ...dynamically set a default KEY/VALUE pair regarding generated LOCAL_STORAGE_KEY and given defaults.storedValue.

localStorage.setItem( LOCAL_STORAGE_KEY, defaults.storedValue );

// If HTML selector's aria-expanded default value doesn't match with given defaults.storedValue...

if ( $_THIS.attr('aria-expanded') !== defaults.storedValue ) {

// ...make it match in the HTML.

$_THIS.attr('aria-expanded', defaults.storedValue);

}

// On Click

// When clicking on given triggerElement...

$(defaults.triggerElement, $_THIS).on('click', function(){

// ...store HTML selector's current aria-expanded value.

const ARIA_EXPANDED_VALUE = $_THIS.attr('aria-expanded');

// If selector's aria-expanded value is true...

if ( ARIA_EXPANDED_VALUE === 'true' ) {

// ...set it to false...

$_THIS.attr('aria-expanded', false);

// ...and update local storage VALUE accordingly.

localStorage.setItem( LOCAL_STORAGE_KEY, false );

// console.log( 'KEY: ' + LOCAL_STORAGE_KEY + ' now set to VALUE: ' + localStorage.getItem( LOCAL_STORAGE_KEY ) );

// Else...

} else {

// ...set it to true...

$_THIS.attr('aria-expanded', true);

// ...and update local storage VALUE accordingly.

localStorage.setItem( LOCAL_STORAGE_KEY, true );

// console.log( 'KEY: ' + LOCAL_STORAGE_KEY + ' now set to VALUE: ' + localStorage.getItem( LOCAL_STORAGE_KEY ) );

}

});

};

}( jQuery, window ));

Source CSS

/* 
 * Off-Canvas in-page navigation component
 */

/* Core */
.InPageNavigation {
  position: fixed;
  z-index: 10000;
}

.btn-InPageNavigation--toggle {
  position: absolute;
}

/* Skin */
.InPageNavigation {
  top: 10px;
  padding: 10px;
  width: 250px;
  border: 1px solid #bfbfbf;
  background: #fff;
}

.InPageNavigation[aria-expanded="true"] {
  right: 10px;
}
.InPageNavigation[aria-expanded="false"] {
  right: -250px;
}

.btn-InPageNavigation--toggle,
.btn-InPageNavigation--toggle:hover {
  top: -1px;
  left: -40px;
  width: 40px;
  height: 40px;
  text-align: center;
  border: 1px solid #bfbfbf;
  border-right: none;
  background: #fff;
  font-size: 1.2em;
}

.InPageNavigation[aria-expanded="true"] .btn-InPageNavigation--toggle .fa-chevron-left,
.InPageNavigation[aria-expanded="false"] .btn-InPageNavigation--toggle .fa-chevron-right {
  display: none;
}
/* fin: Off-Canvas in-page navigation component */

* Off-Canvas in-page navigation component

/* Core */

.InPageNavigation {

position: fixed;

z-index: 10000;

}

.btn-InPageNavigation--toggle {

position: absolute;

}

/* Skin */

.InPageNavigation {

top: 10px;

padding: 10px;

width: 250px;

border: 1px solid #bfbfbf;

background: #fff;

}

.InPageNavigation[aria-expanded="true"] {

right: 10px;

}

.InPageNavigation[aria-expanded="false"] {

right: -250px;

}

.btn-InPageNavigation--toggle,

.btn-InPageNavigation--toggle:hover {

top: -1px;

left: -40px;

width: 40px;

height: 40px;

text-align: center;

border: 1px solid #bfbfbf;

border-right: none;

background: #fff;

font-size: 1.2em;

}

.InPageNavigation[aria-expanded="true"] .btn-InPageNavigation--toggle .fa-chevron-left,

.InPageNavigation[aria-expanded="false"] .btn-InPageNavigation--toggle .fa-chevron-right {

display: none;

}

/* fin: Off-Canvas in-page navigation component */

Articles récents

Catégories

Archives

Méta

Étiquette : localStorage

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

Solution #2 (fonctionnelle)

Solution #1 (pas focntionnelle)

Le fichier template PHTML:

Bonus:

Le fichier layout XML:

Les styles:

[jQuery] Un plugin pour afficher/masquer des éléments dans une page et conserver leur état en cache

Description

Usage:

Adapter à votre source HTML

Source HTML

Source JS (jQuery)

Source CSS