Utilizzo delle visualizzazioni rapide per creare finestre pop-up personalizzate Windows®

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 utilizzato, i clienti possono toccare un punto attivo, un’immagine in miniatura o 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 utilizzare le visualizzazioni rapide per creare un pop-up Windows® personalizzato:

Crea una visualizzazione rapida per una risorsa caricata.

In genere, quando modifichi una risorsa da utilizzare con il visualizzatore in uso, viene creata una visualizzazione rapida.

Visualizzatore in uso	Per creare la visualizzazione 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.

Ottieni il codice di incorporamento del visualizzatore per integrare il visualizzatore all’interno del tuo sito web.

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.

Il visualizzatore utilizzato deve sapere come utilizzare la visualizzazione rapida.

Il visualizzatore utilizza un gestore chiamato QuickViewActive.

EsempioSupponiamo che tu stia utilizzando il seguente codice di incorporamento sulla 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, si dispone del 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:
- Visualizzatore di immagini interattive - gestori di siti
- Visualizzatore video interattivo - gestori di siti
Ora configura il gestore quickViewActivate.

Il gestore quickViewActivate controlla le visualizzazioni rapide nel visualizzatore. Il gestore contiene l'elenco delle variabili e le chiamate di funzioni da utilizzare con la visualizzazione rapida. Il codice di incorporamento fornisce la mappatura per la variabile SKU impostata nella vista Rapida. Effettua anche una chiamata di funzione di esempio loadQuickView .

Variabili
mappingMappa per l'utilizzo nella pagina Web sul valore SKU e variabili generiche contenute nella visualizzazione rapida:

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 vista Rapida, come illustrato di seguito:
```
var variable2= inData.quickviewVariable2
 var variable3= inData.quickviewVariable3
```
Funzione
callL'handler richiede anche una chiamata di funzione per il funzionamento della visualizzazione rapida. 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() esista e sia accessibile.

Per ulteriori informazioni sul metodo quickViewActivate, consulta:
- Visualizzatore immagini interattivo - callback evento
- Visualizzatore video interattivo - Callback evento
- 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 tutte le variabili aggiuntive contenute nella visualizzazione rapida.
  - Se aggiungi altre variabili, aggiorna la chiamata loadQuickView(sku,*var1*,*var2*) .
- Crea una semplice funzione loadQuickView () sulla pagina, all’esterno del visualizzatore.
  
  Ad esempio, il seguente scrive il valore di SKU nella console del browser:
```
function loadQuickView(sku){
    console.log ("quickview sku value is " + sku);
}
```
- Carica una pagina HTML di prova su un server web e apri.
  
  Le variabili della vista Rapida sono mappate. La chiamata della funzione è attiva. E la console del browser scrive il valore della variabile nella console del browser. Lo fa utilizzando la funzione di esempio fornita.
È ora possibile utilizzare una funzione per richiamare un semplice pop-up nella visualizzazione rapida. Nell'esempio seguente viene utilizzato un elemento DIV per un elemento a comparsa.

Assegna uno stile al pop-up DIV nel modo seguente. Aggiungi lo stile extra desiderato.

<style type="text/css">
    #quickview_div{
        position: absolute;
        z-index: 99999999;
        display: none;
    }
</style>

Posiziona il pop-up DIV nel corpo della pagina HTML.

Uno degli elementi viene impostato con un ID aggiornato con il valore SKU quando l’utente richiama una visualizzazione rapida. L’esempio include anche un semplice pulsante per nascondere nuovamente la finestra a comparsa quando 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, aggiungi una funzione. Rendere visibile la finestra a comparsa sostituendo la funzione semplice 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>

Carica una pagina HTML di prova sul tuo server web e apri. Il visualizzatore visualizza il pop-up DIV quando un utente richiama una visualizzazione rapida.
Come visualizzare la finestra pop-up personalizzata 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 finestra a comparsa nelle modalità standard e a schermo intero, allegare la finestra a comparsa al contenitore del visualizzatore. In questo caso, utilizza un secondo metodo di gestione, initComplete.

Il gestore initComplete viene richiamato dopo l'inizializzazione del visualizzatore.
```
"initComplete":function() { code block }
```
Per ulteriori informazioni sul metodo init(), consulta:
- Visualizzatore di immagini interattive - init
- Visualizzatore video interattivo - init

Per allegare al visualizzatore il pop-up (descritto nei passaggi precedenti), utilizza 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, hai fatto quanto segue:

Identificata la finestra pop-up personalizzata.
È stato rimosso dal DOM.
Identificato il contenitore del visualizzatore.
È stato allegato il pop-up al contenitore del visualizzatore.

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 il caricamento dei gestori, inizializza il visualizzatore:

*viewerInstance.*init()

EsempioQuesto esempio utilizza il visualizzatore di immagini interattivo.

s7interactiveimageviewer.init()

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