Imatges interactives

Podeu fer que les imatges estàtiques siguin riques i atractives per als clients arrossegant i deixant anar punts interactius “de vendes” en una imatge. Els hotspots de vendes combinen informació addicional sobre un producte o servei amb una capacitat directa i de punt de venda “Afegir a la portadora” o “Comprar”. Els clients poden prémer aquestes zones interactives que es vinculen directament a l’producte o servei, agregar-les a un carro de compres o estar vinculades a una pàgina web. Les experiències directes com aquestes augmenten la participació dels clients i les conversions al lloc web.

El següent és un banner de vendes amb una finestra emergent de vista ràpida. Un usuari activa la vista ràpida tocant el cercle o la “zona interactiva” de el model.

Consulteu imatges interactives en acció a la pàgina web que es mostra a sobre.

Vegi com es creen els banners d’imatge interactius

Miri un tutorial de 10 minuts i 33 segons sobre com es creen els rètols de imatge interactius. També aprendrà a previsualitzar, editar i distribuir banners d’imatge interactius.

Inici ràpid: Imatges interactives

La següent descripció pas a pas de l’flux de treball està dissenyada per ajudar a posar en marxa les imatges interactives amb rapidesa en AEM Assets.

Busqui la capçalera Example dins d’algunes de les tasques d’inici ràpid. Conté un breu tutorial basat en un exemple de pàgina web que encara no té imatges interactives agregades a ella.

El tutorial ajuda a il·lustrar els passos per integrar imatges interactives en el seu propi lloc web.

Passos d’imatges interactives:

1. (opcional) Identificació de variables de punts interactius. Si utilitzeu Recursos Adobe Experience Manager i Dynamic Mitjana independents, identifiqui les variables dinàmiques que utilitza en la implementació de vista ràpida existent. D’aquesta manera, es garanteix que pot introduir dades de punts interactius a l’crear la imatge interactiva. Consulteu (opcional) Identificació de variables de punts interactius.
   No obstant això, si utilitza AEM Llocs web, AEM eCommerce, o tots dos, aquest pas no és necessari.

2. (opcional ) Creació d’un ajust preestablert de visualitzador d’imatge interactiva. Personalitzeu la imatge gràfica que s’utilitza per representar zones interactives. No cal crear el seu propi ajust preestablert de visualitzador d’imatge interactiva si vol fer servir l’ajust preestablert de visualitzador d’imatge interactiva predeterminat, denominat Shoppable_Banner al seu lloc.
   Consulti (opcional) creació d’un ajust preestablert de visualitzador d’imatge interactiu.

3. Càrrega d’un banner d’imatge. Carregueu banners d’imatge que desitgi fer interactius.
   Consulteu Càrrega d’un banner d’imatge.

4. Addició de zones interactives a un titular d’imatge. Afegiu una o més zones interactives a un banner d’imatge. Associeu cadascun d’ells a una acció com un hipervincle, una vista ràpida o un fragment d’experiència. Després d’afegir zones interactives, acabarà aquesta tasca publicant la imatge interactiva.
   Consulteu Addició de punts d’a un titular d’imatge.
   Consulti Vista prèvia d’imatges interactives – opcional. Si ho desitja, pot veure una representació de la pancarta de vendes i provar la seva interactivitat.
   Consulti Publicació de recursos per obtenir més informació sobre com publicar recursos d’imatge interactius.

5. Afegir una imatge interactiva a la pàgina web o al lloc web en Experience Manager. Si utilitzeu Llocs, Comerç electrònic o tots dos, pot afegir imatges interactives directament a una pàgina web en Experience Manager. Arrossegueu el component Mitjans interactius a la pàgina. Consulteu Addició de recursos de Dynamic Mitjana a les pàgines.
   Si utilitzeu Experience Manager Assets i Dynamic Mitjana de forma independent, copieu el codi incrustat en el lloc web. A continuació, inclúyalo amb la vista ràpida existent. Consulteu Integració d’una imatge interactiva amb el seu lloc web.
   Si un WCM de tercers (Web Content Manager), integri el nou vídeo interactiu amb la vista ràpida existent que s’utilitza en el lloc web. Consulteu Integració d’una imatge interactiva amb una vista ràpida existent.

