Immagini interattive

È 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 toccare questi hotspot che si collegano direttamente al prodotto o al servizio, aggiungerli a un 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 una finestra a comparsa Visualizzazione rapida. Un utente attiva la visualizzazione rapida toccando il cerchio o il "punto attivo" sul modello.

chlimage_1-152

Consulta immagini interattive in action nella pagina web illustrata sopra.

Guarda come vengono creati i banner immagine interattivi

Guarda una procedura dettagliata di 10 minuti e 33 secondi sulla creazione dei banner immagine interattivi. Inoltre, viene illustrato come visualizzare in anteprima, modificare e distribuire banner immagine interattivi.

Avvio rapido: Immagini interattive

La seguente descrizione dettagliata del flusso di lavoro è stata progettata per aiutarti a iniziare rapidamente a usare le immagini interattive in AEM Assets.

Cerca l'intestazione Esempio all'interno di alcune delle attività di avvio rapido. Contiene una breve esercitazione basata su un esempio di pagina web in cui non sono ancora state aggiunte immagini interattive.

L’esercitazione illustra i passaggi necessari per integrare le immagini interattive nel sito web.

Passaggi per le immagini interattive:

  1. (Facoltativo) Identificazione delle variabili dei punti attivi. Se utilizzi Adobe Experience Manager Assets e Dynamic Media standalone, identifica le variabili dinamiche utilizzate nell’implementazione della visualizzazione rapida esistente. In questo modo è possibile inserire i dati dei punti attivi durante la creazione dell’immagine interattiva. Consulta (Facoltativo) Identificazione delle variabili dei punti attivi.
    Tuttavia, se utilizzi AEM Sites, eCommerce AEM o entrambi, questo passaggio non è necessario.

  2. (Facoltativo) Creazione di un predefinito visualizzatore di immagini interattive. Personalizza l'immagine grafica utilizzata per rappresentare gli hotspot. La creazione di un proprio predefinito per visualizzatori di immagini interattive non è necessaria se invece desideri utilizzare il predefinito per visualizzatori di immagini interattive preimpostato Shoppable_Banner.
    Consulta (Facoltativo) Creazione di un predefinito visualizzatore di immagini interattive.

  3. Caricamento di un banner immagine. Carica i banner immagine che desideri rendere interattivi.
    Consulta Caricamento di un banner immagine.

  4. Aggiunta di punti attivi a un banner immagine. Aggiungi uno o più punti attivi a un banner immagine. Associare ciascuno di essi a un’azione, ad esempio un collegamento ipertestuale, una visualizzazione rapida o un frammento esperienza. Dopo aver aggiunto gli hotspot, finirai questa attività pubblicando l'immagine interattiva.
    Consulta Aggiunta di punti attivi a un banner immagine.
    Consulta Anteprima delle immagini interattive - Facoltativo. Se lo desideri, puoi visualizzare una rappresentazione del banner acquistabile e verificarne l’interattività.
    Per informazioni dettagliate su come pubblicare le risorse immagine interattive, consulta Pubblicazione delle risorse .

  5. Ad Experience Manager, è possibile aggiungere un’immagine interattiva al sito web o al sito web. Se utilizzi Sites, eCommerce o entrambi, puoi aggiungere immagini interattive direttamente a una pagina web in un Experience Manager. Trascina il componente File multimediali interattivi sulla pagina. Consulta Aggiunta di risorse Dynamic Media alle pagine.
    Se utilizzi Experience ManagerAssets e Dynamic Media standalone, copia il codice di incorporamento sul tuo sito web. Quindi, integralo con la visualizzazione rapida esistente. Consulta Integrazione di un’immagine interattiva con il sito web.
    Se utilizzi un WCM di terze parti (Web Content Manager), integra il nuovo video interattivo con la visualizzazione rapida esistente utilizzata sul sito web. Consulta Integrazione di un'immagine interattiva con una visualizzazione rapida esistente.

(Facoltativo) Identificazione delle variabili dei punti attivi

