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

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.

Ottieni il codice da incorporare per integrare il visualizzatore nel tuo sito web.

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:

Il gestore viene caricato nel visualizzatore utilizzando setHandlers:

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

Nell'esempio di codice di incorporamento riportato sopra è presente il codice seguente:

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:

• Visualizzatore immagini interattivo: https://experienceleague.adobe.com/docs/dynamic-media-developer-resources/library/viewers-for-aem-assets-only/interactive-images/jsapi-interactive-image/r-html5-aem-int-image-viewer-javascriptapiref-sethandlers.html?lang=it
• Visualizzatore video interattivo: https://experienceleague.adobe.com/docs/dynamic-media-developer-resources/library/viewers-for-aem-assets-only/interactive-video/jsapi-interactive-video/r-html5-aem-int-video-javascriptapiref-sethandlers.html?lang=it

Configurare 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 e un esempio di chiamata alla funzione loadQuickView.

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 variabili aggiuntive anche da Quickview, come nei seguenti casi:

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:

• Visualizzatore immagini interattivo: https://experienceleague.adobe.com/docs/dynamic-media-developer-resources/library/viewers-for-aem-assets-only/interactive-images/c-html5-aem-interactive-image-event-callbacks.html?lang=it
• Visualizzatore video interattivo: https://experienceleague.adobe.com/docs/dynamic-media-developer-resources/library/viewers-for-aem-assets-only/interactive-video/c-html5-aem-int-video-event-callbacks.html?lang=it
• Supporto dati interattivi nel visualizzatore video interattivo: https://experienceleague.adobe.com/docs/dynamic-media-developer-resources/library/viewers-for-aem-assets-only/interactive-video/c-html5-aem-int-video-int-data-support.html?lang=it

Effettua le seguenti operazioni:

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

• Mappa eventuali variabili aggiuntive contenute in Quickview.

  • Aggiornare la chiamata loadQuickView(sku,*var1*,*var2*) se si aggiungono variabili aggiuntive.

• Crea 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);
}

• Carica una pagina di test HTML in un server web e apri.

  Con le variabili di Quickview mappate e la chiamata di funzione attiva, 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 una semplice finestra a comparsa in Quickview. Nell'esempio seguente viene utilizzato DIV per un popup.

Applicare lo stile del popup DIV nel modo seguente. Se necessario, aggiungete altri stili.

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

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.

<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 in modo da poter aggiornare il valore SKU nel pop-up; rendi visibile il pop-up sostituendo la semplice funzione creata nel passaggio 5. con le seguenti caratteristiche:

<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 di test HTML sul server web e apri. Il visualizzatore visualizza il popup DIV quando un utente richiama una visualizzazione rapida.

Visualizzazione del popup personalizzato 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 i popup sia nella modalità standard che in quella a schermo intero, collegare il popup al contenitore del visualizzatore. Utilizzare 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(), vedere:

• Visualizzatore immagini interattivo: https://experienceleague.adobe.com/docs/dynamic-media-developer-resources/library/viewers-for-aem-assets-only/interactive-images/jsapi-interactive-image/r-html5-aem-int-image-viewer-javascriptapiref-init.html?lang=it
• Visualizzatore video interattivo: https://experienceleague.adobe.com/docs/dynamic-media-developer-resources/library/viewers-for-aem-assets-only/interactive-video/jsapi-interactive-video/r-html5-aem-int-video-javascriptapiref-init.html?lang=it

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, è stato eseguito quanto segue:

• Identificato il pop-up personalizzato.
• Rimosso dal DOM.
• Identificato il contenitore del visualizzatore.
• Il pop-up è stato allegato 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 aver caricato i gestori, inizializza il visualizzatore:

*viewerInstance.*init()

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

s7interactiveimageviewer.init()

Dopo aver incorporato il visualizzatore nella pagina host, assicurarsi che l'istanza del visualizzatore sia stata creata e che gli handler siano stati caricati prima che il visualizzatore venga richiamato utilizzando init().