(opcional) Identificació de variables de punts interactius

Comenceu identificant les variables dinàmiques que fa servir la implementació de vista ràpida existent, de manera que pugui introduir dades de punts interactius per crear la imatge interactiva.

Quan afegiu zones interactives a una imatge de titular en Experience Manager Assets, assigni un SKU (unitat de manteniment d’estoc). El SKU és un identificador únic per a cada producte o servei diferent que ofereixi. I, afegiu qualsevol variable opcional addicional a cada zona interactiva. Aquestes variables de punts interactius s’utilitzen més endavant per fer coincidir punts interactius amb el contingut de la vista ràpida.

És important identificar correctament el nombre i el tipus de variables que s’associaran amb les dades de punts interactius. Cada zona interactiva agregada a una imatge de pancarta ha de contenir suficient informació per identificar el producte de forma inequívoca en el sistema back-end existent.

Hi ha diferents maneres d’identificar un conjunt de variables que s’utilitzaran per a les dades de punts interactius.

a vegades n’hi ha prou amb consultar als especialistes de TI responsables de la implementació de Quick View existent. És probable que aquestes persones sàpiguen quin és el conjunt mínim de dades necessari per identificar la vista ràpida en el sistema. No obstant això, també és possible simplement analitzar el comportament existent de el codi front-end.

La majoria de les implementacions de la vista ràpida utilitzen el següent paradigma:

• L’usuari activa un element d’interfície d’usuari en el lloc web. Per exemple, a l’fer clic al botó “Vista ràpida”.
• El lloc web envia una sol·licitud d’Ajax a servidor per carregar les dades o el contingut de la vista ràpida, si cal.
• Les dades de vista ràpida es tradueixen a l’contingut com a preparació per a la seva renderització a la pàgina web.
• Finalment, el codi front-end processa visualment aquest contingut a la pantalla.

el mètode llavors és visitar diferents àrees de la pàgina web existent on s’implementa la funció de vista ràpida. A continuació, activeu la vista ràpida i capturi l’URL de Ajax que envia la pàgina web per carregar les dades o el contingut de la vista ràpida.

Normalment no cal que utilitzi cap eina de depuració especialitzada. Els navegadors web moderns compten amb inspectors web que realitzen un treball adequat. A continuació s’indiquen alguns exemples d’exploradors web que inclouen inspectors web:

• Per veure totes les sol·licituds HTTP sortints a Google Chrome, premi F12 per obrir el panell Eines per a desenvolupadors i, a continuació, feu clic a la pestanya Xarxa.
  en un Mac, premi Comando + Opció + i per obrir el panell Eines per a desenvolupadors i, a continuació, feu clic a la fitxa Xarxa.

• A Firefox, pot activar el complement Firebug prement F12 i utilitzant el seu pestanya Xarxa. podeu també utilitzar l’eina Inspector integrada i la seva pestanya Xarxa.
  En un Mac, premi Comando + Opció + i per obrir el panell Eines per a desenvolupadors i, a continuació, feu clic a la fitxa Inspector.

Quan la supervisió de xarxa està activada al navegador, activa la vista ràpida a la pàgina .

Ara, busqui la URL d’Ajax de vista ràpida en el registre de xarxa i copieu la URL gravada per a la seva anàlisi futur. En general, quan s’activa la vista ràpida, hi ha moltes sol·licituds que s’envien a servidor. Normalment, l’URL d’Ajax de vista ràpida és una de les primeres de la llista. Té una ruta o part d’una cadena de consulta complexa i el seu tipus MIME de resposta és text/html, text/xml o text/javascript.

Durant aquest procés, és important visitar diferents àrees de la pàgina web, amb diferents tipus i categories de productes. El motiu és que les adreces URL de vista ràpida poden tenir parts comunes per a una categoria de lloc web determinada. No obstant, només canvien si es visita una àrea diferent de la pàgina web.

