immagini interattive

È possibile rendere le immagini statiche ricche e attraenti per i clienti trascinando e rilasciando punti interattivi “di vendite” in un’immagine. Gli hotspot di vendita combinano ulteriori informazioni su un prodotto o servizio con un punto di vendita diretto e punto vendita “Aggiungi al carrello” o “Acquisto”. I clienti possono premere queste aree interattive che sono direttamente collegate al prodotto o al servizio, aggiungile a un carrello o essere collegati a una pagina Web. Esperienze dirette come aumentare la partecipazione dei clienti e conversioni sul sito web.

Di seguito è riportato un banner di vendita con una finestra pop-up veloce. Un utente abilita la vista rapida toccando il cerchio o la “area interattiva” del modello.

Vedi Immagini interattive in azione sul sito Web che vengono visualizzate sopra.

Vedere Come vengono create banner Image Interactive

Guarda un tutorial di 10 minuti e 33 secondi su come i segni vengono creati interattivi Immagine. Imparerai anche come visualizzare in anteprima, modificare e distribuire banner immagini interattive.

Avvio rapido: immagini interattive

La seguente descrizione passo dopo passo del flusso di lavoro è progettato per aiutarti Immagini interattive rapidamente alle risorse AEM.

Trova l’intestazione di esempio all’interno di alcune delle attività di avvio rapido. Contiene un breve tutorial sulla base di un esempio di una pagina Web che non ha le immagini interattive aggiunte ad esso.

Il tutorial aiuta a illustrare i passaggi per integrare le immagini interattive sul proprio sito web.

Passaggi interattivi dell’immagine:

1. (opzionale) Identificazione delle variabili del punto interattivo. Se si utilizza Adobe Experience Manager e Dynamic Media Risorse Indipendente, identificare le variabili dinamiche che si utilizzano nell’implementazione rapida esistente. In questo modo, è garantito che è possibile inserire i dati dai punti interattivi durante la creazione dell’immagine interattiva. Vedi (facoltativo) Identificazione delle variabili del punto interattivo.
   Tuttavia, se si utilizza Siti AEM, AEM Ecommerce o entrambi, questo passaggio non è necessario.

2. (opzionale) Creazione di un’impostazione di visualizzazione interattiva pre-consolidata. Personalizza l’immagine grafica utilizzata per rappresentare aree interattive. Non è necessario creare il tuo Viewer Interactive Image Viewer pre-definito Se si desidera utilizzare l’impostazione Image Viewer Interactive PRESET, denominato Shoppable_Banner invece.
   Vedi (opzionale) Creazione di A Impostazione pre-consolidata dell’immagine interattiva dell’immagine.

3. Caricamento di un banner immagine. Carica le bandiere dell’immagine che si desidera creare interattive. Vedere Caricamento di un banner immagine.

4. Aggiunta di zone interattive a un titolare dell’immagine. Aggiungi una o più aree interattive a un banner immagine. Associare ognuno di loro a un’azione come collegamento ipertestuale, una vista rapida o un frammento di esperienza. Dopo aver aggiunto zone interattive, questa attività finirà per pubblicare l’immagine interattiva.
   Vedi Aggiunta Aggiunta di zone interattive a un titolare dell’immagine.
   Vedi Anteprima delle immagini interattive – opzionale. Se lo desideri, puoi vedere una rappresentazione del banner di vendita e testare l’interattività.
   Vedi la pubblicazione di risorse per ulteriori informazioni su come pubblicare risorse immagine interattiva.

5. Aggiungi un’immagine interattiva al sito Web o al sito Web presso Experience Manager. Se si utilizzano siti, e-commerce o entrambi, è possibile aggiungere immagini interattive direttamente a una pagina Web presso Experience Manager. Trascina il componente multimediale interattivo sulla pagina. Vedere Aggiunta di aggiungere risorse dei media dinamiche alle pagine.
   Se si utilizzano risorse di gestione dell’esperienza e supporti dinamici in modo indipendente, copia il codice crittografato sul sito web. Quindi, includilo con la vista rapida esistente. Vedi integrato un’immagine interattiva con il tuo sito web.
   Se si utilizza un WCM di terze parti (Web Content Manager), integra il nuovo video interattivo con la visualizzazione rapida esistente utilizzata sul sito web. Vedi integrato un’immagine interattiva con una vista rapida esistente.

(opzionale) Identificazione delle variabili del punto interattivo

Start Identificando le variabili dinamiche che utilizzano l’implementazione rapida esistente, in modo da poter immettere i dati del punto interattivo per creare l’immagine interattiva.

Quando aggiungi aree interattive Per un’immagine del titolare delle risorse di Gestione dell’esperienza, assegnare un SKU (unità di manutenzione delle azioni). Lo SKU è un identificatore unico per ogni diverso prodotto o servizio che offre. E, aggiungi qualsiasi variabile opzionale aggiuntiva a ciascuna area interattiva. Queste variabili dei punti interattivi vengono utilizzate in seguito per abbinare i punti interattivi con il contenuto della vista rapida.

È importante identificare correttamente il numero e il tipo di variabili che saranno associate ai dati dei punti interattivi. Ogni zona interattiva aggiunta a un’immagine banner deve contenere informazioni sufficienti per identificare il prodotto inequivocabilmente nel sistema di back-end esistente.

Esistono diversi modi per identificare un insieme di variabili che verranno utilizzate per i dati interattivi Punti.

A volte è sufficiente consultare gli specialisti IT responsabili dell’attuazione rapida esistente. È probabile che queste persone sappiano cosa è necessario il set di dati minimo per identificare la visualizzazione rapida nel sistema. Tuttavia, è anche possibile analizzare semplicemente il comportamento esistente del codice front-end.

la maggior parte delle implementazioni della vista rapida Utilizzare il seguente paradigma:

• L’utente attiva Un elemento di interfaccia utente sul sito web. Ad esempio, facendo clic sul pulsante “Vista rapida”.
• Il sito Web invia un’applicazione Ajax al server per caricare i dati o il contenuto della vista rapida, se necessario.
• Visita rapida I dati vengono tradotti in contenuti come preparazione per il rendering sulla pagina Web.
• Infine, il codice front-end elabora visivamente detto contenuto sullo schermo.

il Il metodo viene quindi visitato diverse aree del sito Web esistente in cui viene implementata la funzione di visualizzazione rapida. Quindi, attivare la vista rapida e acquisire l’URL AJAX che invia la pagina Web per caricare i dati o il contenuto della visualizzazione rapida.

Normalmente non è necessario utilizzare uno strumento di debug specializzato. I moderni browser Web hanno ispettori web che eseguono un lavoro adeguato. Di seguito sono riportati alcuni esempi di browser Web che includono ispettori web:

• per vedere tutte le richieste HTTP in uscita su Google Chrome, premere F12 per aprire il pannello Strumenti per sviluppatori e, continua, fare clic su la scheda di rete.
  su un Mac, premere comando + opzione + I per aprire il pannello Strumenti per sviluppatori, quindi fare clic sulla scheda Rete.

• In Firefox, tu Può attivare lo snap-in Firebug e l’utilizzo della scheda di rete. Oppure, è possibile utilizzare lo strumento di ispezione integrato e la scheda di rete.
  su un Mac, premere Command + option + I I Developers Tools Panel, quindi fare clic sull’ispettore TAB.

Quando il monitoraggio della rete è attivato nel browser, controllare Quick View sulla pagina.

Ora, cerca l’URL AJAX di Vista Anteprima Nel registro di rete e copiare l’URL registrato per l’analisi futura. Di solito, quando viene attivata la vista rapida, ci sono molte richieste inviate al server. Normalmente, l’URL AJAX di Quick View è uno dei primi sulla lista. Ha una rotta o una parte di una catena di query complessa e il tuo tipo di risposta MIME è text/html, text/xml o text/javascript.

Durante questo processo, è importante visitare diverse aree del sito Web, con diversi tipi e categorie di prodotti. La ragione è che gli URL della vista veloce possono avere parti comuni per una data categoria del sito web. Tuttavia, cambiano solo se visiti una zona diversa del sito web.

Nel caso più semplice, l’unica parte variabile dell’URL di visualizzazione rapida è la SKU del prodotto. In questo caso, il valore SKU è l’unico pezzo di dati che è necessario aggiungere zone interattive all’immagine del banner.

Tuttavia, in casi complessi, l’URL di visualizzazione rapida ha elementi diversi in aggiunta al Sku. Ad esempio, i diversi elementi possono includere l’ID della categoria, il codice colore e il codice dimensione.In questi casi, ciascun elemento è una variabile indipendente nella definizione dei dati del punto interattivo dalla funzione di immagini di vendita delle risorse di Gestore esperienza.

Vediamo i seguenti esempi di URL di visualizzazione rapida e le variabili dei punti interattivi risultanti:

sku unico, che si trova nella catena di query.	registrati Quick View URLs 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 della variabile nell’URL è il valore del valore del valore del Prodotto dei parametri della catena della query = ed è chiaramente un valore di SKU. Pertanto, le aree interattive necessitano solo di campi SKU riempiti con valori come , 1196184, , 1898294.
sku single, che è sul percorso dell’URL.	Gli URL Quick View registrati includono quanto segue: https://server/product/6422350843 https://server/product/1607745002 https://server/product/0086724882 La parte variabile viene trovata nell’ultima parte del percorso e diventa il valore SKU delle zone interattive: 6422350843, 1607745002, 0086724882.
sku e categoria ID nel Catena di query.	registrato Quick view URL include 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, ci sono due parti diverse nell’URL. Lo SKU è memorizzato nel parametro prodId e l’ID di categoria è memorizzato nel parametro category=. Come tale, le definizioni dei punti interattive sono coppie. Cioè, un valore di SKU e una variabile aggiuntiva chiamata . Le coppie risultanti sono le seguenti: lo SKU è 305466 e è 1100004. Lo SKU è 310181 e categoryId è 1100004. Lo SKU è 308706 e categoryId è 1740148.

Esempio

È possibile applicare lo stesso approccio utilizzato nei tre esempi prima della pagina Web DEMO.

La pagina Web Demo ha diverse miniature del prodotto, ciascuna con un pulsante di visualizzazione rapido etichettato come “Vedi altro”. Con lo strumento Debug Explorer Web ancora attivato, fare clic su ciascun pulsante e annotare gli URL selezionati rapidi registrati. Dopo aver attivato le quattro visualizzazioni rapide del prodotto disponibili sulla pagina, ha il seguente elenco di richieste di visualizzazione rapida eseguite sul server:

• /datafeed/Men-Windbreaker.json
• /datafeed/Men-CamoPullover.json
• /datafeed/Women-QuiltedDownJacket.json

Quando esaminano le chiamate al server, è possibile vedere che le informazioni specifiche del prodotto sono presenti solo nel percorso dell’applicazione. Nota inoltre che la catena di query non viene utilizzata affatto e che ci sono due diversi tipi di frammenti di dati coinvolti:

• il primo tipo è uomini o donne. Puoi chiamare questa “categoria di prodotti”.
• Il secondo tipo è il nome del prodotto, come Camopulover, che è probabilmente lo SKU del prodotto.

Dato a tali informazioni, l’intero URL di View veloce ha il seguente standard:

/datafeed/$categoryId$-$SKU$.json

A seconda di questa analisi, userebbe categoryId e SKU per le zone interattive.

è già pronto per caricare un supporto dell’immagine e aggiungere zone interattive attraverso la funzione di Immagine di vendita interattiva alle risorse AEM.

(opzionale) Creazione di un visualizzatore interattivo pre-affermato Viewer

È possibile scegliere di utilizzare il preset predefinito e pronto per utilizzare l’Image Viewer Interactive chiamato Shoppable_Banner incluso in AMEM Attività. Oppure è possibile creare il tuo display personalizzato preimpostato per usarlo con immagini interattive.

Quando si crea un’impostazione preimpostata personalizzata del display interattivo dell’immagine, è possibile determinare l’aspetto delle zone interattive sulla banner dell’immagine .Come parte della creazione dell’impostazione di visualizzazione prestabilita, è possibile scegliere di utilizzare un grafico della zona interattiva di una galleria di immagini predefinita.

Dopo aver salvato l’impostazione del visualizzatore predefinito, viene automaticamente attivato (attivato) in Le impostazioni del visualizzatore prestabilito della pagina di lista nelle attività AEM. Questa funzionalità significa che è visibile nel componente multimediale interattivo e quando viene visualizzata una risorsa. Tuttavia, per fornire un banner interattivo con questa regolazione del visualizzatore preimpostata, pubblica anche l’impostazione dello spettatore prestabilita. Questa regola è vera per le impostazioni predefinite del mirino personalizzate o predeterminate.

per creare un’impostazione del visualizzatore di immagini interattive

1. Nel canale sinistro, premere strumenti > Assets > Impostazioni preselezionate visiera.

2. Vicino all’angolo superiore a destra della pagina, fare clic su Crea .

3. impostazione del nuovo Visualizer Preset finestra di dialogo, digitare un nome per descrivere l’impostazione del display striscione prestabilito interattivo.

   Questa appare titolo sul Pagina di elenco delle impostazioni del mirino Preset Impostazioni dopo averlo salvato.

4. Nel menu a discesa Tipo di supporto arricchito, selezionare Immagine interattiva.

5. Toccare Crea.

6. Nella pagina Modifica impostazioni di visualizzazione preset, premere la scheda Aspect.

7. Fai uno dei seguenti :

   • Per caricare la propria immagine di zona interattiva che si desidera utilizzare nelle immagini, premere l’icona del selettore risorse. Nella pagina Seleziona contenuto, vai all’immagine della zona interattiva che si desidera utilizzare e selezionarla. Premere l’icona di spunta nell’angolo in alto a destra.
   • Per selezionare un’immagine di zona interattiva predefinita, premere l’icona della galleria dei punti interattivi. Nella tavolozza della galleria dei punti interattivi, premere l’immagine della zona interattiva che si desidera utilizzare.

8. Vicino all’angolo in alto a destra della pagina, premere Salva.

   Assicurarsi di pubblicare la nuova impostazione del visualizzatore preimpostato.

   Vedi Impostazioni di visualizzazione della pubblicazione personalizzata.

   Sei pronto per caricare un supporto dell’immagine.

Caricamento di un supporto immagine

Se sono già state caricate le immagini che si desidera utilizzare, avanzare al passaggio successivo, aggiungere zone interattive a un titolare dell’immagine.

Per caricare un supporto dell’immagine

1. Carica le banner dell’immagine che si desidera rendere interattive.

   V consultare Gamma di risorse.

   è già pronto ad aggiungere zone interattive al titolare dell’immagine; Vedere la seguente attività sottostante.

Aggiunta di zone interattive a un titolare dell’immagine

È possibile aggiungere zone interattive a un banner immagine utilizzando l’editor dall’editor dall’editor dall’editor da Interactive Pagina di gestione del punto.

Quando si aggiungono zone interattive, è possibile definirli come una vista pop-up di Quick View, come un collegamento ipertestuale o un frammento di esperienza.

Vedi frammenti di esperienze .

Opzioni Annulla e ripetizione, vicino all’angolo in alto a destra della pagina, sono compatibili durante la sessione di Creazione / Current Edition.

Al termine della creazione dell’immagine interattiva, è possibile utilizzare l’anteprima per vedere una rappresentazione di come appare l’immagine interattiva per i clienti.

Vedi (opzionale) Vista Precedente di immagini interattive.

per aggiungere zone interattive a un titolare dell’immagine

1. Nella vista Risorse, scorrere fino all’insegnamento dell’immagine che si desidera convertire su Interactive.

2. Effettuare una delle seguenti azioni:

   • Passa il mouse sopra l’immagine, quindi premere Seleziona (icona del segno di spunta). Nella barra degli strumenti, premere Modifica.

   • Passa il mouse sopra l’immagine, quindi fare clic su Altre azioni (icona a tre punti) Modifica.

   • Per aprirlo nella pagina Visualizza dettagli, premere l’immagine. Nella barra degli strumenti, premere Modifica.

3. Vicino all’angolo in alto a sinistra della pagina, fare clic su Aggiungi area interattiva (icona con il tuo dito) per aprire la pagina di gestione del punto interattivo.

4. Vicino all’angolo in alto a sinistra della pagina, premere zona interattiva.

   1. nelle vicinanze dall’angolo in alto a sinistra di La pagina di gestione del punto interattivo, premi la zona interattiva.
   2. Nell’immagine, fare clic su una posizione in cui si desidera visualizzare il punto interattivo. Se necessario, trascina l’area interattiva per regolare la posizione. Oppure, utilizzare i tasti freccia sulla tastiera per controllare la posizione di un punto interattivo selezionato.
   3. Aggiungi più aree interattive se necessario ripetendo i passaggi A e B.
   4. (opzionale) a Elimina una zona interattiva, selezionarla nell’immagine, quindi premere Elimina (icona del cestino) nell’intestazione della zona interattiva.

5. Nel campo del nome del testo, Digita il nome dell’area interattiva. Questo nome appare anche nell’elenco a discesa della zona interattiva selezionata.

6. Fai una delle seguenti operazioni:

   • Premere Anteprima vista .

     • Se si sono siti AEM o client Ecommerce, toccare o fare clic sull’icona del selettore del prodotto (LUPA) per aprire la pagina Seleziona prodotto. Premere il prodotto che si desidera utilizzare, quindi premere Seleziona nell’angolo in alto a destra della pagina. Tornerà alla pagina di gestione dei punti interattivi.

     • Se non è cliente di siti di responsabile esperienza o ecommerce

       • Vedi identificazione delle variabili DOT Interattivo; È necessario definire queste variabili.
       • Avanti, immettere manualmente il valore di SKU. Nel campo del testo del valore SKU, scrivi il prodotto SKU. Il valore SKU inserito riempie automaticamente la parte variabile del modello di visualizzazione rapida. Assicura che il sistema marittimo associato l’area interattiva utilizzata con la vista rapida di uno SKU specifico.
       • (opzionale) Se ci sono altre variabili all’interno della vista rapida utilizzata per identificare un prodotto, premere Aggiungi variabile Generica . Nel campo Testo, specificare una variabile aggiuntiva. Ad esempio, category=Mens è una variabile aggregata.

   • touch iperlink.

     • Se si è client di siti di Gestione esperienza, premere l’icona del selettore del sito (cartella). Vai a un URL. Il metodo di collegamento basato su URL non è possibile se il contenuto interattivo ha collegamenti con gli URL relativi, in particolare i collegamenti a pagine dei siti di Experience Manager.
     • Se è un client indipendente, nel campo di testo HREF specificare l’URL completo percorso verso una pagina web collegata.

   Assicurarsi di specificare se si desidera aprire il collegamento in una nuova scheda Browser (opzione predefinita consigliata) o nel stessa scheda.

   Vedere Uso dei selettori per ulteriori informazioni.

   • Premere frammento di esperienze.

     • Se tu I siti client AEM sono, tocca o fai clic sull’icona di ricerca (Lente di ingrandimento) per aprire il frammento della pagina delle esperienze. Tocca il frammento dell’esperienza che vuoi usare. Quindi, premere Seleziona nell’angolo in alto a destra della pagina. Tornerà alla pagina di amministrazione dei punti interattivi.
       Vedi frammenti di esperienze.

     • Specificare la larghezza e l’altezza del frammento dell’esperienza come si desidera visualizzare sul banner.

       Nota

       Gli strumenti di condivisione dei social media nell’immagine interattiva non sono compatibili quando il mirino è incorporato in un frammento di esperienza. Invece, utilizzare o creare regolazioni preimpostati di visualizzazione che non hanno strumenti di condivisione dei social media.Queste impostazioni del visualizzatore predefinite consentono di incorporarle correttamente nei frammenti di esperienza.

7. Toccare Salva per salvare il lavoro e tornare alla pagina Sfoglia.

8. Pubblica l’immagine interattiva. La pubblicazione offre il banner attraverso il cloud e genera anche il codice incorporato che ti consente di integrarsi con un sito Web di terze parti.

   Vedi la pubblicazione delle risorse.

   Dopo aver aggiunto zone interattive e pubblica il Immagine interattiva, sei pronto per aggiungerlo al sito web esistente.

   Vedi integrazione di un’immagine interattiva con il tuo sito web.

   nota

   Se si modificano immagini interattive con zone interattive e tagli l’immagine, le zone interattive verranno eliminate.

(opzionale) Precedente Immagini interattive

È possibile visualizzare in anteprima di vedere una rappresentazione dell’aspetto che avrà l’immagine interattiva per i clienti. L’anteprima consente inoltre di testare le zone interattive dell’immagine per assicurarsi che si comportino nel modo previsto.

Quando si è soddisfatti dell’immagine interattiva, è possibile pubblicarlo.
Vedi Invalying the Image Visualizzatore o video su una pagina Web.
Vedi il collegamento URL sull’applicazione Web. Il metodo di collegamento basato su URL non è possibile se il contenuto interattivo ha collegamenti con gli URL relativi, in particolare i collegamenti alle pagine dei siti AEM.
Vedere Aggiunta di aggiunta di risorse dei media dinamiche alle pagine.

per visualizzare in anteprima immagini interattive

1. Nella vista delle risorse, scorrere fino all’immagine interattiva esistente che hai creato e premere per aprirlo in anteprima.
2. Vicino all’angolo in alto a sinistra della pagina di anteprima, nel calo del contenuto -Down Elenco, tocca visualizzatori.
3. Nell’elenco Visualizers, premere shoppable_banner o il nome dell’impostazione pre-stabilita del display interattivo dell’immagine che hai creato.
4. per testare l’associato Azioni delle aree interattive, premere le zone interattive dell’immagine.

Pubblicazione di risorse interattive dell’immagine

Vedi la pubblicazione delle risorse per ulteriori informazioni su come pubblicare risorse Image Interacti tu.

Integrazione di un’immagine interattiva con il tuo sito web

Dopo aver caricato un’immagine di banner, aggiungendo zone interattive ad esso e pubblicare l’immagine interattiva, sei pronto per aggiungerlo al Pagina del sito Web.

Se si sono siti client AEM, è possibile aggiungere l’immagine interattiva trascinando il componente multimediale interattivo sulla tua pagina. Vedere Aggiunta di aggiunta di risorse dinamiche dei supporti alle pagine.

Se si è un client indipendente di risorse AEM, è possibile aggiungere manualmente l’immagine interattiva al tuo sito web come descritto in questa sezione.

1. Copia il codice incorporato dell’immagine interattiva pubblicata.
   Vedere Abbracciare l’immagine o il display dei video su una pagina Web.

2. Aggiungi il codice incorporato che copia il codice a desiderato posizione all’interno della pagina Web.
   Il codice incorporato copiato è configurato per un ambiente interattivo, in modo che venga impostato automaticamente sull’area assegnata.

Esempio

>

Con il sito Web Mostra come esempio, si noti che l’immagine delle tre persone è un’etichetta statica IMG:

<img class="img-responsive" width="100%" title="Hero Image 2" alt="Hero Image 2" src="images/shoppable-banner.jpg">

L’integrazione è semplice come l’eliminazione dell’etichetta IMG e sostituirlo con il codice incorporato copiato dalle risorse AEM. Puoi vedere che il risultato mostra l’immagine di vendita interattiva sulla pagina con tre punti del cerchio interattivo.

Per applicare un “TRIM” a un’immagine di vendita interattiva per un ambiente interattivo, includere l’attributo di configurazione dell’immagine interattiva ZoomView.iscommand per il percorso. In questo caso, si chiama il componente e iscommand è il comando “Ritaglia” del server immagine applicato.

Vedere l’attributo di configurazione ZoomView.ISCommand.

Vedere il comando Crop Image Server.

è già pronto per integrare l’immagine interattiva con una visualizzazione rapida nel tuo sito web.

Integrazione di un’immagine interattiva con una vista rapida esistente

L’ultima fase di questo processo è integrare l’immagine interattiva con un’implementazione rapida esistente sul sito web.Non c’è soluzione per l’integrazione che funziona in tutti i casi. Ogni implementazione rapida è un approccio unico e è necessario un approccio specifico. Come tale, la partecipazione di una persona che la parte front-end è utile.

L’implementazione di visualizzazione rapida esistente rappresenta normalmente una catena di condire correlate che si verificano nella pagina Web nel seguente ordine:

