La visualizzazione Rapida predefinita viene utilizzata nelle esperienze eCommerce per le quali viene visualizzato un pop-up con le informazioni sul prodotto per guidare un acquisto. Tuttavia, potete attivare il contenuto personalizzato per la visualizzazione nelle finestre a comparsa. A seconda del visualizzatore in uso, i clienti possono toccare un punto sensibile, un’immagine in miniatura o una mappa immagine per visualizzare informazioni o contenuti correlati.
Le viste rapide sono supportate dai seguenti visualizzatori in Dynamic Media:
Sebbene le funzionalità di ciascun visualizzatore differiscano, il processo di creazione di una visualizzazione rapida è lo stesso per tutti e tre i visualizzatori supportati.
Per utilizzare le viste rapide per creare finestre a comparsa personalizzate
Create una visualizzazione rapida per una risorsa caricata.
In genere, potete creare una visualizzazione Rapida contemporaneamente a una risorsa da usare con il visualizzatore in uso.
Visualizzatore in uso | Per creare la vista Rapida, completare i seguenti passaggi |
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. |
Ottenete il codice da incorporare del visualizzatore per integrare il visualizzatore nel vostro sito Web.
Visualizzatore in uso |
Per integrare il visualizzatore con il sito Web, effettuate le seguenti operazioni |
Immagine interattiva | Integrazione di un’immagine interattiva con il sito Web. |
Video interattivo |
Integrazione di un video interattivo con il sito Web. |
Banner carosello | Aggiunta di un banner carosello alla pagina del sito Web. |
Il visualizzatore utilizzato deve essere in grado di utilizzare la vista Rapida.
Il visualizzatore utilizza un gestore denominato QuickViewActive
.
Esempio:
Supponete di usare il seguente codice da incorporare nella 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 da incorporare riportato sopra, si ottiene il seguente codice:
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()
, consulta:
Configurate ora il gestore quickViewActivate
.
Il gestore quickViewActivate
controlla le viste Rapide nel visualizzatore. Il gestore contiene l'elenco di variabili e le chiamate di funzioni da utilizzare con la vista Rapida. Il codice da incorporare fornisce la mappatura della variabile SKU impostata nella vista Rapida. Esegue inoltre una chiamata di funzione loadQuickView
di esempio.
Variabili
mappingMappa per l’utilizzo nella pagina Web in base al valore SKU e alle variabili generiche contenute nella visualizzazione Rapida:
var *variable1*= inData.*quickviewVariable*
Il codice da incorporare fornito include un esempio di mappatura per la variabile SKU:
var sku=inData.sku
Mappare anche altre variabili dalla vista Rapida, come illustrato di seguito:
var <i>variable2</i>= inData.<i>quickviewVariable2</i>
var <i>variable3</i>= inData.<i>quickviewVariable3</i>
Funzione
callIl gestore richiede anche una chiamata di funzione per il funzionamento della visualizzazione Rapida. Si presume che la funzione sia accessibile dalla pagina host. Il codice embed fornisce un esempio di chiamata di funzione:
loadQuickView(sku)
La chiamata della funzione di esempio presuppone che la funzione loadQuickView()
esista e sia accessibile.
Per ulteriori informazioni sul metodo quickViewActivate
, consulta:
Effettua le seguenti operazioni:
Rimuovete il commento dalla sezione setHandlers del codice da incorporare.
Mappare eventuali variabili aggiuntive contenute nella vista Rapida.
loadQuickView(sku,*var1*,*var2*)
se aggiungi altre variabili.Create una semplice funzione loadQuickView
() sulla pagina, all'esterno del visualizzatore.
Ad esempio, il valore SKU viene scritto nella console del browser come segue:
function loadQuickView(sku){
console.log ("quickview sku value is " + sku);
}
Caricate una pagina HTML di prova su un server Web e apritela.
Le variabili della vista Rapida sono mappate. La chiamata della funzione è attiva. La console del browser scrive il valore della variabile nella console del browser. A tal fine, utilizza la funzione di esempio fornita.
È ora possibile utilizzare una funzione per richiamare una semplice finestra a comparsa nella vista Rapida. Nell'esempio seguente viene utilizzato un DIV
per un popup.
Formattare la finestra a comparsa DIV
nel modo seguente. Se necessario, potete aggiungere altri stili.
<style type="text/css">
#quickview_div{
position: absolute;
z-index: 99999999;
display: none;
}
</style>
Inserite il pop-up DIV
nel corpo della pagina HTML.
Uno degli elementi è impostato con un ID aggiornato con il valore SKU quando l’utente richiama una vista Rapida. L’esempio include anche un semplice pulsante per nascondere nuovamente la finestra a comparsa dopo che questa diventa visibile.
<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>
Per aggiornare il valore SKU nella finestra a comparsa, aggiungere una funzione. Rendete visibile la finestra a comparsa sostituendo la semplice funzione creata al punto 5 con la seguente:
<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>
Caricate una pagina HTML di prova nel server Web e apritela. Il visualizzatore visualizza la finestra a comparsa DIV
quando un utente richiama una visualizzazione rapida.
Come visualizzare la finestra a comparsa personalizzata in modalità a schermo intero
Alcuni visualizzatori, come il visualizzatore per video interattivi, supportano la visualizzazione in modalità a schermo intero. Tuttavia, se si utilizza la finestra a comparsa come descritto nei passaggi precedenti, viene visualizzata dietro il visualizzatore in modalità a schermo intero.
Per visualizzare la finestra a comparsa nelle modalità standard e a schermo intero, allegate la finestra a comparsa al contenitore del visualizzatore. In questo caso, utilizzare un secondo metodo del gestore, initComplete
.
Il gestore initComplete
viene richiamato dopo l'inizializzazione del visualizzatore.
"initComplete":function() { code block }
Per ulteriori informazioni sul metodo init()
, consulta:
Per allegare al visualizzatore la finestra a comparsa (descritta nei passaggi precedenti), usate il seguente codice:
"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, avete eseguito le seguenti operazioni:
L’intero codice setHandlers è simile al seguente (è stato utilizzato il visualizzatore video interattivo):
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 aver caricato i gestori, inizializzate 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, accertatevi che sia stata creata l’istanza del visualizzatore. Inoltre, verificate che i gestori vengano caricati prima che il visualizzatore venga richiamato utilizzando init()
.