Creare pop-up personalizzati utilizzando Quickview using-quickviews-to-create-custom-pop-ups

Il Quickview predefinito viene utilizzato nelle esperienze di e-commerce, in cui viene visualizzato un pop-up con le informazioni di prodotto per stimolare un acquisto. Tuttavia, puoi attivare il contenuto personalizzato da visualizzare nei pop-up. A seconda del visualizzatore utilizzato, i clienti possono selezionare un hotspot, un'immagine in miniatura o una mappa immagine per visualizzare informazioni o contenuti correlati.

Quickview è supportato dai seguenti visualizzatori in Dynamic Medie:

  • Immagini interattive (hotspot selezionabili)
  • Video interattivo (miniature selezionabili durante la riproduzione video)
  • Banner a carosello (hotspot selezionabili o mappe immagine)

Sebbene le funzionalità di ciascun visualizzatore siano diverse, il processo di creazione di una visualizzazione rapida è lo stesso per tutti e tre i visualizzatori supportati.

Per creare popup personalizzati utilizzando Quickview:

  1. Crea una visualizzazione rapida per una risorsa caricata.

    In genere, la creazione di una visualizzazione rapida avviene quando si modifica una risorsa per l’utilizzo con il visualizzatore in uso.

    table 0-row-2 1-row-2 2-row-2 3-row-2 html-authored no-header
    Visualizzatore in uso Per creare Quickview, completare la procedura seguente
    Immagini interattive Aggiunta di punti attivi a un banner immagine.
    Video interattivi Aggiunta di interattività al video.
    Banner a carosello Aggiunta di punti attivi o mappe immagine a un banner.
  2. Ottieni il codice da incorporare per integrare il visualizzatore nel tuo sito web.

    table 0-row-2 1-row-2 2-row-2 3-row-2 html-authored no-header
    Visualizzatore in uso Per integrare il visualizzatore con il sito Web, completa questi passaggi
    Immagine interattiva Integrazione di un'immagine interattiva con il sito Web.
    Video interattivo Integrazione di un video interattivo con il sito Web.
    Banner a carosello Aggiunta di un banner carosello alla pagina del sito Web.
  3. Il visualizzatore utilizzato deve sapere come utilizzare Quickview.

    Il visualizzatore utilizza un gestore denominato QuickViewActive.

    Esempio
    Supponiamo di utilizzare il seguente codice di incorporamento di esempio nella pagina web per un’immagine interattiva:

    chlimage_1-291

    Il gestore viene caricato nel visualizzatore utilizzando setHandlers:

    *viewerInstance*.setHandlers({ *handler 1*, *handler 2*}, ...

    Utilizzando l'esempio di codice di incorporamento riportato sopra, si dispone del codice seguente:

    code language-xml
    s7interactiveimageviewer.setHandlers({
        quickViewActivate": function(inData) {
            var sku=inData.sku;
            var genericVariable1=inData.genericVariable1;
            var genericVariable2=inData.genericVariable2;
           loadQuickView(sku,genericVariable1,genericVariable2);
        }
    })
    

    Per ulteriori informazioni sul metodo setHandlers(), vedere:

  4. Ora configura il gestore quickViewActivate.

    Il gestore quickViewActivate controlla Quickview nel visualizzatore. Il gestore contiene l'elenco delle variabili e le chiamate di funzione da utilizzare con Quickview. Il codice di incorporamento fornisce la mappatura per la variabile SKU impostata in Quickview. Effettua anche una chiamata di funzione loadQuickView di esempio.

    Mappatura variabile
    Mappa le variabili da utilizzare nella pagina web al valore SKU e alle variabili generiche contenute in Quickview:

    var *variable1*= inData.*quickviewVariable*

    Il codice di incorporamento fornito ha una mappatura di esempio per la variabile SKU:

    var sku=inData.sku

    Mappa altre variabili anche da Quickview, come nei seguenti casi:

    code language-xml
    var <i>variable2</i>= inData.<i>quickviewVariable2</i>
     var <i>variable3</i>= inData.<i>quickviewVariable3</i>
    

    Chiamata funzione
    Il gestore richiede anche una chiamata di funzione per il funzionamento di Quickview. Si presume che la funzione sia accessibile dalla pagina host. Il codice di incorporamento fornisce una chiamata di funzione di esempio:

    loadQuickView(sku)

    La chiamata della funzione di esempio presuppone che la funzione loadQuickView() esista ed è accessibile.

    Per ulteriori informazioni sul metodo quickViewActivate, vedere:

  5. Effettua le seguenti operazioni:

    • Rimuovi il commento dalla sezione setHandlers del codice da incorporare.

    • Mappa eventuali variabili aggiuntive contenute in Quickview.

      • Aggiorna la chiamata loadQuickView(sku,*var1*,*var2*) se aggiungi altre variabili.
    • Crea una semplice funzione loadQuickView () sulla pagina, all'esterno del visualizzatore.

      Ad esempio, il valore SKU viene scritto nella console del browser come segue:

    code language-xml
    function loadQuickView(sku){
        console.log ("quickview sku value is " + sku);
    }
    
    • Carica una pagina di test HTML in un server web e apri.

      Le variabili di Quickview vengono mappate. La chiamata di funzione è attiva. E la console del browser scrive il valore della variabile nella console del browser. Questa operazione viene eseguita utilizzando la funzione di esempio fornita.

  6. È ora possibile utilizzare una funzione per richiamare una semplice finestra a comparsa in Quickview. Nell'esempio seguente viene utilizzato DIV per un popup.

  7. Applicare lo stile del popup DIV nel modo seguente. Aggiungete ulteriore stile come desiderato.

    code language-xml
    <style type="text/css">
        #quickview_div{
            position: absolute;
            z-index: 99999999;
            display: none;
        }
    </style>
    
  8. Inserire il popup DIV nel corpo della pagina HTML.

    Uno degli elementi viene impostato con un ID che viene aggiornato con un valore SKU quando l’utente richiama una Quickview. L'esempio include anche un semplice pulsante per nascondere nuovamente il popup quando diventa visibile.

    code language-xml
    <div id="quickview_div" >
        <table>
            <tr><td><input id="btnClosePopup" type="button" value="Close"        onclick='document.getElementById("quickview_div").style.display="none"' /><br /></td></tr>
            <tr><td>SKU</td><td><input type="text" id="txtSku" name="txtSku"></td></tr>
        </table>
    </div>
    
  9. Per aggiornare il valore SKU nella finestra pop-up, aggiungete una funzione. Rendere visibile la finestra popup sostituendo la semplice funzione creata al punto 5 con quanto segue:

    code language-xml
    <script type="text/javascript">
        function loadQuickView(sku){
            document.getElementById("txtSku").setAttribute("value",sku); // write sku value
            document.getElementById("quickview_div").style.display="block"; // show pop-up
        }
    </script>
    
  10. Carica una pagina di test HTML sul server web e apri. Il visualizzatore visualizza il popup DIV quando un utente richiama una visualizzazione rapida.

  11. Visualizzazione della finestra popup personalizzata in modalità a schermo intero

    Alcuni visualizzatori, come il visualizzatore video interattivo, supportano la visualizzazione a schermo intero. Tuttavia, se si utilizza il pop-up come descritto nei passaggi precedenti, questo viene visualizzato dietro al visualizzatore in modalità a schermo intero.

    Per visualizzare la finestra popup in modalità standard e a schermo intero, collegare la finestra popup al contenitore del visualizzatore. In questo caso, utilizzare un secondo metodo di gestione, initComplete.

    Il gestore initComplete viene richiamato dopo l'inizializzazione del visualizzatore.

    code language-xml
    "initComplete":function() { code block }
    

    Per ulteriori informazioni sul metodo init(), vedere:

    • Visualizzatore immagini interattivo - init
    • Visualizzatore video interattivo - init
  12. Per associare il popup al visualizzatore, descritto nei passaggi precedenti, utilizzare il codice seguente:

    code language-xml
    "initComplete":function() {
        var popup = document.getElementById('quickview_div');
        popup.parentNode.removeChild(popup);
        var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId();
        var inner_container = document.getElementById(sdkContainerId);
        inner_container.appendChild(popup);
    }
    

    Nel codice precedente, hai eseguito le seguenti operazioni:

    • È stata identificata la finestra popup personalizzata.
    • Rimosso dal DOM.
    • Identificato il contenitore del visualizzatore.
    • Il pop-up è stato allegato al contenitore del visualizzatore.
  13. L’intero codice setHandlers è simile al seguente (è stato utilizzato il visualizzatore video interattivo):

    code language-xml
    s7interactivevideoviewer.setHandlers({
        "quickViewActivate": function(inData) {
            var sku=inData.sku;
            loadQuickView(sku);
    
        },
        "initComplete":function() {
            var popup = document.getElementById('quickview_div'); // get custom quick view container
            popup.parentNode.removeChild(popup); // remove it from current DOM
            var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId();
            var inner_container = document.getElementById(sdkContainerId);
            inner_container.appendChild(popup);
        }
    });
    
  14. Dopo aver caricato i gestori, inizializza il visualizzatore:

    *viewerInstance.*init()

    Esempio
    In questo esempio viene utilizzato il visualizzatore di immagini interattivo.

    s7interactiveimageviewer.init()

    Dopo aver incorporato il visualizzatore nella pagina host, accertati che l’istanza del visualizzatore sia stata creata. Verificare inoltre che i gestori siano caricati prima che il visualizzatore venga richiamato utilizzando init().

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab