Show Menu
ARGOMENTI×

Immagini interattive

Potete rendere le immagini statiche ricche di immagini e creare esperienze coinvolgenti per i clienti trascinando e rilasciando punti di attivazione "shoppable" su un’immagine. Gli hotspot acquistabili combinano informazioni aggiuntive su un prodotto o un servizio con una funzionalità "Aggiungi al carrello" o "Acquista" diretta, punto vendita. I clienti possono toccare questi punti di attivazione 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 la conversione dei clienti sul sito Web.
Di seguito è riportato un banner acquistabile con una finestra a comparsa Quickview. Un utente attiva la visualizzazione rapida toccando il cerchio o il punto di attivazione del modello.
Per vedere le immagini interattive in azione sulla pagina Web precedente, effettuate le seguenti operazioni:

Guardate come vengono creati i banner immagine interattivi

Watch a 10 minute and 33 second walkthrough on how interactive image banners are created . Inoltre verrà illustrato come visualizzare in anteprima, modificare e distribuire i banner immagine interattivi.

Avvio rapido: Immagini interattive

La seguente descrizione dettagliata del flusso di lavoro è stata creata per consentirvi di imparare a usare rapidamente le immagini interattive in Risorse AEM.
Cercare l'intestazione Esempio all'interno di alcune delle attività di Avvio rapido. Contiene una breve esercitazione basata sul seguente esempio di pagina Web in cui non sono ancora state aggiunte immagini interattive:
Questa esercitazione illustra i passaggi necessari per integrare le immagini interattive nel sito Web.
Flusso di lavoro Immagini interattive:
  1. (Facoltativo) Identificazione delle variabili per i punti di attivazione - Se utilizzate Risorse AEM e Contenuti multimediali dinamici standalone, iniziate identificando le variabili dinamiche utilizzate nell’implementazione esistente di Quickview in modo da poter inserire i dati per i punti di attivazione al momento della creazione dell’immagine interattiva. Consultate (Facoltativo) Identificazione delle variabili dei punti di attivazione.
    Tuttavia, se utilizzi AEM Sites, AEM eCommerce o entrambi, questo passaggio non è necessario.
    Consulta Concetti di eCommerce in AEM Assets .
  2. (Facoltativo) Creazione di un predefinito per visualizzatori di immagini interattive - Personalizzare l’immagine grafica utilizzata per rappresentare i punti attivi. La creazione di un predefinito per visualizzatori di immagini interattive non è necessaria se intendete usare il predefinito per visualizzatori di immagini interattive fornito con il nome Shoppable_Banner .
    Consultate (Facoltativo) Creazione di un predefinito per visualizzatori immagini interattivi.
  3. Caricamento di un banner immagine - Caricamento dei banner immagine da rendere interattivi.
    Consultate Caricamento di un banner immagine.
  4. Aggiunta di punti attivi a un banner di immagini - Aggiungete uno o più punti attivi a un banner di immagini e associateli a un’azione come un collegamento ipertestuale, una visualizzazione rapida o un frammento esperienza. Dopo aver aggiunto i punti di attivazione, questa attività verrà completata pubblicando l'immagine interattiva.
  5. Aggiunta di un’immagine interattiva al sito Web o al sito Web in AEM

(Facoltativo) Identificazione delle variabili dei punti di attivazione

Questa attività è necessaria solo se sono soddisfatte le seguenti condizioni:
  • Per aggiungere interattività all’immagine, attivate l’opzione Visualizzazioni rapide.
  • L’implementazione di AEM non utilizza un framework di integrazione eCommerce per estrarre i dati di prodotto in AEM da soluzioni di eCommerce come IBM Websfera Commerce, Elastic Path, hybris o Intershop. Consulta Concetti di eCommerce in AEM Assets .
Se l’implementazione di AEM utilizza eCommerce, puoi saltare questa attività e passare all’attività successiva.
Per iniziare, identificate le variabili dinamiche utilizzate dall’implementazione esistente di Quickview in modo da poter inserire i dati dei punti di attivazione per creare l’immagine interattiva.
Quando aggiungi punti attivi a un'immagine banner in Risorse AEM, devi assegnare un SKU (Stock Keeping Unit); un identificatore univoco per ciascun prodotto o servizio distinto offerto) e variabili aggiuntive facoltative per ciascun punto di attivazione. Tali variabili per i punti di attivazione vengono successivamente utilizzate per far corrispondere i punti di attivazione con il contenuto della visualizzazione rapida.
È importante identificare correttamente il numero e il tipo di variabili da associare ai dati dei punti di attivazione. Ogni punto di attivazione aggiunto a un'immagine del banner deve contenere informazioni sufficienti per identificare in modo univoco il prodotto nel sistema di back-end esistente.
Esistono diversi modi per identificare un set di variabili da utilizzare per i dati dei punti di attivazione.
A volte può essere sufficiente consultare gli specialisti IT responsabili dell'implementazione di Quickview, in quanto è probabile che sappiano quale sia il set minimo di dati necessario per identificare Quickview nel sistema. Tuttavia, nella maggior parte dei casi è anche possibile analizzare semplicemente il comportamento esistente del codice front-end.
La maggior parte delle implementazioni di Quickview utilizza il seguente paradigma:
  • L’utente attiva un elemento dell’interfaccia utente sul sito web. Ad esempio, facendo clic su un pulsante Visualizzazione rapida.
  • Il sito Web invia una richiesta Ajax al back-end per caricare i dati o il contenuto della visualizzazione rapida, se necessario.
  • I dati della visualizzazione rapida vengono convertiti nel contenuto in preparazione del rendering sulla pagina Web.
  • Infine, il codice front-end esegue visivamente il rendering di tali contenuti sullo schermo.
L’approccio consiste quindi nel visitare diverse aree del sito Web esistente in cui è implementata la funzione Quickview, attivare la visualizzazione rapida e acquisire l’URL Ajax inviato dalla pagina Web per caricare i dati o il contenuto della visualizzazione rapida.
Normalmente non è necessario utilizzare strumenti di debug specializzati. I browser Web moderni dispongono di ispettori Web che eseguono 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 fare clic sulla scheda Rete .
    In Mac, premere Comando+Opzione+I per aprire il pannello Strumenti per sviluppatori, quindi fare clic sulla scheda Rete.
  • In Firefox, you can either activate the Firebug plug-in by pressing F12 and use its Net tab, or you can use the built-in Inspector tool and its Network tab.
    In Mac, premere Comando+Opzione+I per aprire il pannello Strumenti per sviluppatori, quindi fare clic sulla scheda Ispettore .
Quando il monitoraggio della rete è attivato nel browser, attivare la visualizzazione rapida sulla pagina.
Ora trova l’URL Ajax di Quickview nel registro di rete e copia l’URL registrato per l’analisi futura. Nella maggior parte dei casi, quando si attiva la visualizzazione rapida, vengono inviate al server numerose richieste. In genere, l’URL Ajax della visualizzazione rapida è uno dei primi nell’elenco. Dispone di una porzione o di un percorso di una stringa di query complessa e il tipo MIME della 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 di visualizzazione rapida possono avere parti comuni per una determinata categoria di sito Web, ma possono essere modificati solo se visitate un’area diversa del sito Web.
Nel caso più semplice, l’unica parte variabile dell’URL di visualizzazione rapida è lo SKU del prodotto. In questo caso, il valore SKU è l’unico dato necessario per aggiungere aree sensibili all’immagine del banner.
Tuttavia, in casi complessi, l’URL Quickview presenta elementi diversi oltre allo SKU, come ID categoria, codice colore, codice dimensione e così via. In questi casi, ogni elemento è una variabile separata nella definizione dei dati del punto di attivazione nella funzione di immagine interattiva acquistabile in Risorse AEM.
Considerate i seguenti esempi di URL di visualizzazione rapida e le relative variabili di punti di attivazione:
SKU singolo, trovato nella stringa di query.
Gli URL della visualizzazione rapida registrati includono quanto segue:
  • https://server/json?productId=866558&source=100
  • https://server/json?productId=1196184&source=100
  • https://server/json?productId=1081492&source=100
  • https://server/json?productId=1898294&source=100
L’unica parte variabile dell’URL è il valore del parametro della stringa di query productId= ed è chiaramente un valore SKU. Pertanto, i nostri punti di attivazione richiedono solo campi SKU popolati con valori quali 866558 , 1196184 , 1081492 , 1898294 .
SKU singolo, trovato nel percorso dell’URL.
Gli URL della visualizzazione rapida registrati includono quanto segue:
  • https://server/product/6422350843
  • https://server/product/1607745002
  • https://server/product/0086724882
La parte variabile si trova nell’ultima parte del percorso e diventa il valore SKU dei punti di attivazione: 6422350843 , 1607745002 , 0086724882 .
SKU e ID categoria nella stringa di query.
Gli URL della visualizzazione rapida registrati includono quanto segue:
  • https://server/quickView/product/?category=1100004&prodId=305466
  • https://server/quickView/product/?category=1100004&prodId=310181
  • https://server/quickView/product/?category=1740148&prodId=308706
In questo caso, l’URL contiene due parti diverse. Lo SKU è memorizzato nel prodId parametro e nell’ID categoria
categoryId
  • 305466 categoryId 1100004
  • 310181 categoryId 1100004
  • 308706 categoryId 1740148
Esempio
Potete applicare lo stesso approccio utilizzato nei tre esempi riportati sopra alla pagina Web della demo:
La pagina Web della demo contiene diverse miniature di prodotto, ognuna delle quali presenta un pulsante di visualizzazione rapida con l'etichetta Ulteriori informazioni. Con lo strumento di debug del browser Web ancora attivato, fate clic su ciascun pulsante e prendete nota degli URL di visualizzazione rapida registrati. Dopo aver attivato tutte e quattro le quickview del prodotto disponibili sulla pagina, è disponibile il seguente elenco di richieste Quickview effettuate sul back-end:
  • /datafeed/Men-Windbreaker.json
  • /datafeed/Men-SimpleHenley.json
  • /datafeed/Men-CamoPullover.json
  • /datafeed/Women-QuiltedDownJacket.json
Osservando queste chiamate al server, le informazioni specifiche per il prodotto sono presenti solo nel percorso della richiesta. Si noti inoltre che la stringa di query non viene utilizzata e che sono coinvolti due tipi distinti di dati:
  • Il primo tipo è Uomo o Donna. Puoi chiamare questa "categoria di prodotti".
  • Il secondo tipo è il nome del prodotto, ad esempio CamoPullover. Potete presumere che questo sia lo SKU del prodotto.
Considerate queste informazioni, l’intero URL di Quickview presenta il seguente pattern:
/datafeed/$categoryId$-$SKU$.json
In base a tale analisi, si utilizzerebbero categoryId e SKU per i punti di attivazione.
È ora possibile caricare un banner immagine e aggiungervi degli hotspot tramite la funzione per immagini interattive acquistabile in Risorse AEM.

(Facoltativo) Creazione di un predefinito per visualizzatori immagini interattivi

Potete scegliere di utilizzare il predefinito per visualizzatori di immagini interattive predefinito, denominato Shoppable_Banner , fornito con Risorse AEM. Oppure potete creare un predefinito per visualizzatori personalizzato da usare con immagini interattive.
Quando create un predefinito per visualizzatori di immagini interattive personalizzato, potete determinare l’aspetto dei punti attivi nel banner immagine. Come parte della creazione del predefinito per visualizzatori, potete scegliere di usare un elemento grafico per punti di attivazione da una raccolta di immagini predefinite.
Dopo aver salvato il predefinito per visualizzatori, questo viene attivato automaticamente (attivato) nella pagina dell’elenco Predefiniti ​visualizzatore di Risorse AEM. Questa funzionalità significa che è visibile nel componente Contenuti multimediali interattivi e ogni volta che visualizzate una risorsa. Tuttavia, per distribuire un banner interattivo con questo predefinito per visualizzatori, dovete pubblicare anche il predefinito per visualizzatori (vale per i predefiniti per visualizzatori personalizzati o forniti con Scene7).
Per creare un predefinito per visualizzatori immagini interattivi:
  1. Nella barra a sinistra, toccate Strumenti > Risorse > Predefiniti visualizzatore.
  2. Near the upper-right corner of the page, tap Create .
  3. Nella finestra di dialogo Nuovo predefinito per visualizzatori, digitate un nome per descrivere il predefinito per visualizzatori per banner interattivi.
    Titolo che verrà visualizzato nella pagina dell’elenco Predefiniti ​visualizzatore dopo il salvataggio.
  4. In the Rich Media Type pull-down menu, select Interactive Image .
  5. Toccate Crea .
  6. On the Edit Viewer Preset page, tap the Appearance tab.
  7. Effettua una delle operazioni seguenti:
    • Per caricare un’immagine del punto di attivazione che desiderate usare sulle immagini, toccate l’icona Selettore risorsa. Nella pagina Seleziona contenuto , individuate l’immagine del punto di attivazione da usare, selezionatela, quindi toccate l’icona Contrassegno nell’angolo in alto a destra.
    • Per selezionare un'immagine per un punto di attivazione predefinito, toccate l'icona Hotspot Gallery . Nella palette della galleria del punto di attivazione, toccate l’immagine del punto di attivazione che desiderate usare.
  8. Near the upper-right corner of the page, tap Save .
    Accertatevi di pubblicare il nuovo predefinito per visualizzatori.
    Consultate Predefiniti Per Visualizzatori Di Pubblicazione Aggiunti .
    È ora possibile caricare un banner immagine.

Caricamento di un banner immagine

Se avete già caricato le immagini da usare, passate al passaggio successivo e Aggiungete punti attivi a un banner di immagine.
Per caricare un banner immagine:
  1. Caricate i banner immagine da rendere interattivi.
    È ora possibile aggiungere punti di attivazione al banner immagine; consulta l’attività successiva di seguito.

Aggiunta di punti attivi a un banner di immagine

Potete aggiungere punti attivi a un banner immagine utilizzando l'editor nella pagina Gestione dei punti attivi.
Quando aggiungete degli hotspot, potete definirli come una visualizzazione a comparsa Quickview, come un collegamento ipertestuale o un frammento esperienza.
Consulta Frammenti Frammenti esperienza esperienza.
Gli strumenti di condivisione social media in Immagine interattiva non sono supportati quando incorporate il visualizzatore in un frammento esperienza. Per ovviare a questo problema, potete usare o creare predefiniti per visualizzatori privi di strumenti per la condivisione social media. Tali predefiniti per visualizzatori consentono di incorporarli correttamente nei frammenti esperienza.
Le opzioni Annulla e Ripristina , accanto all’angolo in alto a destra della pagina, sono supportate durante la sessione di creazione/modifica corrente.
Al termine della creazione dell’immagine interattiva, potete usare Anteprima per visualizzare una rappresentazione dell’aspetto dell’immagine interattiva per i clienti.
Quando aggiungete punti di attivazione a un’immagine in un’immagine interattiva o in un banner carosello, le informazioni relative ai punti di attivazione vengono memorizzate nella stessa posizione di metadati, 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 di attivazione definiti, in entrambi i visualizzatori.
Tenete presente, tuttavia, che i banner carosello supportano le mappe immagine sulle immagini che possono anche contenere punti di attivazione; un’immagine interattiva non lo è. Tenete presente questo aspetto se intendete 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.
Consultate anche Banner carosello .
Se modificate immagini interattive con punti attivi e ritagliate l’immagine, i punti attivi vengono rimossi.
Per aggiungere punti attivi a un banner di immagine:
  1. Nella vista Risorse, individuate il banner immagine da rendere interattivo.
  2. Effettua una delle operazioni seguenti:
    • Hover on the image, then tap [Select (checkmark icon). Sulla barra degli strumenti, toccate [Edit .
    • Passate il puntatore sull'immagine, quindi toccate Altre azioni (icona a tre punti) > Modifica .
    • Toccate l’immagine per aprirla nella pagina Visualizzazione ​dettagli. Sulla barra degli strumenti, toccate [Edit .
  3. Near the upper-left corner of the page, tap Add Hotspot (finger tap icon) to open the Hotspot Management page.
  4. Near the upper-left corner of the page, tap Hotspot .
  5. a. Nell’angolo in alto a sinistra della pagina Gestione dei punti attivi, toccate Area sensibile . b. Sull'immagine, toccate la posizione in cui desiderate visualizzare il punto di attivazione. Se necessario, trascina il punto attivo per regolarne la posizione. c. Se necessario, potete aggiungere altri punti di attivazione ripetendo i passaggi a e b. d. (Facoltativo) Per eliminare un punto di attivazione, selezionatelo sull'immagine, quindi toccate Elimina (icona cestino) sotto l'intestazione Punti attivi .
  6. Nel campo di testo Nome , digitare il nome del punto di attivazione. Questo nome viene visualizzato anche nell'elenco a discesa Area sensibile selezionata.
  7. Effettua una delle operazioni seguenti:
    • Toccate Visualizzazione rapida .
      • Se siete clienti AEM Sites o eCommerce, toccate l'icona Product Picker (lente di ingrandimento) per aprire la pagina Select Product (Seleziona prodotto ). Toccate il prodotto che desiderate utilizzare, quindi toccate Seleziona nell’angolo in alto a destra della pagina per tornare alla pagina Gestione dei punti attivi.
      • Se non sei un cliente AEM Sites o eCommerce
        • Consultate Identificazione delle variabili dei punti di attivazione; sarà necessario definire queste variabili.
        • Quindi, immettete manualmente il valore SKU. Nel campo di testo Valore ​SKU digitare lo SKU del prodotto (Stock Keeping Unit), che è un identificatore univoco per ciascun prodotto o servizio distinto offerto. Il valore SKU immesso popola automaticamente la porzione variabile del modello Quickview, in modo che il sistema sia in grado di associare il punto attivo toccato a una particolare visualizzazione Quickview dello SKU.
        • (Facoltativo) Se all’interno della visualizzazione rapida sono presenti altre variabili che è necessario utilizzare per identificare ulteriormente un prodotto, toccate Aggiungi variabile generica. Nel campo di testo, specificate una variabile aggiuntiva. Ad esempio, category=Mens è una variabile aggiunta.
    • Toccate Collegamento ipertestuale .
      • Se siete clienti AEM Sites, toccate l'icona Site Selector (Selettore sito) (cartella) per passare a un URL. Il metodo di collegamento basato su URL non è possibile se il contenuto interattivo contiene collegamenti con URL relativi, in particolare con collegamenti alle pagine AEM Sites.
      • Se siete clienti indipendenti, nel campo di testo HREF specificate il percorso completo dell’URL di una pagina Web collegata.
      Accertatevi di specificare se aprire il collegamento in una nuova scheda del browser (impostazione predefinita consigliata) o nella stessa scheda.
      Per ulteriori informazioni, consulta Uso dei selettori .
    • Tap Experience Fragment .
      • Se siete clienti AEM Sites, toccate l’icona Ricerca (lente di ingrandimento) per aprire la pagina Frammento esperienza. Toccate il frammento esperienza che desiderate utilizzare, quindi toccate Seleziona nell’angolo superiore destro della pagina per tornare alla pagina di gestione dell’area sensibile.
        Consulta Frammenti Frammenti esperienza esperienza.
        Gli strumenti di condivisione social media in Immagine interattiva non sono supportati quando incorporate il visualizzatore in un frammento esperienza. Per ovviare a questo problema, potete usare o creare predefiniti per visualizzatori privi di strumenti per la condivisione social media. Tali predefiniti per visualizzatori consentono di incorporarli correttamente nei frammenti esperienza.
      • Specificate la larghezza e l'altezza del frammento esperienza così come apparirà sul banner.
  8. Toccate Salva per salvare il lavoro e tornare alla pagina Sfoglia .
  9. Pubblicate l’immagine interattiva. La pubblicazione consente la distribuzione del banner tramite cloud e la generazione del codice da incorporare se è necessario effettuare l’integrazione con un sito Web di terze parti.
    Dopo aver aggiunto degli hotspot e pubblicato l’immagine interattiva, potete ora aggiungerla al sito Web esistente.
    Se modificate immagini interattive con punti attivi e ritagliate l’immagine, i punti attivi vengono eliminati.

(Facoltativo) Anteprima delle immagini interattive

Potete usare Anteprima per vedere l’aspetto dell’immagine interattiva per i clienti e per verificare i punti di attivazione dell’immagine in modo che si comportino come previsto.
Una volta ottenuta l’immagine interattiva, potete pubblicarla. See Embedding the Video or Image Viewer on a Web Page . See Linking URLs to your web application . Il metodo di collegamento basato su URL non è possibile se il contenuto interattivo contiene collegamenti con URL relativi, in particolare con collegamenti alle pagine AEM Sites. See Adding Dynamic Media Assets to Pages.
Per visualizzare in anteprima le immagini interattive:
  1. Nella vista Risorse, individuate un’immagine interattiva esistente creata e toccate per aprirla in Anteprima.
  2. Nell’angolo in alto a sinistra della pagina Anteprima, toccate Visualizzatori dall’elenco a discesa Contenuto .
  3. Nell’elenco Visualizzatori , toccate Shoppable_Banner o il nome del predefinito per visualizzatori di immagini interattivi creato.
  4. Toccate i punti di attivazione sull'immagine per verificare le azioni associate.

Pubblicazione di risorse di immagine interattive

Consultate Pubblicazione di risorse per informazioni dettagliate sulla pubblicazione di risorse di immagini interattive.

Integrazione di un’immagine interattiva con il sito Web

Dopo aver caricato un'immagine del banner, aggiunto dei punti di attivazione all'immagine e pubblicato l'immagine interattiva, potete ora aggiungerla alla pagina del sito Web.
Se siete clienti di AEM Sites, potete aggiungere l’immagine interattiva trascinando il componente Supporto interattivo sulla pagina. See Adding Dynamic Media Assets to Pages.
Se sei un cliente autonomo di Risorse AEM, puoi aggiungere manualmente l’immagine interattiva al tuo sito Web come descritto in questa sezione.
  1. Copiate il codice da incorporare dell’immagine interattiva pubblicata.
  2. Aggiungete il codice da incorporare copiato nella posizione desiderata all’interno della pagina Web.
    Il codice da incorporare copiato è impostato per un ambiente reattivo e dovrebbe quindi adattarsi automaticamente all'area assegnata.
Esempio
Esempio di utilizzo del sito Web demo:
Notate che l'immagine dei tre uomini è un IMG tag statico:
<img class="img-responsive" width="100%" title="Hero Image 2" alt="Hero Image 2" src="images/shoppable-banner.jpg">

L’integrazione è semplice come rimuovere il IMG tag e sostituirlo con il codice da incorporare copiato da AEM Assets. Potete visualizzare il risultato nel seguente URL che mostra l’immagine interattiva acquistabile sulla pagina con tre punti di attivazione cerchio:
A questo punto, i punti di attivazione sull'immagine interattiva acquistabile del sito Web demo sono solo a scopo di visualizzazione; non sono ancora integrati con le viste Quickview esistenti.
Per applicare un ritaglio a un’immagine interattiva acquistabile per un ambiente reattivo, potete includere l’attributo di configurazione Immagine interattiva ZoomView.iscommand nel percorso, dove ZoomView è il componente da chiamare ed iscommand è il comando di ritaglio dell’immagine da applicare.
Consultate Attributo di configurazione ZoomView.iscommand .
Consultate Ritagliare le immagini, comando di gestione.
È ora possibile integrare l’immagine interattiva con una visualizzazione rapida esistente sul sito Web.

Integrazione di un’immagine interattiva con una visualizzazione rapida esistente

Questa attività è valida solo se sei un cliente autonomo di Risorse AEM.
L’ultimo passaggio di questo processo consiste nell’integrare l’immagine interattiva con un’implementazione esistente di Quickview 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 che molto probabilmente coinvolga l'assistenza di una persona IT front-end.
L’implementazione esistente di Quickview rappresenta in genere una catena di azioni correlate che si verificano sulla pagina Web nel seguente ordine:
  1. Un utente attiva un elemento nell’interfaccia utente del sito Web.
  2. Il codice front-end ottiene un URL Quickview basato sull’elemento dell’interfaccia utente attivato nel passaggio 1.
  3. Il codice front-end invia una richiesta Ajax utilizzando l’URL ottenuto al punto 2.
  4. La logica di back-end restituisce i dati o il contenuto della visualizzazione rapida corrispondenti al codice front-end.
  5. Il codice front-end carica i dati o il contenuto della visualizzazione rapida.
  6. Facoltativamente, il codice front-end converte i dati Quickview caricati in una rappresentazione HTML.
  7. Il codice front-end visualizza una finestra di dialogo o un pannello modale ed esegue il rendering del contenuto HTML sullo schermo per l'utente finale.
Queste chiamate potrebbero non rappresentare 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.
Contemporaneamente alla sostituzione dell’immagine interattiva acquistabile con il passaggio 1 e in parte il passaggio 2, quando un utente fa clic su un punto di attivazione 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 di attivazione precedentemente aggiunti a Risorse AEM.
In un tale gestore di eventi, il codice front-end esegue le seguenti operazioni:
  • Ascolta un evento emesso dall'immagine interattiva acquistabile.
  • Crea un URL di visualizzazione rapida basato sui dati del punto di attivazione.
  • Attiva il processo di caricamento della visualizzazione rapida dal back-end e di rendering della visualizzazione sullo schermo.
Il codice da incorporare restituito da Risorse AEM dispone già di un gestore di eventi pronto all’uso, commentato, come mostrato nel frammento di codice evidenziato seguente:
        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 fittizio del gestore con il codice specifico per la pagina Web specifica.
Il processo di creazione dell’URL di visualizzazione rapida è sostanzialmente opposto a quello utilizzato per identificare le variabili dei punti di attivazione trattate in precedenza.
Consultate Identificazione delle variabili dei punti di attivazione.
Utilizzando i nostri precedenti esempi di URL di Quickview, potete vedere negli esempi seguenti in che modo l’URL di Quickview è costruito in ogni caso:
SKU singolo, trovato nella stringa di query
s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/json?productId=" + inData.sku + "&amp;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 di query
s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/quickView/product/?category=" + inData.categoryId + "&amp;prodId=" + inData.sku; }, });
L’ultimo passaggio per attivare l’URL di visualizzazione rapida e attivare il pannello di visualizzazione rapida richiede probabilmente l’assistenza di un esperto IT front-end del reparto IT. Essi hanno la capacità di sapere come attivare con precisione l’implementazione della visualizzazione rapida dal passaggio corretto, avendo un URL Quickview pronto all’uso.
Potete vedere come questi passaggi vengono applicati al sito Web dimostrativo per integrare completamente un’immagine interattiva acquistabile con il codice Quickview. In precedenza, la struttura dell’URL di Quickview era identificata come segue:
/datafeed/$categoryId$-$SKU$.json

Per ricostruire questo URL all'interno del quickViewActivate gestore, potete utilizzare i campi categoryId e SKU disponibili nell' 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 una semplice chiamata loadQuickView() di funzione. Questa funzione richiede un solo argomento, ovvero l'URL dei dati di Quickview. Come tale, l'ultimo passaggio necessario per integrare l'immagine interattiva acquistabile è quello di aggiungere la seguente riga di codice al quickViewActivate gestore:
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 dimostrativo finale con l'immagine interattiva completamente integrata si presenta come segue:

Utilizzo delle visualizzazioni rapide per creare finestre a comparsa personalizzate