1. Un utente attiva un elemento nell’interfaccia utente del sito Web.
2. Il codice front-end ottiene un rapido URL di visualizzazione in base all’elemento dell’interfaccia utente attivata al punto 1.
3. Il codice front-end invia una richiesta AJAX utilizzando l’URL ottenuto al punto 2.
4. La logica back-end restituisce i dati o il contenuto di visualizzazione rapida corrispondente al codice front-end.
5. Il codice front-end carica i dati o il contenuto della vista rapida.
6. Opzionalmente, l’estremità del codice anteriore converte rapidamente dati visualizzati in una rappresentazione HTML.
7. Il codice front-end visualizza una finestra di dialogo Modal o un pannello e rappresenta il contenuto HTML sullo schermo per il End User.

Queste chiamate non rappresentano necessariamente le chiamate API pubbliche indipendenti a cui la logica del sito web chiama da un passo arbitrario. Invece, è una chiamata incatenata in cui ogni passo successivo è nascosto nell’ultima fase (chiamata di ritorno) del passaggio precedente.

Quando l’immagine interattiva della tabella di vendita sostituisce il passaggio 1 e, in parte , al passaggio 2, un utente tocca un’area interattiva all’interno dell’immagine della tabella dello shopping. Lo spettatore gestisce questa interazione dell’utente. Il mirino restituisce un evento sul sito Web che contiene tutti i dati del punto interattivo aggiunti in precedenza a AEM Asset.

In un controller di eventi di questo tipo, il codice front-end fa quanto segue:

• Ascolta un evento emesso dall’immagine di vendita interattiva.
• Creare un URL di visualizzazione rapida in base ai dati della zona interattiva.
• Attiva il processo per caricare la vista rapida da il server e elaborarlo sullo schermo per il display.

Il codice incorporato restituito da Asset Gestione esperienza ha un driver di evento pronto per essere discusso, come VE nella sorgente successiva del codice evidenziata:

 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 decomentare il codice e sostituire il corpo del controller fittizio con il codice specifico del sito Web in particolare.

Il processo di costruzione dell’URL di View Fast è di fronte al processo utilizzato per identificare il s Variabili dei punti interattivi che sono stati precedentemente coperti.

Vedere l’identificazione delle variabili di punti interattive.

Negli esempi precedenti di URL di visualizzazione rapida è possibile vedere nei seguenti esempi come è costruito L’URL di visualizzazione rapida in ogni caso:

Sku Single, trovato in La catena di query	s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/json?productId=" + inData.sku + "&source=100"; }, });
single single, che è acceso La rotta URL	s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/product/" + inData.sku; }, });
SKU E ID categoria nella query Catena	s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/quickView/product/?category=" + inData.categoryId + "&prodId=" + inData.sku; }, });

L’ultimo passo per attivare l’URL di visualizzazione rapida e attivare il pannello View rapido richiede l’assistenza di una persona front-end dalla tua azienda. Hanno conoscenza per sapere meglio come attivare con precisione l’implementazione della vista rapida dal passaggio appropriato, avendo un url veloce pronto per l’uso.

Puoi vedere come questi passaggi si applicano al sito Web Demo per completamente Integrare un’immagine di vendita interattiva con il codice di visualizzazione rapido. In precedenza, la struttura dell’URL Quick View è stata identificata come quanto segue:

/datafeed/$categoryId$-$SKU$.json

per ricostruire questo URL all’interno del controller quickViewActivate, è possibile utilizzare i campi e SKU. Questi campi sono disponibili nell’oggetto inData che il codice visualizzatore passa al controller:

var sku=inData.sku;var categoryId=inData.categoryId;var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";

La dimostrazione del sito Web Attiva la finestra di dialogo Vista rapida utilizzando una semplice funzione di funzione loadQuickView(). Questa funzione richiede solo un argomento, che è l’URL dei dati a vista rapida. Come tale, l’ultimo passo per integrare l’immagine di vendita interattiva è aggiungere la seguente riga di codice al controller quickViewActivate:

loadQuickView(quickViewUrl);

Di seguito è il codice Full Source:

 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 interattiva.

Utilizzo delle viste veloci per creare Windows pop-up personalizzato

Vedere Utilizzo delle viste veloci per creare finestre pop-up personalizzate.