Creazione di pop-up personalizzati tramite Quickview using-quickviews-to-create-custom-pop-ups
La visualizzazione rapida predefinita viene utilizzata nelle esperienze e-commerce in cui viene visualizzato un pop-up con le informazioni sul prodotto per promuovere un acquisto. Tuttavia, puoi attivare il contenuto personalizzato da visualizzare nei pop-up. A seconda del visualizzatore che utilizzi, questa funzionalità consente agli utenti di fare clic su un punto attivo, su un'immagine in miniatura o su una mappa immagine per visualizzare informazioni o contenuti correlati.
Le visualizzazioni rapide sono supportate dai seguenti visualizzatori in Dynamic Media:
- Immagini interattive (punti attivi cliccabili)
- Video interattivo (immagini thumbnail cliccabili durante la riproduzione del video)
- Banner a carosello (hotspot cliccabili o mappe immagine)
Sebbene le funzionalità di ciascun visualizzatore siano diverse, il processo di creazione di una visualizzazione rapida è lo stesso in tutti e tre i visualizzatori supportati.
Per creare pop-up personalizzati utilizzando le Quickview:
-
Crea una visualizzazione rapida per una risorsa caricata.
In genere, quando modifichi una risorsa da utilizzare con il visualizzatore in uso, crei una visualizzazione rapida.
table 0-row-2 1-row-2 2-row-2 3-row-2 html-authored no-header Visualizzatore in uso Completa questi passaggi per creare la visualizzazione rapida 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. -
Ottieni il codice di incorporamento del visualizzatore per integrare il visualizzatore all’interno del tuo sito web.
table 0-row-2 1-row-2 2-row-2 3-row-2 html-authored no-header Visualizzatore in uso Completa questi passaggi per integrare il visualizzatore con il tuo sito web 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. -
Il visualizzatore che utilizzi ora deve sapere come utilizzare la visualizzazione rapida.
A questo scopo, il visualizzatore utilizza un gestore denominato
QuickViewActive
.Esempio
Supponiamo che tu stia utilizzando il seguente codice di incorporamento sulla tua pagina web per un'immagine interattiva:Il gestore viene caricato nel visualizzatore utilizzando
setHandlers
:*viewerInstance*.setHandlers({ *handler 1*, *handler 2*}, ...
Utilizzando l'esempio di codice di incorporamento di esempio riportato sopra, abbiamo il seguente codice:
code language-xml s7interactiveimageviewer.setHandlers({ quickViewActivate": function(inData) { var sku=inData.sku; var genericVariable1=inData.genericVariable1; var genericVariable2=inData.genericVariable2; loadQuickView(sku,genericVariable1,genericVariable2); } })
Ulteriori informazioni
setHandlers()
metodo nel modo seguente:- Visualizzatore di immagini interattive: setHandlers
- Visualizzatore video interattivo: setHandlers
-
È ora necessario configurare le
quickViewActivate
handler.Il gestore quickViewActivate controlla le Quickview nel visualizzatore. Il gestore contiene l'elenco di variabili e le chiamate di funzioni da utilizzare con Quickview. Il codice di incorporamento fornisce la mappatura per la variabile SKU impostata in Quickview e per una chiamata della 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 anche altre variabili dalla visualizzazione rapida, come illustrato di seguito:
code language-none 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 un esempio di chiamata della funzione :loadQuickView(sku)
La chiamata della funzione di esempio presuppone che la funzione
loadQuickView()
esiste ed è accessibile.Per ulteriori informazioni sul metodo quickViewActivate, consulta:
- Visualizzatore immagini interattivo - Callback degli eventi
- Visualizzatore video interattivo - Callback degli eventi
- Supporto dei dati interattivi nel visualizzatore video interattivo - Supporto dei dati interattivi
-
Effettua le seguenti operazioni:
-
Rimuovi il commento alla sezione setHandlers del codice di incorporamento.
-
Mappa eventuali variabili aggiuntive contenute nella visualizzazione rapida.
- Aggiorna
loadQuickView(sku,*var1*,*var2*)
chiama se aggiungi ulteriori variabili.
- Aggiorna
-
Crea una semplice funzione loadQuickView () sulla pagina, all'esterno del visualizzatore.
Ad esempio, il seguente scrive il valore di sku nella console del browser:
code language-xml function loadQuickView(sku){ console.log ("quickview sku value is " + sku); }
-
Carica una pagina HTML di test su un server web e apri.
Con le variabili mappate da Quickview e la chiamata della funzione in atto, la console del browser scrive il valore della variabile nella console del browser utilizzando la funzione di esempio fornita.
-
-
È ora possibile utilizzare una funzione per richiamare un semplice pop-up in Quickview. Nell'esempio seguente viene utilizzato un
DIV
per una finestra a comparsa. -
Personalizzare lo stile della finestra a comparsa
DIV
nel modo seguente. Aggiungi lo stile aggiuntivo desiderato.code language-xml <style type="text/css"> #quickview_div{ position: absolute; z-index: 99999999; display: none; } </style>
-
Posiziona la finestra a comparsa
DIV
nel corpo della pagina HTML.Uno degli elementi viene impostato con un ID aggiornato con il valore sku quando l’utente richiama un Quickview. L’esempio include anche un semplice pulsante per nascondere nuovamente la finestra a comparsa 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>
-
Aggiungi una funzione per aggiornare il valore SKU nel pop-up; rendere il pop-up visibile sostituendo la funzione semplice creata al punto 5. con le seguenti caratteristiche:
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 popup } </script>
-
Carica una pagina HTML di test sul server web e apri. Il visualizzatore visualizza la finestra a comparsa
DIV
quando un utente richiama un Quickview. -
Come visualizzare il pop-up personalizzato in modalità a schermo intero
Alcuni visualizzatori, come il visualizzatore video interattivo, supportano la visualizzazione in modalità a schermo intero. Tuttavia, se si utilizza il pop-up come descritto nei passaggi precedenti, questo viene visualizzato dietro il visualizzatore in modalità a schermo intero.
Per visualizzare la visualizzazione a comparsa sia in modalità standard che a schermo intero, allegare la finestra a comparsa al contenitore del visualizzatore. A questo scopo, puoi utilizzare un secondo metodo di gestione,
initComplete
.La
initComplete
viene richiamato dopo l’inizializzazione del visualizzatore.code language-xml "initComplete":function() { code block }
Ulteriori informazioni
init()
metodo nel modo seguente: -
Per allegare al visualizzatore il pop-up (descritto nei passaggi precedenti), utilizza il seguente codice:
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 riportato sopra, abbiamo fatto quanto segue:
- Identificato il nostro pop-up personalizzato.
- È stato rimosso dal DOM.
- Identificato il contenitore del visualizzatore.
- È stato allegato il pop-up al contenitore del visualizzatore.
-
L’intero codice setHandlers deve ora essere 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); } });
-
Dopo il caricamento dei 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, assicurati che l’istanza del visualizzatore sia creata e che i gestori siano caricati prima che il visualizzatore venga richiamato utilizzando
init()
.