Puoi arricchire facilmente le immagini statiche e coinvolgerle con i clienti trascinando gli hotspot "shoppable" su un'immagine. Gli hotspot acquistabili combinano informazioni aggiuntive su un prodotto o un servizio con una funzionalità diretta per i punti vendita "Aggiungi al carrello" o "Acquista". I clienti possono selezionare questi hotspot ed essere collegati direttamente al prodotto o al servizio, aggiungerli al carrello o essere collegati a una pagina web. Esperienze dirette come queste aumentano il coinvolgimento dei clienti e le conversioni sul tuo sito web.
Di seguito è riportato un banner acquistabile con un pop-up Quickview. L'utente attiva la visualizzazione rapida selezionando il cerchio o il "punto attivo" sul modello.
Consulta le immagini interattive in azione nella pagina web precedente, accedendo al seguente indirizzo:
Riproduci una procedura dettagliata su creazione di banner interattivi per le immagini (10 minuti e 33 secondi) Scopri anche come visualizzare in anteprima, modificare e distribuire banner interattivi.
La seguente descrizione dettagliata del flusso di lavoro è stata progettata per aiutarti a iniziare rapidamente a utilizzare immagini interattive in Adobe Experience Manager Assets.
Cerca Esempio all'interno di alcune delle attività di avvio rapido. Contiene una breve esercitazione basata sul seguente esempio di pagina web a cui non sono ancora state aggiunte immagini interattive:
Il tutorial illustra i passaggi necessari per integrare le immagini interattive nel sito web.
Passaggi delle immagini interattive:
(Facoltativo) Identificare le variabili dei punti attivi - Se utilizzi Experience Manager Assets e Dynamic Media in modo autonomo, inizia identificando le variabili dinamiche utilizzate nell’implementazione Quickview esistente. Quindi puoi immettere i dati dei punti attivi durante la creazione dell’immagine interattiva. Consulta (Facoltativo) Identificare le variabili dei punti attivi.
Tuttavia, se utilizzi Adobe Experience Manager Sites, o Adobe Experience Manager eCommerce, o entrambi, questo passaggio non è necessario.
Consulta Concetti di eCommerce in Experience Manager Assets.
(Facoltativo) Crea un predefinito visualizzatore di immagini interattivo : personalizza l'immagine grafica utilizzata per rappresentare i punti attivi. Se intendi utilizzare il predefinito visualizzatore di immagini interattive predefinito denominato, non è necessario creare un predefinito visualizzatore di immagini interattive personalizzato Shoppable_Banner
invece.
Consulta (Facoltativo) Crea un predefinito visualizzatore di immagini interattivo.
Carica un banner immagine : carica i banner immagine da rendere interattivi.
Consulta Carica un banner immagine.
Aggiunta di punti attivi a un banner immagine : aggiungi uno o più punti attivi a un banner immagine e associali a un'azione, ad esempio un collegamento ipertestuale, una visualizzazione rapida o un frammento di esperienza. Dopo aver aggiunto gli hotspot, terminerai questa attività pubblicando l’immagine interattiva.
Aggiungere un'immagine interattiva al sito Web - Se utilizzi Experience Manager Sites, eCommerce o entrambi, puoi aggiungere l’immagine interattiva a una pagina web in Experience Manager. Trascina il componente File multimediali interattivi sulla pagina. Consulta Aggiungere risorse Dynamic Media alle pagine.
Se utilizzi Experience Manager Assets e Dynamic Media in modo autonomo, devi copiare il codice da incorporare sul sito web e quindi integrarlo con il Quickview esistente. Consulta Integrare un’immagine interattiva con il sito web.
Se utilizzi una soluzione WCM (Web Content Manager) di terze parti, devi integrare il nuovo video interattivo con l’implementazione Quickview esistente utilizzata sul tuo sito web. Consulta Integrare un'immagine interattiva con un Quickview esistente.
Questa attività è necessaria solo se:
Se l’implementazione di Experience Manager utilizza l’eCommerce, puoi saltare questa attività e passare all’attività successiva.
Inizia identificando le variabili dinamiche utilizzate dall’implementazione Quickview esistente in modo da poter immettere 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 a ciascun punto attivo un'SKU (Stock Keeping Unit) e variabili aggiuntive facoltative. Tali variabili di punti attivi vengono utilizzate in un secondo momento per far corrispondere i punti attivi con il contenuto 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 univoco il prodotto nel sistema 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 Quickview esistente. È probabile che gli specialisti IT sappiano qual è il set minimo di dati richiesti per l'identificazione di Quickview nel sistema. Tuttavia, è anche possibile semplicemente analizzare il comportamento esistente del codice front-end.
La maggior parte delle implementazioni 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 Quickview e si acquisisce l'URL Ajax inviato dalla pagina Web per il caricamento dei dati o del contenuto Quickview.
In genere non è necessario utilizzare strumenti di debug specifici. I browser web moderni dispongono di web inspector che svolgono un lavoro adeguato. Di seguito sono riportati alcuni esempi di browser Web che includono i controlli Web:
Per visualizzare tutte le richieste HTTP in uscita in Google Chrome, premi F12 per aprire il pannello Strumenti per sviluppatori e quindi seleziona la scheda Rete.
In un Mac, premi Comando+Opzione+I per aprire il pannello Strumenti per sviluppatori, quindi seleziona la scheda Rete.
In Firefox, puoi attivare il plug-in Firebug premendo F12 e utilizzando la relativa scheda Net, oppure puoi utilizzare lo strumento integrato Inspector e la relativa scheda Network.
In un Mac, premere Comando+Opzione+I per aprire il pannello Strumenti per sviluppatori, quindi selezionare la scheda Ispettore.
Quando il monitoraggio della rete è attivato nel browser, attiva Quickview sulla pagina.
Ora trova l’URL Ajax di Quickview nel registro di rete e copia l’URL registrato per l’analisi futura. In genere, quando si attiva Quickview vengono inviate numerose richieste al server. In genere, l’URL Ajax di Quickview è uno dei primi dell’elenco. Possiede una porzione o un percorso di stringa di query complesso e il relativo tipo MIME di risposta è text/html
, text/xml
, o text/javascript
.
Durante questo processo, è importante visitare diverse aree del sito web, con diverse categorie e tipi di prodotti. Il motivo è che gli URL Quickview possono avere parti comuni per una determinata categoria di siti Web, ma possono essere modificati solo se si visita un'area diversa del sito Web.
Nel caso più semplice, l’unica parte variabile nell’URL di Quickview è lo SKU del prodotto. In questo caso, il valore SKU è l'unico dato necessario per aggiungere punti attivi all'immagine del banner.
Tuttavia, in casi complessi, oltre allo SKU, l'URL Quickview presenta diversi elementi variabili, ad esempio l'ID categoria, il codice colore e il codice dimensione. In questi casi, ogni elemento è una variabile separata nella definizione dei dati dei punti attivi nella funzione per immagini interattive acquistabili di Experience Manager Assets.
Prendi in considerazione i seguenti esempi di URL Quickview e le variabili hotspot risultanti:
Singolo SKU, trovato nella stringa di query. |
Gli URL registrati di Quickview includono:
L’unica parte variabile nell’URL è il valore del parametro della stringa query productId=, che è chiaramente un valore SKU. Pertanto, i tuoi punti attivi necessitano solo di campi SKU compilati con valori come |
Singolo SKU, trovato nel percorso URL. |
Gli URL registrati di Quickview includono:
La parte variabile si trova nell'ultima parte del percorso e diventa il valore SKU dei punti attivi: |
SKU e ID categoria nella stringa query. |
Gli URL registrati di Quickview includono:
In questo caso, l’URL contiene due parti diverse. Lo SKU viene memorizzato in Di conseguenza, le definizioni dei punti attivi sono coppie. Ovvero, un valore SKU e una variabile aggiuntiva denominata
|
Esempio
Puoi applicare lo stesso approccio utilizzato nei tre esempi precedenti alla pagina web demo:
La pagina web demo presenta diverse miniature di prodotto, ciascuna con un pulsante Quickview etichettato "See More" (Vedi altro). Con lo strumento di debug del browser ancora attivato, seleziona ogni pulsante e annota gli URL registrati di Quickview. Dopo aver attivato tutti e quattro i prodotti Quickview disponibili nella pagina, viene visualizzato il seguente elenco di richieste Quickview inviate 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. Inoltre, la stringa di query non viene utilizzata e sono presenti due tipi distinti di parti di dati:
Considerate queste informazioni, l'intero URL Quickview ha il seguente pattern:
/datafeed/$categoryId$-$SKU$.json
In base a tale analisi, puoi utilizzare categoryId
e SKU
per gli hotspot.
Ora puoi caricare un banner immagine e aggiungervi punti attivi utilizzando la funzione per immagini interattive acquistabili in Experience Manager Assets.
Puoi scegliere di utilizzare il predefinito visualizzatore di immagini interattive predefinito denominato Shoppable_Banner
con Experience Manager Assets. Oppure puoi creare un predefinito visualizzatore personalizzato da utilizzare con le immagini interattive.
Quando crei un predefinito visualizzatore immagine interattiva personalizzato, puoi determinare l'aspetto dei punti attivi sul banner dell'immagine. Come parte della creazione del predefinito visualizzatore, puoi scegliere di utilizzare un elemento grafico a punti attivi da una galleria di immagini predefinite.
Dopo aver salvato il predefinito visualizzatore, questo viene attivato automaticamente (attivato) nella pagina dell’elenco Predefinito visualizzatore di Experience Manager Assets. Questa funzionalità indica che è visibile nel componente File multimediali interattivi e ogni volta che visualizzi una risorsa. Tuttavia, per consegnare un banner interattivo con questo predefinito visualizzatore, devi pubblicare anche il predefinito visualizzatore. Questa regola è valida per i predefiniti visualizzatore personalizzati o predefiniti.
Per creare un predefinito visualizzatore di immagini interattivo:
Nella barra a sinistra, accedi a Strumenti > Risorse > Predefiniti visualizzatore.
Nell’angolo superiore destro della pagina, seleziona Crea.
Nella finestra di dialogo Nuovo predefinito visualizzatore, digita un nome per descrivere il predefinito visualizzatore banner interattivo.
Dopo il salvataggio, il titolo viene visualizzato nella pagina dell’elenco dei predefiniti per visualizzatori.
Nel menu a discesa Tipo di contenuti multimediali avanzati, seleziona Immagine interattiva.
Seleziona Crea.
Nella pagina Modifica predefinito visualizzatore, seleziona Aspetto scheda.
Effettua una delle operazioni seguenti:
Nell’angolo superiore destro della pagina, seleziona Salva.
Assicurati di pubblicare il nuovo predefinito visualizzatore.
Consulta Pubblicazione Dei Predefiniti Visualizzatore Aggiunti.
Ora puoi caricare un banner immagine.
Se hai già caricato le immagini che desideri utilizzare, passa al passaggio successivo, Aggiunta di punti attivi a un banner immagine.
Per caricare un banner immagine:
Carica i banner immagine da rendere interattivi.
Consulta Caricamento delle risorse.
Ora puoi aggiungere punti attivi al banner dell'immagine; vedi l'attività successiva qui sotto.
Puoi aggiungere punti attivi a un banner immagine utilizzando l'editor nella pagina Gestione punti attivi.
Quando aggiungi punti attivi, puoi definirli come una visualizzazione a comparsa Quickview, un collegamento ipertestuale o un frammento di esperienza.
Consulta Frammenti esperienza.
Gli strumenti per la condivisione di social media nell’immagine interattiva non sono supportati quando si incorpora il visualizzatore in un frammento di esperienza. Per risolvere questo problema, puoi utilizzare o creare predefiniti visualizzatore che non dispongono di strumenti per la condivisione sui social media. Tali predefiniti visualizzatore consentono di incorporarli correttamente in Frammenti esperienza.
Le opzioni Annulla e Ripristina, posizionate nell'angolo superiore destro della pagina, sono supportate durante la sessione di creazione/modifica corrente.
Al termine della creazione dell'immagine interattiva, è possibile utilizzare Anteprima per visualizzare una rappresentazione dell'aspetto dell'immagine interattiva per i clienti.
Consulta (Facoltativo) Anteprima di immagini interattive.
Quando aggiungi punti attivi a un'immagine in un'immagine interattiva o in un banner carosello, le informazioni sui 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 dati dei punti attivi definiti, in entrambi i visualizzatori.
I banner a carosello supportano le mappe immagine sulle immagini che possono contenere anche punti attivi, mentre le immagini interattive no. Tieni presente questa regola se intendi creare un’immagine interattiva o un banner a carosello che utilizza la stessa immagine. Puoi invece creare immagini interattive e banner carosello utilizzando copie separate della stessa immagine.
Vedi anche Banner a carosello.
Se si modificano immagini interattive con punti attivi e si ritaglia l'immagine, questi vengono rimossi.
Per aggiungere punti attivi a un banner immagine:
Nella vista Risorse, individua il banner immagine da rendere interattivo.
Effettua una delle operazioni seguenti:
Passa il puntatore sull’immagine, quindi seleziona Seleziona (icona di spunta). Sulla barra degli strumenti, seleziona Modifica.
Passa il puntatore sull’immagine, quindi seleziona Altre azioni (icona a tre punti) Modifica.
Selezionare l'immagine in modo da poterla aprire nella pagina Visualizzazione dettagli. Sulla barra degli strumenti, seleziona Modifica.
Nell’angolo in alto a sinistra della pagina, seleziona Aggiungi punto attivo (icona a forma di dito che tocca) 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 del selettore prodotti (lente di ingrandimento) per aprire la pagina Seleziona prodotto. Seleziona il prodotto da utilizzare, quindi fai clic su Seleziona nell’angolo superiore destro della pagina per tornare alla pagina Gestione punti attivi.
Se sei non 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.
Consulta Utilizzare i selettori per ulteriori informazioni.
Seleziona Frammento esperienza.
Se sei un cliente di Experience Manager Sites, seleziona l’icona Ricerca (lente di ingrandimento) per aprire la pagina Frammento esperienza. Seleziona il frammento di esperienza da utilizzare, quindi seleziona Seleziona nell’angolo superiore destro della pagina per tornare alla pagina Gestione punti attivi.
Consulta Frammenti esperienza.
Specifica la larghezza e l’altezza del frammento di esperienza da visualizzare sul banner.
Gli strumenti per la condivisione di social media nell’immagine interattiva non sono supportati quando si incorpora il visualizzatore in un frammento di esperienza. Per risolvere questo problema, puoi utilizzare o creare predefiniti visualizzatore che non dispongono di strumenti per la condivisione sui social media. Tali predefiniti visualizzatore consentono di incorporarli correttamente in Frammenti esperienza.
Seleziona Salva per salvare i dati 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 devi integrarlo con un sito Web di terze parti.
Consulta Pubblicare le risorse.
Dopo aver aggiunto gli hotspot e pubblicato l'immagine interattiva, puoi aggiungerla al sito Web esistente.
Consulta Integrare un’immagine interattiva con il sito web.
Se si modificano immagini interattive con punti attivi e si ritaglia l'immagine, i punti attivi vengono eliminati.
Puoi utilizzare Anteprima per visualizzare una rappresentazione di come l’immagine interattiva viene visualizzata dai clienti e per testare i punti attivi dell’immagine in modo che si comportino come previsto.
Quando sei soddisfatto dell’immagine interattiva, puoi pubblicarla.
Consulta Incorporare il visualizzatore di video o immagini in una pagina Web.
Consulta Collegare gli URL all’applicazione web. Il metodo di collegamento basato su URL non è possibile se il contenuto interattivo presenta collegamenti con URL relativi, in particolare collegamenti a pagine Experience Manager Sites.
Consulta Aggiungere risorse Dynamic Media alle pagine.
Per visualizzare in anteprima le immagini interattive:
Consulta Pubblicare le risorse per informazioni dettagliate su come pubblicare risorse di immagini interattive.
Dopo aver caricato un'immagine del banner, aggiunto punti attivi all'immagine e pubblicato l'immagine interattiva, puoi aggiungerla alla pagina del sito Web.
I clienti di Experience Manager Sites possono aggiungere l’immagine interattiva trascinando il componente File multimediali interattivi nella pagina. Consulta Aggiungere risorse Dynamic Media alle pagine.
Se sei un cliente Experience Manager Assets indipendente, puoi aggiungere manualmente l’immagine interattiva al sito web come descritto in questa sezione.
Copia il codice di incorporamento dell'immagine interattiva pubblicata.
Consulta Incorporare il visualizzatore di video o immagini in una pagina Web.
Aggiungi il codice da incorporare 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
Utilizzando il 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 da incorporare copiato da Experience Manager Assets. Puoi visualizzare il risultato nel seguente URL che mostra l’immagine interattiva acquistabile sulla pagina con tre punti attivi circolari:
A questo punto, gli hotspot sull'immagine interattiva acquistabile del sito web demo sono solo a scopo di visualizzazione; non sono ancora integrati con l'esistente Quickview.
Per applicare un ritaglio a un’immagine interattiva acquistabile per un ambiente reattivo, puoi includere l’attributo di configurazione Immagine interattiva ZoomView.iscommand
al percorso. Il componente ZoomView
si chiama e iscommand
è il comando di image serving "crop" applicato;
Consulta ZoomView.iscommand attributo di configurazione.
Consulta ritagliare comando image serving.
Ora puoi integrare l’immagine interattiva con un Quickview esistente sul tuo sito web.
Questa attività si applica solo se sei un cliente Experience Manager Assets autonomo.
L’ultimo passaggio di questo processo è l’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 Quickview è unica ed è necessario un approccio specifico. Probabilmente richiede l'assistenza di un responsabile IT front-end.
L’implementazione Quickview esistente rappresenta in genere una catena di azioni correlate che si verificano sulla pagina web nell’ordine seguente:
Queste chiamate non rappresentano chiamate API pubbliche indipendenti che possono essere chiamate dalla logica della pagina web da un passaggio arbitrario. Si tratta invece di una chiamata concatenata in cui ogni passaggio successivo è nascosto nell’ultima fase (callback) del passaggio precedente.
Nello stesso momento in cui l’immagine interattiva acquistabile sostituisce il passaggio 1 e parzialmente il passaggio 2, quando un utente seleziona un punto attivo all’interno dell’immagine acquistabile, tale interazione viene gestita dal visualizzatore. Il visualizzatore restituisce un evento alla pagina web che contiene tutti i dati dei punti attivi aggiunti in precedenza a Experience Manager Assets.
In un gestore eventi di questo tipo, il codice front-end esegue le seguenti operazioni:
Il codice di incorporamento restituito da Experience Manager Assets dispone già di un gestore eventi pronto all’uso e commentato, come mostrato nel seguente snippet 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, è necessario solo rimuovere il commento dal codice e sostituire il corpo del gestore fittizio con il codice specifico per la particolare pagina web.
Il processo di costruzione dell’URL Quickview è opposto a quello utilizzato per identificare le variabili hotspot trattate in precedenza.
Consulta Identificare le variabili dei punti attivi.
Utilizzando i precedenti esempi di URL di Quickview, è possibile vedere come viene costruito l'URL di Quickview in ogni caso:
SKU singola, trovata nella stringa di query |
s7interactiveimageviewer.setHandlers({
"quickViewActivate": function(inData) {
var quickViewUrl = "https://server/json?productId=" + inData.sku + "&source=100";
},
}); |
SKU singola, trovata 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 il pannello Quickview richiede probabilmente l’assistenza di un responsabile IT front-end del reparto IT. Possiedono le conoscenze necessarie per sapere come attivare con precisione l’implementazione Quickview dal passaggio corretto, avendo un URL 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 Quickview era identificata come segue:
/datafeed/$categoryId$-$SKU$.json
Per ricostruire questo URL all’interno del quickViewActivate
gestore, puoi utilizzare il 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 attiva la finestra di dialogo Quickview utilizzando un loadQuickView()
chiamata di funzione. Questa funzione accetta un solo argomento, ovvero l’URL dati Quickview. Di conseguenza, l'ultimo passaggio per integrare l'immagine interattiva acquistabile è 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 di dimostrazione finale con l’immagine interattiva completamente integrata è simile al seguente:
Consulta Creare pop-up personalizzati con Quickview.