En el cas més simple, l’única part variable de la URL de vista ràpida és el SKU del producte. En aquest cas, el valor SKU és l’única peça de dades que necessita per afegir zones interactives a la imatge de la pancarta.

No obstant això, en casos complexos, l’URL de vista ràpida té diferents elements a més de l’SKU . Per exemple, els diferents elements poden incloure la identificació de categoria, el codi de color i el codi de mida.En aquests casos, cada element és una variable independent en la definició de dades de punts interactius de la funció d’imatge interactiva de vendes de Experience Manager Assets.

Vegem els següents exemples d’adreces URL de vista ràpida i les variables de punts interactius resultants:

SKU únic, que es troba en la cadena de consulta.	Les adreces URL de vista ràpida registrades inclouen el següent: 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’única part de variable en l’adreça URL és el valor de l’paràmetre de cadena de consulta ProductID = i és clarament un valor SKU. Per tant, les zones interactives només necessiten camps SKU omplerts amb valors com 866558, 1196184, 1081492, 1898294.
SKU únic, que es troba en plena ruta d’URL.	Les adreces URL de vista ràpida registrades inclouen el següent: https://server/product/6422350843 https://server/product/1607745002 https://server/product/0086724882 la part variable es troba en l’última part de la ruta i es converteix en el valor SKU de les zones interactives: 6422350843, 1607745002, 0086724882.
SKU i ID de categoria en la cadena de consulta.	Les adreces URL de vista ràpida registrades inclouen el següent: https://server/quickView/product/?category=1100004&prodId=305466 https://server/quickView/product/?category=1100004&prodId=310181 https://server/quickView/product/?category=1740148&prodId=308706 En aquest cas, hi ha dues parts diferents en la direcció URL. El SKU s’emmagatzema en el paràmetre prodId i la identificació de categoria s’emmagatzema en el paràmetre category=. Com a tal, les definicions de punts interactius són parells. És a dir, un valor d’SKU i una variable addicional anomenada categoryId. Els parells resultants són els següents: L’SKU és 305466 i categoryId és 1100004. L’SKU és 310181 i categoryId és 1100004. L’SKU és 308706 i categoryId és 1740148.

Exemple

Podeu aplicar el mateix enfocament utilitzat en els tres exemples anteriors a la pàgina web de demostració.

La pàgina web de demostració té diverses miniatures de producte, cadascuna amb un botó de vista ràpida etiquetat com “Veure més”. Amb l’eina de depuració de l’explorador web encara activada, feu clic a cada botó i anoti les adreces URL de vista ràpida registrades. Després d’activar les quatre vistes ràpides del producte disponibles a la pàgina, té la següent llista de sol·licituds de vista ràpida realitzades al servidor:

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

a l’examinar les trucades a servidor, pot veure que la informació específica del producte sol està present a la ruta de sol·licitud. També s’observa que la cadena de consulta no s’utilitza en absolut i que hi ha dos tipus diferents de fragments de dades involucrats:

• El primer tipus és Homes o Dones. Pot trucar a aquesta “categoria de producte”.
• El segon tipus és el nom del producte, com CamoPullover, que probablement és el SKU del producte.

Donada aquesta informació, tota la URL de vista ràpida té el següent patró:

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

En funció d’aquesta anàlisi, utilitzaria categoryId i SKU per a les zones interactives.

Ja està a punt per carregar un titular d’imatge i afegir zones interactives mitjançant la funció de imatge interactiva de vendes a AEM Assets.

(opcional) Creació d’un ajust preestablert de visualitzador d’imatge interactiu

Podeu triar utilitzar la configuració preestablert per defecte i llest per utilitzar de l’visualitzador d’imatge interactiva anomenat Shoppable_Banner que s’inclou amb AEM Assets. O pot crear el seu propi ajust preestablert de visualitzador personalitzat per utilitzar-lo amb imatges interactives.

A l’crear un ajust preestablert personalitzat de l’visualitzador d’imatge interactiva, pot determinar l’aspecte de les zones interactives al banner d’imatge.Com a part de la creació d’l’ajust preestablert de visualitzador, pot triar utilitzar un gràfic de zona interactiva d’una galeria d’imatges predefinides.