NOTA

Questa attività è necessaria solo se sono soddisfatte le seguenti condizioni:

  • Per aggiungere interattività all’immagine, attiva le visualizzazioni rapide.
  • La tua implementazione di Experience Manager non utilizza un framework di integrazione eCommerce per estrarre i dati di prodotto in Experience Manager da qualsiasi soluzione eCommerce. Tali soluzioni includono IBM WebSphere® Commerce, Elastic Path, hybris o Intershop.

Se l’implementazione di AEM utilizza eCommerce, puoi saltare questa attività e passare all’attività successiva.

Per iniziare, identifica le variabili dinamiche utilizzate dall'implementazione della visualizzazione rapida 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, assegna un SKU (Stock Keeping Unit). Lo SKU è un identificatore univoco per ogni prodotto o servizio distinto offerto. Inoltre, aggiungi eventuali variabili facoltative aggiuntive a ogni punto attivo. Tali variabili dei punti attivi vengono utilizzate più avanti per far corrispondere gli hotspot con il contenuto della visualizzazione rapida.

È 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 della Visualizzazione rapida esistente. È probabile che tali persone sappiano qual è il set minimo di dati necessari 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 visualizzazione rapida 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 backend per caricare i dati o il contenuto della visualizzazione rapida, se necessario.
  • I dati della visualizzazione rapida vengono tradotti nel contenuto in preparazione al rendering sulla pagina web.
  • Infine, il codice front-end esegue il rendering visivo di tali contenuti sullo schermo.

L'approccio consiste quindi nel visitare diverse aree del sito web esistente in cui è implementata la funzione di visualizzazione rapida. Quindi attiva la visualizzazione rapida e acquisisci 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 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 fare clic sulla scheda Rete.
    Su un Mac, premere Comando+Opzione+I per aprire il pannello Strumenti per sviluppatori, quindi fare clic sulla scheda Rete.

  • In Firefox, è possibile attivare il plug-in Firebug premendo F12 e utilizzando la relativa scheda Net. In alternativa, è possibile utilizzare lo strumento integrato Inspector e la relativa scheda Rete.
    Su un Mac, premere Comando+Opzione+I per aprire il pannello Strumenti di sviluppo, quindi fare clic sulla scheda Ispettore.

Quando il monitoraggio della rete è attivato nel browser, attivare la visualizzazione rapida nella pagina.

Ora trova l'URL Ajax della visualizzazione rapida nel registro di rete e copia l'URL registrato per analisi future. Solitamente, quando si attiva la visualizzazione rapida sono presenti numerose richieste inviate al server. In genere, l'URL Ajax della visualizzazione rapida è uno dei primi dell'elenco. Dispone di una porzione o di un percorso complesso della stringa di query 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 di prodotti e tipi. Il motivo è che gli URL di visualizzazione rapida possono avere parti comuni per una determinata categoria di siti web. Tuttavia, cambiano solo se visiti un’area diversa del sito web.

Nel caso più semplice, l’unica parte variabile nell’URL di visualizzazione rapida è 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 di visualizzazione rapida presenta diversi elementi diversi oltre all’SKU. Ad esempio, gli elementi variabili possono includere 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 della visualizzazione rapida 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 nell’URL è il valore del parametro della stringa query productId= ed è chiaramente un valore SKU. Pertanto, gli hotspot necessitano solo di campi SKU compilati con valori come 866558, 1196184, 1081492, 1898294.

SKU singolo, trovato nel percorso URL.

Gli URL registrati della visualizzazione rapida 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 degli hotspot: 6422350843, 1607745002, 0086724882.

SKU e ID categoria nella stringa query.

Gli URL registrati della visualizzazione rapida 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 viene memorizzato nel parametro prodId e la categoria ID nel parametro category=.

