È possibile rendere le immagini statiche ricche di esperienze coinvolgenti per i clienti trascinando e rilasciando punti attivi "shoppable" su un'immagine. Gli hotspot acquistabili combinano informazioni aggiuntive su un prodotto o servizio con una funzionalità diretta, punto vendita "Aggiungi al carrello" o "Acquista". I clienti possono selezionare questi hotspot ed essere collegati direttamente al prodotto o al servizio, aggiungerli a un carrello o essere collegati a una pagina web. Esperienze dirette come queste aumentano il coinvolgimento e le conversioni dei clienti sul tuo sito web.
Di seguito è riportato un banner acquistabile con un pop-up Quickview. Un utente attiva la visualizzazione rapida selezionando il cerchio o il "punto attivo" sul modello.
Vedi le immagini interattive in azione nella pagina web precedente andando al seguente:
Esegui una procedura dettagliata su creazione di banner immagine interattivi (10 minuti e 33 secondi). Inoltre, viene illustrato come visualizzare in anteprima, modificare e distribuire banner immagine interattivi.
La seguente descrizione dettagliata del flusso di lavoro è stata progettata per aiutarti a iniziare rapidamente a usare le immagini interattive in Adobe Experience Manager Assets.
Cerca la Esempio intestazione all'interno di alcune delle attività di avvio rapido. Contiene una breve esercitazione basata sul seguente esempio di pagina web che non dispone ancora di Immagini interattive aggiunte:
L’esercitazione illustra i passaggi necessari per integrare le immagini interattive nel sito web.
Passaggi per le immagini interattive:
(Facoltativo) Identifica le variabili dei punti attivi - Se utilizzi Experience Manager Assets e Dynamic Media standalone, inizia identificando le variabili dinamiche utilizzate nell’implementazione Quickview esistente. Quindi, puoi immettere i dati del punto attivo al momento della creazione dell’immagine interattiva. Vedi (Facoltativo) Identifica le variabili dei punti attivi.
Tuttavia, se utilizzi Adobe Experience Manager Sites, Adobe Experience Manager eCommerce o entrambi, questo passaggio non è necessario.
Vedi Concetti di eCommerce in Experience Manager Assets.
(Facoltativo) Crea un predefinito visualizzatore di immagini interattive - Personalizzare l'immagine grafica utilizzata per rappresentare gli hotspot. La creazione di un predefinito per visualizzatori di immagini interattive non è necessaria se si intende utilizzare il predefinito visualizzatore di immagini interattive preconfigurato denominato Shoppable_Banner
invece.
Vedi (Facoltativo) Crea un predefinito visualizzatore di immagini interattive.
Caricare un banner immagine - Carica i banner immagine che desideri rendere interattivi.
Vedi Caricare un banner immagine.
Aggiungere punti attivi a un banner immagine - Aggiungi uno o più punti attivi a un banner immagine e associali ciascuno di essi a un’azione come un collegamento ipertestuale, una visualizzazione rapida o un frammento esperienza. Dopo aver aggiunto gli hotspot, finirai questa attività pubblicando l'immagine interattiva.
Aggiungere un’immagine interattiva al sito web - Se utilizzi Experience Manager Sites o eCommerce, o entrambi, puoi aggiungere l’immagine interattiva a una pagina web in un Experience Manager. Trascina il componente File multimediali interattivi sulla pagina. Vedi Aggiungere risorse Dynamic Media alle pagine.
Se utilizzi Experience Manager Assets e Dynamic Media standalone, devi copiare il codice da incorporare sul tuo sito web e quindi integrarlo con la visualizzazione rapida esistente. Vedi Integrare un’immagine interattiva con il sito web.
Se utilizzi un WCM di terze parti (Web Content Manager), devi integrare il nuovo video interattivo con l’implementazione Quickview esistente utilizzata sul sito web. Vedi Integrare un’immagine interattiva con una Quickview esistente.
Questa attività è necessaria solo se sono soddisfatte le seguenti condizioni:
Se l’implementazione di Experience Manager utilizza eCommerce, puoi saltare questa attività e passare all’attività successiva.
Per iniziare, identifica le variabili dinamiche utilizzate dall'implementazione di Quickview esistente in modo da poter inserire i dati dei punti attivi per creare l'immagine interattiva.
Quando aggiungi punti attivi a un'immagine del banner in Experience Manager Assets, devi assegnare un SKU (Stock Keeping Unit) e variabili aggiuntive facoltative a ogni punto attivo. Tali variabili dei punti attivi vengono utilizzate in seguito per far corrispondere gli hotspot con il contenuto di Quickview.
È importante identificare correttamente il numero e il tipo di variabili da associare ai dati dei punti attivi. Ogni punto attivo aggiunto a un'immagine del banner deve contenere informazioni sufficienti per identificare in modo non ambiguo il prodotto nel sistema di back-end esistente.
Esistono diversi modi per identificare un set di variabili da utilizzare per i dati dei punti attivi.
A volte è sufficiente consultare gli specialisti IT responsabili dell'implementazione di Quickview esistente. È probabile che gli specialisti IT sappiano qual è il set minimo di dati necessari per l'identificazione di Quickview nel sistema. Tuttavia, è anche possibile analizzare semplicemente il comportamento esistente del codice front-end.
La maggior parte delle implementazioni di Quickview utilizza il seguente paradigma:
L’approccio consiste quindi nel visitare diverse aree del sito web esistente in cui è implementata la funzione Quickview. Quindi si attiva la visualizzazione rapida e si acquisisce l'URL Ajax inviato dalla pagina web per il caricamento dei dati o del contenuto della visualizzazione rapida.
Normalmente non è necessario utilizzare strumenti di debug specializzati. I browser web moderni dispongono di ispettori web che svolgono un lavoro adeguato. Di seguito sono riportati alcuni esempi di browser web che includono ispettori web:
Per visualizzare tutte le richieste HTTP in uscita in Google Chrome, premere F12 per aprire il pannello Strumenti per sviluppatori, quindi selezionare la scheda Rete.
In un Mac, premere Comando+Opzione+I per aprire il pannello Strumenti di sviluppo, quindi selezionare la scheda Rete.
In Firefox, è possibile attivare il plug-in Firebug premendo F12 e utilizzando la relativa scheda Net, oppure è possibile utilizzare lo strumento integrato Inspector e la relativa scheda Rete.
In un Mac, premere Comando+Opzione+I per aprire il pannello Strumenti di sviluppo, quindi selezionare la scheda Ispettore.
Quando il monitoraggio della rete è attivato nel browser, attiva la visualizzazione rapida nella pagina.
Ora trova l'URL Ajax Quickview nel registro di rete e copia l'URL registrato per analisi future. Di solito, quando si attiva la visualizzazione rapida sono presenti numerose richieste inviate al server. In genere, l’URL Ajax Quickview è uno dei primi dell’elenco. Dispone di una porzione o di un percorso di stringa di query complessa e il relativo tipo MIME di risposta è text/html
, text/xml
oppure text/javascript
.
Durante questo processo, è importante visitare diverse aree del sito web, con diverse categorie di prodotti e tipi. Il motivo è che gli URL Quickview possono avere parti comuni per una determinata categoria di siti web, ma possono essere modificati solo se visiti un’area diversa del sito web.
Nel caso più semplice, l’unica parte variabile nell’URL Quickview è lo SKU del prodotto. In questo caso, il valore SKU è l’unico elemento dati necessario per aggiungere punti attivi all’immagine del banner.
Tuttavia, in casi complessi, l’URL Quickview presenta diversi elementi diversi oltre all’SKU, come ID categoria, codice colore e codice dimensione. In questi casi, ogni elemento è una variabile separata nella definizione dei dati del punto attivo nella funzione immagine interattiva acquistabile in Experience Manager Assets.
Prendi in considerazione i seguenti esempi di URL di visualizzazione rapida e le relative variabili di punti attivi risultanti:
SKU singolo, trovato nella stringa query. |
Gli URL registrati di Quickview includono quanto segue:
L’unica parte variabile nell’URL è il valore del parametro della stringa query productId= ed è chiaramente un valore SKU. Pertanto, i punti attivi richiedono solo campi SKU compilati con valori come |
SKU singolo, trovato nel percorso URL. |
Gli URL registrati di Quickview includono quanto segue:
La parte variabile si trova nell’ultima parte del percorso e diventa il valore SKU degli hotspot: |
SKU e ID categoria nella stringa query. |
Gli URL registrati di Quickview includono quanto segue:
In questo caso, l’URL contiene due parti diverse. La SKU viene memorizzata nel Di conseguenza, le definizioni dei punti attivi sono coppie. Cioè, un valore SKU e una variabile aggiuntiva denominata
|
Esempio
Puoi applicare lo stesso approccio utilizzato nei tre esempi sopra alla pagina web demo:
La pagina web demo ha diverse miniature di prodotto, ognuna con un pulsante Quickview con etichetta "See More" (Vedi altro). Con lo strumento di debug del browser Web ancora attivato, seleziona ogni pulsante e osserva gli URL registrati di Quickview. Dopo aver attivato tutti e quattro i prodotti Quickview disponibili sulla pagina, si dispone del seguente elenco di richieste Quickview effettuate al backend:
/datafeed/Male-Windbreaker.json
/datafeed/Male-SimpleHenley.json
/datafeed/Male-CamoPullover.json
/datafeed/Female-QuiltedDownJacket.json
Osservando le chiamate al server, puoi vedere che le informazioni specifiche per il prodotto sono presenti solo nel percorso della richiesta. Noterai inoltre che la stringa di query non viene utilizzata e che sono presenti due tipi distinti di parti di dati:
Considerate queste informazioni, l'intero URL della visualizzazione rapida ha il seguente pattern:
/datafeed/$categoryId$-$SKU$.json
In base a tale analisi, puoi utilizzare categoryId
e SKU
per hotspot.
Ora puoi caricare un banner immagine e aggiungervi hotspot utilizzando la funzione di immagine interattiva acquistabile in Experience Manager Assets.
Puoi scegliere di utilizzare il predefinito visualizzatore di immagini interattive predefinito denominato Shoppable_Banner
questo viene fornito con Experience Manager Assets. Oppure puoi creare un predefinito visualizzatore personalizzato da usare con le immagini interattive.
Quando crei un predefinito visualizzatore di immagini interattive personalizzato, puoi determinare l’aspetto degli hotspot sul banner immagine. Come parte della creazione del predefinito visualizzatore, puoi scegliere di utilizzare un grafico per punti attivi da una raccolta di immagini predefinite.
Dopo aver salvato il predefinito visualizzatore, questo viene attivato automaticamente (attivato) nella pagina dell’elenco Predefiniti visualizzatore in Experience Manager Assets. Questa funzionalità significa che è visibile nel componente File multimediali interattivi e ogni volta che visualizzi una risorsa. Tuttavia, distribuire un banner interattivo con questo predefinito visualizzatore, è necessario pubblicare anche il predefinito per visualizzatori. Questa regola è valida per i predefiniti visualizzatore personalizzati o predefiniti.
Per creare un predefinito visualizzatore di immagini interattive:
Nella barra a sinistra, seleziona Strumenti > Risorse > Predefiniti visualizzatore.
Nell’angolo in alto a destra della pagina, seleziona Crea.
Nella finestra di dialogo Nuovo predefinito visualizzatore , digita un nome per descrivere il predefinito visualizzatore banner interattivo.
Il titolo viene visualizzato nella pagina dell’elenco Predefiniti visualizzatore dopo il salvataggio.
Nel menu a discesa Tipo di contenuti multimediali avanzati, seleziona Immagine interattiva.
Seleziona Crea.
Nella pagina Modifica predefinito visualizzatore, seleziona la Aspetto scheda .
Effettua una delle operazioni seguenti:
Nell’angolo in alto a destra della pagina, seleziona Salva.
Assicurati di pubblicare il nuovo predefinito visualizzatore.
Vedi Pubblicazione Dei Predefiniti Visualizzatore Aggiunti.
Ora puoi caricare un banner immagine.
Se hai già caricato le immagini da utilizzare, passa al passaggio successivo, Aggiunta di punti attivi a un banner immagine.
Per caricare un banner immagine:
Carica i banner immagine che desideri rendere interattivi.
Vedi Caricamento delle risorse.
Ora puoi aggiungere punti attivi al banner immagine; consulta l’attività successiva di seguito.
Puoi aggiungere punti attivi a un banner immagine utilizzando l’editor nella pagina Gestione dei punti attivi.
Quando aggiungi degli hotspot, puoi definirli come una visualizzazione a comparsa Quickview, come un collegamento ipertestuale o un frammento esperienza.
Vedi Frammenti esperienza.
Gli strumenti di condivisione social media in Immagine interattiva non sono supportati quando si incorpora il visualizzatore in un frammento esperienza. Per risolvere questo problema, puoi utilizzare o creare predefiniti visualizzatore privi di strumenti di condivisione social media. Questi predefiniti per visualizzatori consentono di incorporarli correttamente nei Frammenti esperienza.
Le opzioni Annulla e Ripristina, situate nell’angolo superiore destro della pagina, sono supportate durante la sessione di creazione/modifica corrente.
Al termine della creazione dell’immagine interattiva, puoi utilizzare Anteprima per vedere come l’immagine interattiva viene visualizzata dai clienti.
Vedi (Facoltativo) Anteprima delle immagini interattive.
Quando aggiungi punti attivi a un'immagine in un'immagine interattiva o in un banner carosello, le informazioni relative ai punti attivi vengono memorizzate nella stessa posizione di metadati. Tale posizione è relativa alla posizione dell’immagine, indipendentemente dal fatto che si tratti di un’immagine interattiva o di un banner carosello. Questa funzionalità consente di riutilizzare facilmente la stessa immagine, insieme ai relativi dati definiti per i punti attivi, in entrambi i visualizzatori.
I banner a carosello supportano le mappe immagine sulle immagini che possono contenere anche punti attivi; Le immagini interattive non lo sono. Tieni presente questa regola se intendi creare un’immagine interattiva o un banner carosello che utilizza la stessa immagine. È possibile creare immagini interattive e banner carosello utilizzando copie separate della stessa immagine.
Vedi anche Banner a carosello.
Se modifichi immagini interattive con punti attivi e ritagli l’immagine, questi vengono rimossi.
Per aggiungere punti attivi a un banner immagine:
Nella vista Risorse, individua il banner immagine che desideri rendere interattivo.
Effettua una delle operazioni seguenti:
Passa il puntatore sull'immagine, quindi seleziona Seleziona (icona a forma di segno di spunta). Sulla barra degli strumenti, seleziona Modifica.
Passa il puntatore sull'immagine, quindi seleziona Altre azioni (icona a tre punti) Modifica.
Seleziona l’immagine per aprirla nella pagina Vista dettagli . Sulla barra degli strumenti, seleziona Modifica.
Nell’angolo in alto a sinistra della pagina, seleziona Aggiungi punto attivo (icona a forma di dito) per aprire la pagina Gestione punti attivi.
Nell’angolo in alto a sinistra della pagina, seleziona Punto attivo.
Nel campo di testo Nome, digitare il nome del punto attivo. Questo nome viene visualizzato anche nell’elenco a discesa Punto attivo selezionato .
Effettua una delle operazioni seguenti:
Seleziona Quickview.
Se sei un cliente Experience Manager Sites o eCommerce, seleziona l’icona Selettore prodotto (lente di ingrandimento) per aprire la pagina Seleziona prodotto . Seleziona il prodotto da utilizzare, quindi seleziona Seleziona nell’angolo in alto a destra della pagina per tornare alla pagina Gestione punti attivi.
Se sei not un cliente Experience Manager Sites o eCommerce
category=Males
è una variabile aggiunta.Seleziona Collegamento ipertestuale.
Assicurati di specificare se aprire il collegamento in una nuova scheda del browser (impostazione predefinita consigliata) o nella stessa scheda.
Vedi Utilizzare i selettori per ulteriori informazioni.
Seleziona Frammento esperienza.
Se sei un cliente Experience Manager Sites, seleziona l’icona Ricerca (lente di ingrandimento) per aprire la pagina Frammento esperienza . Seleziona il frammento esperienza da utilizzare, quindi seleziona Seleziona nell’angolo in alto a destra della pagina per tornare alla pagina Gestione punti attivi.
Vedi Frammenti esperienza.
Specifica la larghezza e l’altezza del frammento esperienza come desideri che appaia sul banner.
Gli strumenti di condivisione social media in Immagine interattiva non sono supportati quando si incorpora il visualizzatore in un frammento esperienza. Per risolvere questo problema, puoi utilizzare o creare predefiniti visualizzatore privi di strumenti di condivisione social media. Questi predefiniti per visualizzatori consentono di incorporarli correttamente nei Frammenti esperienza.
Seleziona Salva per salvare il lavoro e tornare alla pagina Sfoglia.
Pubblica l’immagine interattiva. La pubblicazione consente di distribuire il banner tramite il cloud e genera anche codice di incorporamento se è necessario eseguire l’integrazione con un sito web di terze parti.
Vedi Pubblicare le risorse.
Dopo aver aggiunto gli hotspot e pubblicato l'immagine interattiva, ora puoi aggiungerla al tuo sito web esistente.
Vedi Integrare un’immagine interattiva con il sito web.
Se modifichi immagini interattive con punti attivi e ritagli l’immagine, i punti attivi vengono eliminati.
È possibile utilizzare Anteprima per vedere una rappresentazione dell’aspetto dell’immagine interattiva per i clienti e per testare gli hotspot dell’immagine per verificare che si comportino come previsto.
Una volta ottenuta l’immagine interattiva, puoi pubblicarla.
Vedi Incorporare il visualizzatore di video o immagini in una pagina web.
Vedi Collegare gli URL all’applicazione web. Il metodo di collegamento basato su URL non è possibile se il contenuto interattivo include collegamenti con URL relativi, in particolare con le pagine Experience Manager Sites.
Vedi Aggiungere risorse Dynamic Media alle pagine.
Per visualizzare in anteprima le immagini interattive:
Vedi Pubblicare le risorse per informazioni dettagliate su come pubblicare le risorse immagine interattive.
Dopo aver caricato un'immagine del banner, aggiunto degli hotspot all'immagine e pubblicato l'immagine interattiva, ora puoi aggiungerla alla pagina del tuo sito web.
Se sei un cliente di Experience Manager Sites, puoi aggiungere l’immagine interattiva trascinando il componente File multimediali interattivi sulla pagina. Vedi Aggiungere risorse Dynamic Media alle pagine.
Se sei un cliente Experience Manager Assets indipendente, puoi aggiungere manualmente l’immagine interattiva al tuo sito web come descritto in questa sezione.
Copia il codice di incorporamento dell’immagine interattiva pubblicata.
Vedi Incorporare il visualizzatore di video o immagini in una pagina web.
Aggiungi il codice di incorporamento copiato nella posizione desiderata all’interno della pagina web.
Il codice di incorporamento copiato è impostato per un ambiente reattivo in modo che si adatti automaticamente all’area assegnata.
Esempio
Utilizzo del sito web demo come esempio:
Notate che l'immagine dei tre maschi è statica IMG
tag:
<img class="img-responsive" width="100%" title="Hero Image 2" alt="Hero Image 2" src="images/shoppable-banner.jpg">
L'integrazione è semplice come rimuovere IMG
e sostituirlo con il codice di incorporamento copiato da Experience Manager Assets. Puoi vedere il risultato nel seguente URL che mostra l'immagine interattiva acquistabile sulla pagina con tre punti attivi di cerchio:
A questo punto, gli hotspot sull'immagine interattiva acquistabile del sito web demo sono solo a scopo di visualizzazione; non sono ancora integrati con la visualizzazione rapida esistente.
Per applicare un "ritaglio" a un’immagine interattiva acquistabile per un ambiente dinamico, puoi includere l’attributo di configurazione Immagine interattiva ZoomView.iscommand
al percorso. Il componente ZoomView
è chiamato e iscommand
è il comando di servizio immagine "ritaglia" applicato.
Vedi ZoomView.iscommand attributo di configurazione.
Vedi coltura comando di servizio delle immagini.
È ora possibile integrare l’immagine interattiva con una Quickview esistente sul sito web.
Questa attività si applica solo se sei un cliente Experience Manager Assets autonomo.
L’ultimo passaggio di questo processo consiste nell’integrazione dell’immagine interattiva con un’implementazione Quickview esistente sul sito web. Non esiste una soluzione all’integrazione che funzioni per tutti i casi. Ogni implementazione di Quickview è univoca ed è necessario un approccio specifico. È probabile che si tratti dell'assistenza di una persona IT front-end.
L'implementazione di Quickview esistente rappresenta normalmente una catena di azioni correlate che avvengono sulla pagina web nel seguente ordine:
Queste chiamate non rappresentano chiamate API pubbliche indipendenti che possono essere richiamate dalla logica della pagina web da un passaggio arbitrario. Si tratta invece di una chiamata concatenata in cui ogni passaggio successivo viene nascosto nell’ultima fase (callback) del passaggio precedente.
Allo stesso tempo, quando l'immagine interattiva acquistabile sostituisce il passaggio 1 e in parte il passaggio 2, quando un utente seleziona un punto attivo all'interno dell'immagine acquistabile, l'interazione dell'utente viene gestita dal visualizzatore. Il visualizzatore restituisce un evento alla pagina web che contiene tutti i dati del punto attivo precedentemente aggiunti a Experience Manager Assets.
In un tale gestore di eventi, il codice front-end effettua le seguenti operazioni:
Il codice di incorporamento restituito da Experience Manager Assets dispone già di un gestore eventi ready-to-use che viene commentato, come mostrato nel seguente frammento di codice evidenziato:
var s7interactiveimageviewer = new s7viewers.InteractiveImage({
"containerId" : "s7interactiveimage_div",
"params" : {
"serverurl" : "https://aodmarketingna.assetsadobe.com/is/image",
"contenturl" : "https://aodmarketingna.assetsadobe.com/",
"config" : "/etc/dam/presets/viewer/Shoppable_Media",
"asset" : "/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg" }
})
/* // Example of interactive image event for Quickview.
s7interactiveimageviewer.setHandlers({
"quickViewActivate": function(inData) {
var sku=inData.sku; //SKU for product ID
//To pass other parameter from the hotspot, you will need to add custom parameter during the hotspot setup as parameterName=value
loadQuickView(sku); //Replace this call with your Quickview plugin
//Please refer to your Quickviewer plugin for the Quickview call
},
});
*/
s7interactiveimageviewer.init();
Pertanto, è solo necessario rimuovere il commento dal codice e sostituire il corpo del gestore fittizio con il codice specifico per la pagina web specifica.
Il processo di costruzione dell’URL di visualizzazione rapida è opposto al processo utilizzato per identificare le variabili dei punti attivi trattate in precedenza.
Vedi Identificare le variabili dei punti di attivazione.
Utilizzando i precedenti esempi di URL di Quickview, puoi vedere negli esempi seguenti come viene costruito l’URL di Quickview in ogni caso:
SKU singolo, trovato nella stringa query |
s7interactiveimageviewer.setHandlers({
"quickViewActivate": function(inData) {
var quickViewUrl = "https://server/json?productId=" + inData.sku + "&source=100";
},
}); |
SKU singolo, trovato nel percorso URL |
s7interactiveimageviewer.setHandlers({
"quickViewActivate": function(inData) {
var quickViewUrl = "https://server/product/" + inData.sku;
},
}); |
SKU e ID categoria nella stringa query |
s7interactiveimageviewer.setHandlers({
"quickViewActivate": function(inData) {
var quickViewUrl = "https://server/quickView/product/?category=" + inData.categoryId + "&prodId=" + inData.sku;
},
}); |
L'ultimo passaggio per attivare l'URL Quickview e attivare il pannello Quickview richiede molto probabilmente l'assistenza di un esperto IT front-end del reparto IT. Hanno la conoscenza di sapere come attivare con precisione l'implementazione di Quickview dal passaggio appropriato, avendo un URL di Quickview pronto all'uso.
Puoi vedere come questi passaggi vengono applicati al sito web demo per integrare completamente un’immagine interattiva acquistabile con il codice Quickview. In precedenza, la struttura dell’URL di visualizzazione rapida era identificata come segue:
/datafeed/$categoryId$-$SKU$.json
Per ricostruire questo URL all’interno di quickViewActivate
handler, puoi utilizzare categoryId
e SKU
campi disponibili nel inData
oggetto passato al gestore dal codice del visualizzatore:
var sku=inData.sku;
var categoryId=inData.categoryId;
var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";
Il sito Web demo sta attivando la finestra di dialogo Quickview utilizzando un semplice loadQuickView()
chiamata della funzione. Questa funzione accetta un solo argomento, ovvero l’URL dei dati Quickview. Come tale, l'ultimo passo per integrare l'immagine interattiva acquistabile è quello di aggiungere la seguente riga di codice al quickViewActivate
handler:
loadQuickView(quickViewUrl);
Di seguito è riportato il codice sorgente completo:
var s7interactiveimageviewer = new s7viewers.InteractiveImage({
"containerId" : "s7interactiveimage_div",
"params" : {
"serverurl" : "https://aodmarketingna.assetsadobe.com/is/image",
"contenturl" : "https://aodmarketingna.assetsadobe.com/",
"config" : "/etc/dam/presets/viewer/Shoppable_Media",
"asset" : "/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg" }
})
s7interactiveimageviewer.setHandlers({
"quickViewActivate": function(inData) {
var sku=inData.sku;
var categoryId=inData.categoryId;
var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";
loadQuickView(quickViewUrl);
},
});
s7interactiveimageviewer.init();
Il sito web demo finale con l'immagine interattiva completamente integrata si presenta così:
Vedi Creare pop-up personalizzati utilizzando Quickview.