Després de guardar l’ajust preestablert de visualitzador, s’activa automàticament (s’activa) en la pàgina de llista Ajustaments preestablerts de visualitzador en AEM Assets. Aquesta funcionalitat significa que està visible en el component de Mitjans interactius i sempre que es vegi un recurs. No obstant això, per a lliurar un banner interactiu amb aquest ajust preestablert de visualitzador, publiqui també l’ajust preestablert de visualitzador. Aquesta regla és veritable per la configuració preestablerts de visor personalitzats o predeterminats.

Per a crear un ajust preestablert de visualitzador d’imatge interactiu

1. Al carril esquerre, premi eines > Assets > Configuració preestablerts de visor.

2. A prop de la cantonada superior dreta de la pàgina, feu clic Crea.

3. En el quadre de diàleg Nou ajust preestablert de visualitzador, escriviu un nom per descriure l’ajust preestablert de visualitzador de banners interactiu.

   Aquest títol apareix a la pàgina de llista Ajustaments preestablerts de visor després de guardar-lo.

4. al menú desplegable Tipus de medi enriquit, seleccioneu Imatge interactiva.

5. Toc Crea.

6. A la pàgina Edita ajust preestablert de visualitzador, premeu la pestanya Aspecte.

7. Feu una de les accions següents:

   • Per carregar la seva pròpia imatge de zona interactiva que voleu utilitzar en imatges, premeu la icona Selector de recursos. A la pàgina Seleccionar contingut, aneu a la imatge de zona interactiva que voleu utilitzar i seleccioneu-la. Premi la icona de la marca de verificació a la cantonada superior dreta.
   • Per a seleccionar una imatge de zona interactiva omissió, premeu la icona Galeria de punts interactius. A la paleta Galeria de punts interactius, premeu la imatge de zona interactiva que voleu utilitzar.

8. A prop de l’extrem superior dret de la pàgina, premeu Desa.

   Assegureu-vos de publicar el nou ajust preestablert de visor.

   Vegeu Paràmetres preestablerts de l’visualitzador de publicacions.

   Ja està a punt per carregar un titular d’imatge.

Càrrega d’un titular d’imatge

Si ja ha carregat les imatges que voleu utilitzar, avanç a el següent pas, Afegir zones interactives a un titular d’imatge.

Per carregar un titular d’imatge

1. Carregueu banners d’imatge que desitgi fer interactius.

   Vegeu Càrrega de recursos.

   Ja està llest per afegir zones interactives a titular de la imatge; consulteu la següent tasca a continuació.

Addició de zones interactives a un titular d’imatge

Podeu afegir zones interactives a un banner d’imatge mitjançant l’editor de la pàgina Administració de punts interactius.

A l’afegir zones interactives, pot definir-les com una visualització emergent de vista ràpida, com un hipervincle o un fragment d’experiència.

Consulteu Fragments d’experiències .

Les opcions Desfer i Refer, prop de la part superior dreta de la pàgina, són compatibles durant la sessió de creació / edició actual.

Quan acabi de crear la imatge interactiva, pot utilitzar Vista prèvia per veure una representació de com la imatge interactiva apareix per als clients.

Consulteu (opcional) Vista prèvia d’imatges interactives.

Per afegir zones interactives a un titular d’imatge

1. a la vista Recursos, aneu al banner d’imatge que voleu convertir en interactiu.

2. Feu una de les accions següents :

   • Passi el ratolí sobre la imatge i, a continuació, feu clic Seleccionar (icona de marca de verificació). A la barra d’eines, feu clic a Edita.

   • Passi el ratolí sobre la imatge i, a continuació, feu clic Més accions (icona de tres punts) Edita.

   • Per obrir-lo a la pàgina Vista de detalls, premeu la imatge. A la barra d’eines, feu clic a Edita.

3. A prop de la cantonada superior esquerra de la pàgina, feu clic Afegiu zona interactiva (icona amb el dit ) per obrir la pàgina d’administració de punts interactius.