Di conseguenza, le definizioni dei punti attivi sono coppie. In altre parole, un valore SKU e una variabile aggiuntiva denominata categoryId. Le coppie risultanti sono le seguenti:

  • SKU è 305466 e categoryId è 1100004.

  • SKU è 310181 e categoryId è 1100004.

  • SKU è 308706 e categoryId è 1740148.

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 di visualizzazione rapida con etichetta "Ulteriori informazioni". Con lo strumento di debug del browser Web ancora attivato, fare clic su ogni pulsante e prendere nota degli URL di visualizzazione rapida registrati. Dopo aver attivato tutti e quattro i prodotti Visualizzazioni rapide disponibili sulla pagina, si dispone del seguente elenco di richieste di visualizzazione rapida effettuate al backend:

  • /datafeed/Men-Windbreaker.json
  • /datafeed/Men-SimpleHenley.json
  • /datafeed/Men-CamoPullover.json
  • /datafeed/Women-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:

  • Il primo tipo è Uomo o Donna. Puoi chiamare questa "categoria di prodotto".
  • Il secondo tipo è il nome del prodotto, come CamoPullover, che è probabilmente il prodotto SKU.

Dati questi dati, l'intero URL della visualizzazione rapida ha il seguente pattern:

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

In base a tale analisi, utilizzerai categoryId e SKU per gli hotspot.

Ora puoi caricare un banner immagine e aggiungervi hotspot utilizzando la funzione di immagine interattiva acquistabile in AEM Assets.

(Facoltativo) Creazione di un predefinito visualizzatore di immagini interattive

È possibile scegliere di utilizzare il predefinito visualizzatore di immagini interattive predefinito disponibile in AEM Assets, denominato Shoppable_Banner . 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 di AEM Assets. Questa funzionalità significa che è visibile nel componente File multimediali interattivi e ogni volta che visualizzi una risorsa. Tuttavia, per consegnare un banner interattivo con questo predefinito visualizzatore, pubblicare anche il tuo predefinito visualizzatore. Questa regola è valida per i predefiniti visualizzatore personalizzati o predefiniti.

Per creare un predefinito visualizzatore di immagini interattive

  1. Nella barra a sinistra, tocca Strumenti > Risorse > Predefiniti visualizzatore.

  2. Vicino all’angolo superiore destro della pagina, tocca Crea.

  3. Nella finestra di dialogo Nuovo predefinito visualizzatore , digita un nome per descrivere il predefinito visualizzatore banner interattivo.

    Questo titolo viene visualizzato nella pagina dell’elenco Predefiniti visualizzatore dopo il salvataggio.

  4. Nel menu a discesa Tipo di contenuti multimediali avanzati, seleziona Immagine interattiva.

  5. Tocca Crea.

  6. Nella pagina Modifica predefinito visualizzatore, tocca la scheda Aspetto .

  7. Effettua una delle operazioni seguenti:

    • Per caricare un’immagine del tuo punto attivo da utilizzare sulle immagini, tocca l’icona Selettore risorse . Nella pagina Seleziona contenuto , individua l’immagine del punto attivo che desideri utilizzare e selezionala. Toccare l’icona con il segno di spunta nell’angolo in alto a destra.
    • Per selezionare un’immagine hotspot predefinita, tocca l’icona Raccolta punti attivi . Nella palette galleria punti attivi, tocca l’immagine del punto attivo che desideri utilizzare.
  8. Vicino all’angolo superiore destro della pagina, tocca Salva.

    Assicurati di pubblicare il nuovo predefinito visualizzatore.

    Consulta Pubblicazione dei predefiniti visualizzatore.

    Ora puoi caricare un banner immagine.

Caricamento di 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

  1. Carica i banner immagine che desideri rendere interattivi.

    Consulta Caricamento delle risorse.

    Ora puoi aggiungere punti attivi al banner immagine; consulta l’attività successiva di seguito.

Aggiunta di hotspot a un banner immagine

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 Visualizzazione rapida, come un collegamento ipertestuale o un frammento esperienza.

Consulta Frammenti esperienza.

NOTA

Gli strumenti di condivisione social media in Immagine interattiva non sono supportati quando si incorpora il visualizzatore in un frammento esperienza. Al contrario, utilizza o crea predefiniti visualizzatore che non dispongono di strumenti per la condivisione dei 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.

Consulta (Facoltativo) Anteprima delle immagini interattive.

NOTA

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. Questa 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.
Tenere tuttavia presente che i caroselli banner supportano mappe immagine su immagini che possono contenere anche punti attivi; un'immagine interattiva non lo è. Tieni presente questo aspetto se vuoi creare un’immagine interattiva o un banner carosello che utilizza la stessa immagine. È invece possibile creare immagini interattive e banner carosello utilizzando copie separate della stessa immagine.
Vedere anche Banner carosello.

NOTA

Se modifichi immagini interattive con punti attivi e ritagli l’immagine, questi vengono rimossi.

Per aggiungere punti attivi a un banner immagine

  1. Nella vista Risorse, individua il banner immagine che desideri rendere interattivo.

  2. Effettua una delle operazioni seguenti:

    • Passa il puntatore sull'immagine, quindi tocca Seleziona (icona a forma di segno di spunta). Sulla barra degli strumenti, tocca Modifica.

    • Passa il puntatore sull'immagine, quindi tocca Altre azioni (icona a tre punti) > Modifica.

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

  3. Nell’angolo in alto a sinistra della pagina, tocca Aggiungi punto attivo (icona a forma di dito che tocca) per aprire la pagina Gestione punti attivi.

  4. Nell’angolo in alto a sinistra della pagina, tocca Punto attivo.

    1. Nell’angolo in alto a sinistra della pagina Gestione punti attivi, tocca Punto attivo.
    2. Sull’immagine, tocca la posizione in cui vuoi visualizzare il punto attivo. Se necessario, trascina il punto attivo per regolarne la posizione. In alternativa, utilizzare i tasti freccia della tastiera per controllare la posizione di un punto attivo selezionato.
    3. Aggiungi altri punti attivi, se necessario, ripetendo i passaggi a e b.
    4. (Facoltativo) Per eliminare un punto attivo, selezionalo sull'immagine, quindi tocca Elimina (icona cestino) sotto l'intestazione Punti attivi .
  5. Nel campo di testo Nome, digitare il nome del punto attivo. Questo nome viene visualizzato anche nell’elenco a discesa Punto attivo selezionato .

  6. Effettua una delle operazioni seguenti:

    • Tocca Visualizzazione rapida.

      • Se sei un cliente AEM Sites o eCommerce, tocca o fai clic sull’icona Selettore prodotto (lente di ingrandimento) per aprire la pagina Seleziona prodotto . Tocca il prodotto da utilizzare, quindi tocca Seleziona nell’angolo in alto a destra della pagina. Viene visualizzata nuovamente la pagina Gestione punti attivi.

      • Se sei non un cliente Experience Manager Sites o eCommerce

        • Consultare Identificazione di variabili di punti attivi; devi definire queste variabili.
        • Quindi, inserisci manualmente il valore SKU. Nel campo di testo Valore SKU, digita lo SKU del prodotto. Il valore SKU inserito popola automaticamente la parte variabile del modello di visualizzazione rapida. In questo modo il sistema è in grado di associare il punto attivo toccato a una particolare visualizzazione rapida SKU.
        • (Facoltativo) Se nella visualizzazione Rapida sono presenti altre variabili utilizzate per identificare ulteriormente un prodotto, tocca Aggiungi variabile generica. Nel campo di testo, specifica una variabile aggiuntiva. Ad esempio, category=Mens è una variabile aggiunta.
    • Toccare Collegamento ipertestuale.

      • Se sei un cliente di Experience Manager Sites, tocca l’icona Selettore sito (cartella). Passa a un URL. Il metodo di collegamento basato su URL non è possibile se il contenuto interattivo include collegamenti con URL relativi, in particolare con le pagine di Experience Manager Sites.
      • Se si è un cliente autonomo, nel campo di testo HREF specificare il percorso completo dell'URL di una pagina Web collegata.

    Assicurati di specificare se aprire il collegamento in una nuova scheda del browser (impostazione predefinita consigliata) o nella stessa scheda.

    Per ulteriori informazioni, consulta Utilizzo dei selettori .

    • Tocca Frammento esperienza.

      • Se sei un cliente AEM Sites, tocca o fai clic sull’icona Ricerca (lente di ingrandimento) per aprire la pagina Frammento esperienza . Tocca il frammento esperienza da utilizzare. Quindi tocca Seleziona nell’angolo in alto a destra della pagina. Viene visualizzata nuovamente la pagina Gestione punti attivi.
        Consulta Frammenti esperienza.

      • Specifica la larghezza e l’altezza del frammento esperienza come desideri che appaia sul banner.

        NOTA

        Gli strumenti di condivisione social media in Immagine interattiva non sono supportati quando si incorpora il visualizzatore in un frammento esperienza. Al contrario, utilizza o crea predefiniti visualizzatore che non dispongono di strumenti per la condivisione dei social media. Questi predefiniti per visualizzatori consentono di incorporarli correttamente nei Frammenti esperienza.

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

  8. Pubblica l’immagine interattiva. La pubblicazione distribuisce il banner attraverso il cloud e genera anche codice di incorporamento che consente l’integrazione con un sito web di terze parti.

    Consulta Pubblicazione di risorse.

    Dopo aver aggiunto gli hotspot e pubblicato l'immagine interattiva, ora puoi aggiungerla al tuo sito web esistente.

    Consulta Integrazione di un’immagine interattiva con il sito web.

    NOTA

    Se modifichi immagini interattive con punti attivi e ritagli l’immagine, i punti attivi vengono eliminati.

(Facoltativo) Anteprima delle immagini interattive

È possibile utilizzare Anteprima per visualizzare una rappresentazione dell’aspetto dell’immagine interattiva per i clienti. L’anteprima consente inoltre di testare gli hotspot dell’immagine per verificarne il funzionamento come previsto.

Una volta ottenuta l’immagine interattiva, puoi pubblicarla.
Consulta Incorporamento del visualizzatore di video o immagini in una pagina Web.
Consulta Collegamento di 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 AEM Sites.
Consulta Aggiunta di risorse Dynamic Media alle pagine.

Per visualizzare in anteprima le immagini interattive

  1. Nella vista Risorse, individua un’immagine interattiva esistente creata e tocca per aprirla in Anteprima.
  2. Nell’elenco a discesa Contenuto, nell’angolo in alto a sinistra della pagina Anteprima, tocca Visualizzatori.
  3. Nell’elenco Visualizzatori, tocca Shoppable_Banner o il nome del predefinito visualizzatore di immagini interattivo creato.
  4. Per testare le azioni associate dei punti attivi, tocca i punti attivi sull’immagine.

Pubblicazione delle risorse di immagini interattive

Per informazioni dettagliate su come pubblicare le risorse immagine interattive, consulta Pubblicazione delle risorse .

Integrazione di un’immagine interattiva con il sito web

Dopo aver caricato un'immagine del banner, aggiunto degli hotspot ad essa e pubblicato l'immagine interattiva, puoi aggiungerla alla pagina del tuo sito web.

Se sei un cliente di AEM Sites, puoi aggiungere l’immagine interattiva trascinando il componente File multimediali interattivi sulla pagina. Consulta Aggiunta di risorse Dynamic Media alle pagine.

Se sei un cliente AEM Assets autonomo, puoi aggiungere manualmente l’immagine interattiva al tuo sito web come descritto in questa sezione.

  1. Copia il codice di incorporamento dell’immagine interattiva pubblicata.
    Consulta Incorporamento del visualizzatore di video o immagini in una pagina Web.

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

Utilizzando il sito web di dimostrazione come esempio, noterai che l'immagine dei tre utenti è un tag statico IMG:

<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 tag IMG e sostituirlo con il codice di incorporamento copiato da AEM Assets. Come puoi vedere, il risultato mostra l'immagine interattiva acquistabile sulla pagina con tre punti attivi circolari.

NOTA

Come questo punto, gli hotspot sull'immagine interattiva acquistabile del sito web demo sono solo a scopo di visualizzazione. Non sono ancora integrati con le visualizzazioni rapide esistenti.

Per applicare un "ritaglio" a un’immagine interattiva acquistabile per un ambiente dinamico, includi l’attributo di configurazione dell’immagine interattiva ZoomView.iscommand nel percorso. In questo caso, viene chiamato il componente ZoomView e iscommand è il comando di servizio immagini "ritaglio" applicato.

Vedere l'attributo di configurazione ZoomView.iscommand .

Consultare crop Image serving command.

È ora possibile integrare l’immagine interattiva con una visualizzazione rapida esistente sul sito web.

Integrazione di un'immagine interattiva con una visualizzazione rapida esistente

NOTA

Questa attività si applica solo se sei un cliente AEM Assets autonomo.

L’ultimo passaggio di questo processo consiste nell’integrazione dell’immagine interattiva con un’implementazione della visualizzazione rapida esistente sul sito web. Non esiste una soluzione all’integrazione che funzioni per tutti i casi. Ogni implementazione della visualizzazione rapida è univoca ed è necessario un approccio specifico. In quanto tale, è utile coinvolgere l'assistenza di una persona IT front-end.

L'implementazione della visualizzazione rapida esistente rappresenta normalmente una catena di azioni intercorrelate che avvengono 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 di visualizzazione rapida basato sull’elemento dell’interfaccia utente attivato nel passaggio 1.
  3. Il codice front-end invia una richiesta Ajax utilizzando l’URL ottenuto al passaggio 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 di visualizzazione rapida 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 non rappresentano necessariamente chiamate API pubbliche indipendenti 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.

Quando l'immagine interattiva acquistabile sostituisce il passaggio 1 e in parte il passaggio 2, un utente tocca un punto attivo all'interno dell'immagine acquistabile. Tale 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 ad AEM Assets.

In un tale gestore di eventi, il codice front-end effettua le seguenti operazioni:

  • Ascolta un evento emesso dall'immagine interattiva acquistabile.
  • Crea un URL di visualizzazione rapida basato sui dati del punto attivo.
  • Attiva il processo di caricamento della visualizzazione rapida dal backend e di rendering sullo schermo per la visualizzazione.

Il codice di incorporamento restituito da Experience Manager Assets dispone di un gestore di 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.

Consulta Identificazione delle variabili dei punti attivi.

Utilizzando i precedenti esempi di URL di visualizzazione rapida, è possibile vedere negli esempi seguenti la struttura dell'URL di visualizzazione rapida in ogni caso:

SKU singolo, trovato nella stringa 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 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 l'assistenza di un esperto IT front-end della tua azienda. Essi hanno la conoscenza di sapere come attivare con precisione l'implementazione della visualizzazione rapida dal passaggio appropriato, avendo un URL di visualizzazione rapida pronto all'uso.

Potete vedere come questi passaggi vengono applicati al sito web demo per integrare completamente un'immagine interattiva acquistabile con il codice di visualizzazione rapida. In precedenza, la struttura dell’URL della visualizzazione rapida era identificata come segue:

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

Per ricostruire questo URL all'interno del gestore quickViewActivate, puoi utilizzare i campi categoryId e SKU . Questi campi sono disponibili nell'oggetto inData 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 Visualizzazione rapida utilizzando una semplice chiamata di funzione loadQuickView(). Questa funzione accetta un solo argomento, ovvero l'URL dei dati di visualizzazione rapida. Come tale, l'ultimo passaggio per integrare l'immagine interattiva acquistabile è quello di aggiungere la seguente riga di codice al gestore quickViewActivate:

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.

Utilizzo delle visualizzazioni rapide per creare pop-up personalizzati

Vedere Uso delle viste rapide per creare finestre pop-up personalizzate.

In questa pagina

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now