4. A prop de la cantonada superior esquerra de la pàgina, feu clic Zona interactiva.

   1. A prop de la cantonada superior esquerra de la pàgina Administració de punts interactius, premi Zona interactiva.
   2. a la imatge, premeu una ubicació on voleu que aparegui el punt interactiu. Si cal, arrossegueu la zona interactiva per ajustar la seva ubicació. O bé, utilitzeu les tecles de fletxa del teclat per controlar la posició d’un punt interactiu seleccionat.
   3. Afegiu més zones interactives segons sigui necessari repetint els passos a i b.
   4. (opcional) per eliminar una zona interactiva, la a la imatge i, a continuació, feu clic a Elimina (icona de paperera) a la capçalera Zones interactives.

5. en el camp de text nom, escriviu el nom de la zona interactiva. Aquest nom també apareix a la llista desplegable Zona interactiva seleccionada.

6. Feu una de les accions següents:

   • Feu clic Vista ràpida.

     • Si és client de AEM Sites o eCommerce, toqui o feu clic a la icona Selector de productes (lupa) per obrir la pàgina Seleccionar producte. Premi el producte que voleu utilitzar i, a continuació, feu clic Marcar a la part superior dreta de la pàgina. Tornarà a la pàgina d’administració de punts interactius.

     • Quan no client de Experience Manager Sites o eCommerce

       • Consulteu Identificació de variables de punts interactius; ha de definir aquestes variables.
       • A continuació, introdueixi manualment el valor de SKU. En el camp de text Valor SKU, escriviu el SKU del producte. El valor SKU introduït omple automàticament la part variable de la plantilla de vista ràpida. Garanteix que el sistema sàpiga associar la zona interactiva utilitzada amb la vista ràpida d’un SKU concret.
       • (opcional) Si hi ha altres variables dins de la vista ràpida que s’utilitzen per identificar un producte, premi Afegir variable genèrica . En el camp de text, especifiqui una variable addicional. Per exemple, category=Mens és una variable agregada.

   • Toc d’enllaç.

     • Si és client de Experience Manager Sites, premi la icona Selector de lloc (carpeta). Aneu a una adreça URL. El mètode de vinculació basat en URL no és possible si el contingut interactiu té vincles amb adreces URL relatives, especialment vincles a pàgines de llocs de Experience Manager.
     • Si és client independent, al camp de text HREF especifiqui la ruta d’URL a una pàgina web vinculada.

   Assegureu-vos d’especificar si voleu obrir l’enllaç en una nova pestanya de l’explorador (opció per defecte recomanada) o en la mateixa pestanya.

   Consulteu Ús de selectors per obtenir més informació.

   • Premi Fragment d’experiències.

     • Si és client de AEM Sites, toqui o feu clic a la icona de cerca (lupa) per obrir la pàgina Fragment d’experiències. Toqueu el fragment d’experiència que voleu utilitzar. A continuació, premi Marcar a la part superior dreta de la pàgina. Tornarà a la pàgina d’administració de punts interactius.
       Consulti Fragments d’experiències.

     • Especifiqueu l’amplada i l’alçada de l’fragment d’experiència tal com voleu que aparegui al banner .

       NOTA

       Les eines d’ús compartit de mitjans socials en Imatge interactiva no són compatibles quan s’incrusta el visor en un fragment d’experiència. En el seu lloc, utilitzeu o creu ajustos preestablerts de visualitzador que no tinguin eines d’ús compartit de mitjans socials.Aquests ajustos preestablerts de visor permeten incrustar-se correctament en fragments d’experiències.

7. Toc Desa per desar la feina i tornar a la pàgina Navega.

8. Publiqui la imatge interactiva. La publicació lliura el banner a través del núvol i també genera codi incrustat que li permet integrar-se amb un lloc web de tercers.

   Consulteu Publicació de recursos.

   Després d’afegir zones interactives i publicar la imatge interactiva, ja està a punt per afegir-la a la pàgina web existent.

   Consulteu Integració d’una imatge interactiva amb el seu lloc web.

   NOTA

   Si edita imatges interactives amb zones interactives i retalla la imatge, s’eliminaran les zones interactives.

(opcional) Vista prèvia d’imatges interactives

Podeu utilitzar Vista prèvia per veure una representació de l’aspecte que tindrà la imatge interactiva per als clients. La vista prèvia també permet provar les zones interactives de la imatge per assegurar-se que es comporten de la manera esperada.

Quan estigui satisfet amb la imatge interactiva, pot publicar-la.
Consulti Incrustació de l’visualitzador d’imatges o vídeos en una pàgina web.
Consulti Vinculació d’URL a l’aplicació web. El mètode de vinculació basat en URL no és possible si el contingut interactiu té vincles amb adreces URL relatives, especialment vincles a pàgines d’AEM Sites.
Consulteu Addició de recursos de Dynamic Mitjana a les pàgines.

per previsualitzar imatges interactives

1. a la vista Recursos, desplaceu-vos a la imatge interactiva existent que hagi creat i premi per a obrir-la en vista prèvia.
2. a prop de la cantonada superior esquerra de la pàgina Vista prèvia, a la llista desplegable de continguts, feu clic Visualitzadors.
3. a la llista Visualitzadors, premi Shoppable_Banner o el nom de l’ajust preestablert de l’visualitzador d’imatges interactiu que ha creat.
4. per provar les accions associades de les zones interactives, utilitzeu les zones interactives de la imatge.

Publicació de recursos d’imatge interactius

Consulteu Publicació de recursos per obtenir més informació sobre com publicar recursos d’imatge interacti vós.

Integració d’una imatge interactiva amb el seu lloc web

Després de carregar una imatge de pancarta, afegir zones interactives a ella i publicar la imatge interactiva, està a punt per afegir-la a la pàgina del lloc web.

Si és client de AEM Llocs web, pot afegir la imatge interactiva arrossegant el component de Mitjans interactius a la seva pàgina. Consulteu Addició de recursos de Dynamic Mitjana a les pàgines.

Si és client independent de AEM Assets, pot afegir manualment la imatge interactiva al seu lloc web com es descriu en aquesta secció.

1. Copieu el codi incrustat de la imatge interactiva publicada.
   Consulti Incrustació de l’visualitzador d’imatges o vídeos en una pàgina web.

2. Afegiu el codi incrustat copiat en la ubicació desitjada dins de la pàgina web. a el codi incrustat copiat està configurat per a un entorn interactiu, de manera que s’ajusta automàticament a l’àrea assignada.

exemple

Amb el lloc web de la demostració com a exemple, observi que la imatge de les tres persones és una etiqueta estàtica IMG:

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

la integració és tan senzilla com eliminar l’etiqueta IMG i substituir-la pel codi incrustat copiat d’AEM Assets. Podeu veure que el resultat mostra la imatge interactiva de vendes a la pàgina amb tres punts interactius de cercle.

Per aplicar una “retallada” a una imatge interactiva de vendes per a un entorn interactiu, inclogui l’atribut de configuració d’imatge interactiva ZoomView.iscommand a la ruta. En aquest cas, es diu a el component ZoomView i iscommand és la comanda de servidor d’imatges “retallar” que s’aplica.

Consulteu l’atribut de configuració ZoomView.iscommand.

Consulteu la comanda retallar servidor d’imatges.

Ja està llest per integrar la imatge interactiva amb una vista ràpida existent en el seu lloc web.

Integració d’una imatge interactiva amb una vista ràpida existent

l’últim pas d’aquest procés és integrar la imatge interactiva amb una implementació de vista ràpida existent en el lloc web.No hi ha una solució per a la integració que funcioni en tots els casos. Cada implementació de vista ràpida és única i es necessita un enfocament específic. Com a tal, la participació d’una persona de TI de front-end és útil.

La implementació de vista ràpida existent representa normalment una cadena d’accions interrelacionades que es produeixen a la pàgina web en el següent ordre:

1. Un usuari activa un element a la interfície d’usuari de la pàgina web.
2. el codi front-end obté un URL de vista ràpida basada en l’element de la interfície d’usuari que es va activar en el pas 1.
3. el codi front-end envia una sol·licitud d’Ajax utilitzant la URL obtinguda en el pas 2.
4. la lògica back-end retorna les dades o el contingut de vista ràpida corresponents a el codi front-end.
5. el codi front-end carrega les dades o el contingut de la vista ràpida.
6. de manera opcional, el codi front- end converteix les dades de Quick View carregats en una representació HTML.
7. el codi front-end mostra un quadre de diàleg modal o panell i representa el contingut HTML a la pantalla per al usuari final.

Aquestes trucades no representen necessàriament trucades d’API públiques independents a les que la lògica de pàgina web truca des d’un pas arbitrari. En el seu lloc, es tracta d’una crida encadenada en la qual cada pas següent s’oculta en l’última fase (anomenada de retorn) de el pas anterior.

Quan la imatge interactiva de la taula de vendes substitueix el pas 1 i, en part, a el pas 2, un usuari toca una zona interactiva dins de la imatge de la taula de compres. El visor gestiona aquesta interacció d’usuari. El visor retorna un esdeveniment a la pàgina web que conté totes les dades de punts interactius afegits anteriorment a AEM Assets.

En un controlador d’esdeveniments d’aquest tipus, el codi front-end fa el següent:

• Escolta un esdeveniment emès per la imatge interactiva de vendes.
• Crea un URL de vista ràpida basada en les dades de zona interactiva.
• Activa el procés de carregar la vista ràpida des del servidor i processar a la pantalla per a la seva visualització.

el codi incrustat retornat per Experience Manager Assets té un controlador d’esdeveniments llest per utilitzar que es comenta, com es veu en el següent fragment de codi ressaltat:

 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();

Per tant, només cal descomentar el codi i reemplaçar el cos de l’controlador fictici amb el codi específic de la pàgina web en particular.

el procés de construcció de la URL de vista ràpida és oposat a el procés utilitzat per identificar la s variables de punts interactius que es van abastar anteriorment.

Consulteu Identificació de variables de punts interactius.

En els exemples anteriors d’URL de vista ràpida es pot veure en els exemples següents com es construeix l’URL de vista ràpida en cada cas:

SKU únic, que es troba en la cadena de consulta	s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/json?productId=" + inData.sku + "&source=100"; }, });
SKU únic , que es troba en plena ruta d’URL	s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/product/" + inData.sku; }, });
SKU i ID de categoria en la cadena de consulta	s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/quickView/product/?category=" + inData.categoryId + "&prodId=" + inData.sku; }, });

l’últim pas per activar la URL de vista ràpida i activar el panell de vista ràpida requereix l’assistència d’una persona de TI de front-end de la seva empresa. Tenen coneixements per saber millor com activar amb precisió la implementació de la vista ràpida des del pas adequat, tenint una URL de vista ràpida a punt per utilitzar.

Podeu veure com s’apliquen aquests passos a la pàgina web de demostració per integrar completament una imatge interactiva de vendes amb el codi de vista ràpida. Anteriorment, l’estructura de la URL de vista ràpida s’identificava com la següent:

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

Per reconstruir aquesta adreça URL dins el controlador quickViewActivate, pot utilitzar els camps categoryId i SKU. Aquests camps estan disponibles en l’objecte inData que el codi de la pantalla passa a el controlador:

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

El lloc web de demostració activa el quadre de diàleg Vista ràpida utilitzant una simple trucada de funció loadQuickView(). Aquesta funció pren només un argument, que és la URL de dades de vista ràpida. Com a tal, l’últim pas per integrar la imatge interactiva de vendes és afegir la següent línia de codi a el controlador quickViewActivate:

loadQuickView(quickViewUrl);

el següent és el codi font complet:

 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();

el lloc web de la demostració final amb la imatge interactiva completament integrada.

Ús de vistes ràpides per crear finestres emergents personalitzades

Consulteu Ús de les vistes ràpides per crear finestres emergents personalitzades.