Imaxes interactivas

Pode facer que as imaxes estáticas sexan ricas e atractivas para os clientes arrastrando e liberando puntos interactivos “de vendas” nunha imaxe. Os puntos de venda de vendas combinan información adicional sobre un produto ou servizo con unha venda directa e de venda “Engadir ao carro” ou “Comprar”. Os clientes poden presionar estas áreas interactivas que están directamente ligadas ao produto ou servizo, engádeas a un cesta da compra ou estarán ligados a unha páxina web. Experiencias directas como aumentar a participación de clientes e conversións no sitio web.

A seguinte é unha bandeira de vendas cunha ventá emerxente de visualización rápida. Un usuario permite a vista rápida tocando o círculo ou a “área interactiva” do modelo.

Ver Imaxes interactivas en acción no sitio web que se mostra arriba.

Vexa como se crean as pancartas de imaxe interactiva

Mire a un tutorial de 10 minutos e 33 segundos sobre como se crean os signos interactivos image. Tamén aprenderá a previsualizar, editar e distribuír pancartas interactivas de imaxe.

Inicio rápido: imaxes interactivas

A seguinte descrición paso a paso do fluxo de traballo está deseñado para axudarche a comezar Imaxes interactivas rapidamente nos activos AEM.

Atopar o encabezado de exemplo dentro de algunhas das tarefas de inicio rápido. Contén un breve tutorial baseado nun exemplo dunha páxina web que non ten imaxes interactivas engadidas a el.

O tutorial axuda a ilustrar os pasos para integrar imaxes interactivas no seu propio sitio web.

Pasos de imaxe interactiva:

1. (opcional) Identificación de variables de punto interactivo. Se usa Adobe Experience Manager e Dynamic Media Resources Independent, identifica as variables dinámicas que usa na implementación de visualización rápida existente. Deste xeito, está garantido que pode ingresar datos de puntos interactivos ao crear a imaxe interactiva. Vexa (opcional) Identificación de variables de punto interactivo. Con todo, se usa sitios AEM, AEM eCommerce ou ambos, este paso non é necesario.

2. (opcional) Creación dunha configuración de visor de imaxe interactiva preestablecida. Personaliza a imaxe gráfica que se usa para representar áreas interactivas. Non é necesario crear o seu propio visor de imaxe interactivo pre-establecido se desexa usar a configuración do visor de imaxe interactiva predefinida, nomeado Shoppable_Banner no seu lugar.
   Ver (opcional) Creación A Configuración previa visualizador de imaxes interactivos.

3. Cargando unha bandeira de imaxe. Cargar a imaxe Banners que desexa facer interactivo.
   Ver cargando unha bandeira de imaxe.

4. Engadir zonas interactivas a un titular de imaxes. Engade unha ou máis áreas interactivas a unha bandeira de imaxe. Asocia cada unha delas a unha acción como hipervínculo, unha vista rápida ou un fragmento de experiencia. Despois de engadir zonas interactivas, esta tarefa acabará publicando a imaxe interactiva.
   Ver engadindo zonas interactivas a un titular de imaxes.
   Ver a vista previa das imaxes interactivas – opcional. Se o desexa, pode ver unha representación da bandeira de vendas e probar a súa interactividade.
   Ver a publicación de recursos para obter máis información sobre como publicar recursos interactivos de imaxe.

5. Engade unha imaxe interactiva ao sitio web ou no sitio web no xestor de experiencia. Se usa sitios, e-commerce ou ambos, pode engadir imaxes interactivas directamente a unha páxina web no xestor de experiencia. Arrastre o compoñente multimedia interactivo á páxina. Consulte Engadir recursos de medios dinámicos a páxinas.
   Se usa activos de experiencias e medios dinámicos de forma independente, copie o código cifrado no sitio web. A continuación, inclúeo coa vista rápida existente. Vexa unha imaxe interactiva integrada co seu sitio web.
   Se usa un WCM de terceiros (Xestor de contidos web), integre o novo vídeo interactivo coa vista rápida existente que se usa no sitio web. Vexa unha imaxe interactiva integrada cunha vista rápida existente.

(opcional) Identificación de variables de punto interactivo

Comezar identificando as variables dinámicas que utilizan a implementación de visualización rápida existente, para que poida introducir datos de punto interactivo para crear a imaxe interactiva.

Cando engada áreas interactivas A unha imaxe do titular dos activos do xestor de experiencia, asigna un SKU (unidade de mantemento de accións). O SKU é un identificador único para cada produto ou servizo diferente que ofrece. E, engade calquera variable opcional adicional a cada área interactiva. Estas variables de puntos interactivos úsanse máis tarde para combinar puntos interactivos co contido da vista rápida.

É importante identificar correctamente o número e tipo de variables que estarán asociadas cos datos de puntos interactivos. Cada zona interactiva engadida a unha imaxe de banner debe conter información suficiente para identificar o produto de xeito inequívocamente no sistema de back-end existente.

Existen diferentes xeitos de identificar un conxunto de variables que se utilizarán para datos de interactivo Puntos.

Ás veces é suficiente para consultar os especialistas en TI responsable da implementación de visualización rápida existente. É probable que estas persoas saiban cales son os datos mínimos necesarios para identificar a vista rápida do sistema. Non obstante, tamén é posible simplemente analizar o comportamento existente do código de front-end.

A maioría das implementacións da vista rápida Use o seguinte paradigma:

• o usuario activar Un elemento de interface de usuario no sitio web. Por exemplo, premendo no botón “Vista rápida”.
• O sitio web envía unha aplicación AJAX ao servidor para cargar os datos ou o contido da vista rápida, se é necesario.
• Os datos de visualización rápida tradúcese ao contido como preparación para renderizar na páxina web.
• Finalmente, o código de front-end procesa visualmente o contido da pantalla.

o O método visita diferentes áreas do sitio web existente onde se implementa a función de visualización rápida. A continuación, active a vista rápida e captura a URL de AJAX que envía a páxina web para cargar os datos ou o contido da vista rápida.

Normalmente non é necesario usar ningunha ferramenta de depuración especializada. Os navegadores web modernos teñen inspectores web que realizan un traballo adecuado. Abaixo amósanse algúns exemplos de navegadores web que inclúen inspectores web:

• para ver todas as solicitudes HTTP saíntes en Google Chrome, prema F12 para abrir o panel de ferramentas de desenvolvedores e, unha continua, faga clic en a pestana de rede.
  nunha Mac, prema comando + opción + I para abrir o panel de ferramentas de desenvolvedor e, a continuación, prema na pestana de rede.

• en Firefox, vostede pode activar a firebug e usar a pestana de rede. Ou pode usar a ferramenta Inspector integrada e a súa páxina de rede.
  nunha Mac, prema Command + Opción + I O panel de ferramentas de desenvolvedores e, a continuación, faga clic no inspector Tab.

Cando a monitorización de rede está activada no navegador, comprobe a vista rápida na páxina.

Agora, busque a URL AJAX de Vista rápida No rexistro de rede e copiar a URL gravada para a análise futura. Normalmente, cando a visualización rápida está activada, hai moitas solicitudes que se envían ao servidor. Normalmente, o URL AJAX de Vista rápida é un dos primeiros da lista. Ten unha ruta ou parte dunha cadea de consulta complexa e o tipo de resposta MIME é text/html, text/xml ou text/javascript.

Durante este proceso, é importante visitar diferentes áreas do sitio web, con diferentes tipos e categorías de produtos. A razón é que os URL de vista de visualización poden ter partes comúns para unha categoría de sitio web dada. Non obstante, só cambian se visita unha área diferente do sitio web.

No caso máis sinxelo, a única parte variable da URL de visualización rápida é o SKU do produto. Neste caso, o valor SKU é a única peza de datos que precisa para engadir zonas interactivas á imaxe do banner.

Con todo, en casos complexos, a URL de visualización rápida ten diferentes elementos ademais do SKU. Por exemplo, os diferentes elementos poden incluír a ID de categoría, o código de cor eo código de tamaño.Nestes casos, cada elemento é unha variable independente na definición de datos de punto interactivo do xestor de experiencias Función de imaxe de vendas.

Vexamos os seguintes exemplos de URL de visualización rápida e as variables de puntos interactivos resultantes:

SKU único, que está na cadea de consulta.	URLs de visualización rápida rexistrados inclúen o seguinte: 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 A única parte da variable na URL é o valor do Cadea de consulta produto de parámetro = e é claramente un valor de SKU. Polo tanto, as áreas interactivas só precisan campos de SKU chea de valores como 866558, 1196184, 1081492, 1898294
SKU Single, que está na ruta URL.	URLs de visualización rápida rexistrados inclúen o seguinte: https://server/product/6422350843 https://server/product/1607745002 https://server/product/0086724882 A parte variable atópase na última parte da ruta e convértese no valor SKU das zonas interactivas: 6422350843, 1607745002, IV ID = “C3193AC99D”
SKU e ID de categoría no . query cadea	Registered rápidos Ver URLs inclúen o seguinte: https://server/quickView/product/?category=1100004&prodId=305466 https://server/quickView/product/?category=1100004&prodId=310181 https://server/quickView/product/?category=1740148&prodId=308706 Neste caso, hai dúas partes diferentes na URL. O Sku almacénase no parámetro prodId eo ID da categoría almacénase no parámetro category=. Como tal, as definicións de puntos interactivos son parellas. É dicir, un valor SKU e unha variable adicional chamada categoryId. Os pares resultantes son os seguintes: a sku é 305466 e categoryId é 1100004. O SKU é 310181 e categoryId é 1100004 a sku é 308706 e categoryId é 1740148

Exemplo

Pode aplicar o mesmo enfoque usado nos tres exemplos antes da páxina web de demostración.

A páxina web de demostración ten varias miniaturas de produtos, cada unha cun botón de visualización rápida etiquetado como “Ver máis”. Coa ferramenta de depuración de Web Explorer aínda está activada, faga clic en cada botón e anota os URLs de vista rápidos rexistrados. Despois de activar as catro vistas de produtos rápidos dispoñibles na páxina, ten a seguinte lista de solicitudes de visualización rápida realizadas no servidor:

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

Cando se examine as chamadas ao servidor, pode ver que a información específica do produto só está presente na ruta da aplicación. Tamén observa que a cadea de consulta non se usa en absoluto e que hai dous tipos diferentes de fragmentos de datos implicados:

• O primeiro tipo é homes ou mulleres. Pode chamar a esta “categoría de produto”.
• O segundo tipo é o nome do produto, como Campulover, que probablemente sexa o sku do produto.

Dada esta información, toda a URL de visualización rápida ten o seguinte estándar: “CCB96DD1E5”>

Dependendo desta análise, usaría categoryId e SKU para zonas interactivas.

xa está listo para cargar un titular de imaxes e engadir zonas interactivas a través da función de imaxe vendas interactiva en activos AEM.

(Opcional) Creando unha imaxe interactiva pre-indicado espectador

pode optar por usar o estándar predeterminado e listo para usar a imaxe espectador interactivo chamado Shoppable_Banner que está incluído con activos AEM. Ou pode crear o seu propio preestuario de visualización personalizado para usalo con imaxes interactivas.

Cando se cree unha configuración predefinida personalizada da pantalla de imaxe interactiva, pode determinar a aparición das zonas interactivas na bandeira de imaxe ..Como parte da creación da configuración de visualización preestablecida, pode optar por usar un gráfico de zona interactiva dunha galería de imaxe predefinida.

Despois de gardar a configuración do visor predefinida, activéase automaticamente (activado) en A páxina de lista de visualización preestablecida previa en AEM activos. Esta funcionalidade significa que é visible no compoñente multimedia interactivo e sempre que se ve un recurso. Non obstante, para entregar unha bandeira interactiva con este axuste de visor predeterminado, tamén publica a configuración do espectador preestablecida. Esta regra é certa para a configuración predefinida de predefinidos personalizados ou predeterminados.

Para crear unha configuración de visor de imaxe interactiva

1. Na canle esquerda, prema Ferramentas > activos > Configuración predefinida visor.

2. Preto da esquina superior dereita da páxina, faga clic en Crear .

3. No novo cadro de diálogo de configuración predeterminado de visualizador, escriba un nome para describir a configuración de visualización interactiva previamente establecida.

   Este título aparece no VisionFinder Preset Settings Lista de páxina despois de gardala.

4. No menú desplegable de tipo multimedia enriquecido, seleccione Imaxe interactiva.

5. Touch Create.

6. Na páxina de configuración de edición de visualizador predefinido, prema a pestana Aspect.

7. Fai unha das seguintes :

   • Para cargar a súa propia imaxe interactiva que quere usar en imaxes, prema a icona do selector de recursos. Na páxina de contido SELECT, vaia á imaxe da zona interactiva que desexa usar e seleccione. Prema a icona de marca de verificación na esquina superior dereita.
   • Para seleccionar unha imaxe de zona interactiva predefinida, prema a icona da galería de puntos interactivos. Na paleta de galería de puntos interactivos, prema a imaxe da zona interactiva que desexa usar.

8. preto da esquina superior dereita da páxina, prema Gardar.

   Asegúrese de publicar a nova configuración de visualización previamente establecida.

   Consulte a configuración de visualización de publicación personalizada.

   Está preparado para cargar un titular de imaxes.

Cargando un titular da imaxe

Se xa cargaches as imaxes que queres usar, avance ao seguinte paso, engade zonas interactivas a un titular de imaxes.

para cargar un soporte de imaxe

1. Cargar a imaxe banners que desexa facer interactivo.

   Consulte o alcance dos recursos.

   xa está listo para engadir zonas interactivas ao titular da imaxe; Vexa a seguinte tarefa a continuación.

Engadir zonas interactivas a un titular de imaxes

Pode engadir zonas interactivas a unha bandeira de imaxe usando o editor do interactivo Páxina de xestión de puntos.

Ao engadir zonas interactivas, pode definilos como unha vista emerxente da vista rápida, como unha hiperligazón ou un fragmento de experiencia.

Ver fragmentos de experiencias .

Opcións desfacer e refacer, preto da esquina superior dereita da páxina, son compatibles durante a sesión de Creación / edición actual.

Cando termine de crear a imaxe interactiva, pode usar a vista previa para ver unha representación de como aparece a imaxe interactiva para os clientes.

Ver (opcional) Vista anterior de imaxes interactivas.

Para engadir zonas interactivas a un titular de imaxe

1. Na vista de recursos, desprácese ata a bandeira de imaxe que desexa converter a interactivos.

2. Fai unha das seguintes accións:

   • Pasa o rato sobre a imaxe e, a continuación, prema Seleccionar (verificar a icona de marca). Na barra de ferramentas, prema Editar.

   • Pasa o rato sobre a imaxe e, a continuación, faga clic en máis accións (Icona de tres puntos).

   • Para abrilo na páxina Vista de detalles, prema a imaxe. Na barra de ferramentas, prema Editar.

3. Preto da esquina superior esquerda da páxina, faga clic en Engadir área interactiva (icona co dedo) para abrir a páxina de xestión de puntos interactivos.

4. Preto da esquina superior esquerda da páxina, prema Zona interactiva.

   1. Nearby desde a esquina superior esquerda de A páxina de xestión de puntos interactivos, prema a zona interactiva.
   2. Na imaxe, faga clic nunha localización onde desexa que apareza o punto interactivo. Se é necesario, arrastre a área interactiva para axustar a súa localización. Ou, use as teclas de frecha do teclado para controlar a posición dun punto interactivo seleccionado.
   3. Engadir máis áreas interactivas segundo a necesidade de repetir os pasos A e b.
   4. (opcional) a Elimine unha zona interactiva, seleccione-lo na imaxe e, a continuación, prema Eliminar (icona de lixo) no encabezado da zona interactiva.

5. No campo do nome de texto, Escriba o nome da área interactiva. Este nome tamén aparece na lista despregable da zona interactiva seleccionada.

6. Fai unha das seguintes accións:

   • Prema a vista rápida .

     • Se tes sitios AEM ou cliente de comercio electrónico, toque ou fai clic na icona do selector de produto (LUPA) para abrir a páxina de produtos SELECT. Prema o produto que desexa usar e, a continuación, prema Seleccionar na esquina superior dereita da páxina. Volverá á páxina de xestión de puntos interactivos.

     • Se non é cliente de sitios de xestores de experiencia ou eCommerce

       • vexa a identificación de variables dot interactivo; Debe definir estas variables.
       • A continuación, introduza manualmente o valor SKU. No campo de texto de valor SKU, escriba o produto SKU. O valor SKU introducido automaticamente enche a parte variable do modelo de visualización rápida. Asegura que o sistema do mar asocie a área interactiva utilizada coa vista rápida dun sku específico.
       • (opcional) Se hai outras variables dentro da visualización rápida que se usan para identificar un produto, prema Engadir variable xenérica .. No campo de texto, especifique unha variable adicional. Por exemplo, category=Mens é unha variable agregada.

   • Touch hiperligazón.

     • Se vostede é cliente de experimentar sitios de sitios, prema a icona do selector do sitio (cartafol). Ir a un URL. O método de conexión baseado en URL non é posible se o contido interactivo ten enlaces con URL relativo, especialmente enlaces a páxinas de sitios de xestores de experiencia.
     • Se é cliente independente, no campo de texto HREF especifica o URL completo ruta a unha páxina web ligada.

   Asegúrese de especificar se desexa abrir a ligazón nunha nova pestana do navegador (opción predeterminada recomendada) ou no mesma pestana.

   Ver usando Selectores para obter máis información.

   • Fragmento de prensa de experiencias.

     • Se ti Son sitios de cliente AEM, toque ou faga clic na icona de busca (lupa) para abrir a páxina de fragmentos de experiencias. Toque o fragmento de experiencia que quere usar. A continuación, prema Seleccionar na esquina superior dereita da páxina. Volverá á páxina de administración de puntos interactivos.
       Vexa fragmentos de experiencias.

     • Especifique o ancho e a altura do fragmento de experiencia que quere que apareza na bandeira.

       Nota

       As ferramentas de intercambio de redes sociais en imaxe interactiva non son compatibles cando o visor está integrado nun fragmento de experiencia. En vez diso, usa ou crea axustes predefinidos de Visualizer que non teñan ferramentas de compartición de redes sociais.Estes axustes de visor predefinidos permítenlle inserirlos correctamente en fragmentos de experiencia.

7. Toque Gardar para gardar o traballo e volver á páxina de navegación.

8. Publicar a imaxe interactiva. A publicación ofrece a bandeira a través da nube e tamén xera código integrado que permite integrar cun sitio web de terceiros.

   Ver recursos de publicación.

   Despois de engadir zonas interactivas e publicar o Imaxe interactiva, está preparado para engadilo ao sitio web existente.

   Vexa a integración dunha imaxe interactiva co seu sitio web.

   Nota

   Se edita imaxes interactivas con zonas interactivas e corte a imaxe, eliminaranse as zonas interactivas.

(opcional) anterior de Imaxes interactivas

Pode previsualizar para ver unha representación da aparencia que terá a imaxe interactiva para os clientes. A vista previa tamén permite probar as zonas interactivas da imaxe para asegurarse de que se comportan no camiño esperado.

Cando estea satisfeito coa imaxe interactiva, pode publicala.
Vexa a incrustación da imaxe Visor ou vídeos nunha páxina web.
Vexa a ligazón de URL á aplicación web. O método de conexión baseado no URL non é posible se o contido interactivo ten enlaces con URL relativo, especialmente enlaces a páxinas de sitios AEM.
Vexa Engadir recursos de medios dinámicos a páxinas.

Para previsualizar imaxes interactivas

1. Na vista de recursos, desprácese ata a imaxe interactiva existente que creou e prema para abrir a vista previa.
2. preto da esquina superior esquerda da páxina de visualización, na caída de contido -Dow List, Tap Mostraers.
3. Na lista de visualizadores, prema Shoppable_Banner ou o nome da configuración preestablecida da pantalla de imaxe interactiva que creou.
4. para probar o asociado Accións das áreas interactivas, prema as zonas interactivas da imaxe.

Publicación de recursos de imaxe interactiva

Consulte Recursos de publicación para obter máis información sobre como publicar os recursos de imaxe de interactividade Vostede.

Integración dunha imaxe interactiva co seu sitio web

Despois de cargar unha imaxe de Banner, engadindo zonas interactivas e publica a imaxe interactiva, está preparado para engadilo ao Páxina web.

Se vostede é AEM sitios de clientes, pode engadir a imaxe interactiva arrastrando o compoñente multimedia interactivo á súa páxina. Consulte Engadir recursos dinámicos de medios ás páxinas.

Se vostede é cliente independente de activos AEM, pode engadir manualmente a imaxe interactiva ao seu sitio web como se describe nesta sección.

1. Copiar o código incrustado da imaxe interactiva publicada.
   Vexa quebraining a imaxe ou os vídeos amosar nunha páxina web.

2. Engadir a copia do código incorporado ao desexado Localización dentro da páxina web.
   O código embebido copiado está configurado para un ambiente interactivo, polo que se axusta automaticamente á área asignada.

exemplo

Co sitio web do programa como exemplo, teña en conta que a imaxe das tres persoas é unha etiqueta estática IMG:

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

A integración é tan sinxela como a eliminación da etiqueta IMG e substitúeo co código incrustado copiado dos activos AEM. Podes ver que o resultado mostra a imaxe de vendas interactiva na páxina con tres puntos de círculo interactivo.

Para aplicar un “recorte” a unha imaxe de vendas interactiva para un ambiente interactivo, inclúen o atributo de configuración de imaxe interactiva ZoomView.iscommand á ruta. Neste caso, chámase compoñente e iscommand é o comando de servidor de imaxes de “cultivo” que se aplica.

Consulte o atributo de configuración ZoomVIEW.IsCommand.

Ver o comando de servidor de imaxes de cultivo.

xa está listo para integrar a imaxe interactiva cunha vista rápida no seu sitio web.

Integración dunha imaxe interactiva cunha vista rápida de visualización

O último paso deste proceso é integrar a imaxe interactiva cunha implementación de visualización rápida existente no sitio web.Non hai solución para a integración que funcione en todos os casos. Cada implementación de visualización rápida é única e necesítase un enfoque específico. Como tal, a participación dun front-end persoa é útil.

A implementación de visualización rápida existente normalmente representa unha cadea de accións interrelacionadas que se producen na páxina web na seguinte orde:

1. Un usuario activa un elemento da interface de usuario do sitio web.
2. O código de front-end obtén unha URL de visualización rápida baseada no elemento da interface de usuario que foi activado no paso 1.
3. O código de front-end envía unha solicitude AJAX usando a URL obtida no paso 2.
4. A lóxica de back-end devolve os datos ou o contido de visualización rápida correspondente ao código de entrada.
5. O código de front-end carga os datos ou o contido da vista rápida.
6. Opcionalmente, o código frontal converte os datos de visualización rápida cargados nunha representación HTML.
7. O código de front-end mostra un cadro de diálogo modal ou un panel e representa o contido HTML na pantalla para o Usuario final.

Estas chamadas non representan necesariamente as chamadas API públicas independentes ás que a lóxica do sitio web chama desde un paso arbitrario. No seu lugar, é unha chamada encadenada na que cada seguinte paso está oculto na última fase (chamada de retorno) do paso anterior.

Cando a imaxe interactiva da táboa de vendas substitúe o paso 1 e, en parte, en parte , ao paso 2, un usuario toca unha área interactiva dentro da imaxe da táboa de compras. O espectador xestiona esta interacción do usuario. O visor devolve un evento ao sitio web que contén todos os datos de punto interactivo engadidos anteriormente a AEM activos.

Nun controlador de eventos deste tipo, o código de front-end fai o seguinte:

• Escoitar un evento emitido pola imaxe de venda interactiva.
• Crear unha URL de visualización rápida baseada en datos de zona interactiva.
• Activa o proceso para cargar a vista rápida de O servidor e procesalo na pantalla para mostrar.

O código incorporado devolto por experiencias Administrador activos ten un controlador de eventos listo para ser discutido, como ve na próxima fonte de código destacada:

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

Polo tanto, só é necesario decomar o código e substituír o órgano do controlador ficticio co código específico do sitio web en particular.

O proceso de construción da URL de visualización rápida é oposto ao proceso usado para identificar a s variables de puntos interactivos que foron cubertos previamente.

Vexa a identificación das variables interactivas dot.

Nos exemplos anteriores de URL de visualización rápida pode ver nos seguintes exemplos como se constrúe A URL de visualización rápida en cada caso:

SKU Single, atopado en a cadea de consulta	s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/json?productId=" + inData.sku + "&source=100"; }, });
Sku Single, que está activado A ruta URL	s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/product/" + inData.sku; }, });
SKU E Categoría ID na consulta Chain	s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/quickView/product/?category=" + inData.categoryId + "&prodId=" + inData.sku; }, });

O último paso para activar a URL de visualización rápida e activar o panel de visualización rápida require a asistencia dunha persoa frontal da súa empresa. Teñen coñecemento para saber mellor como activar con precisión a implementación da vista rápida desde o paso axeitado, ter unha URL de visualización rápida listo para usar.

Podes ver como se aplican estes pasos ao sitio web de demostración por completo Integre unha imaxe de vendas interactiva co código de visualización rápida. Anteriormente, a estrutura da URL de visualización rápida foi identificada como a seguinte:

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

Para reconstruír este URL dentro do controlador quickViewActivate, pode usar os campos categoryId e SKU. Estes campos están dispoñibles no obxecto inData que o código do visor pasa ao controlador:

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

a demostración do sitio web Activa o diálogo de visualización rápida usando unha chamada sinxela chamada loadQuickView(). Esta función só leva un argumento, que é o URL de datos de visualización rápida. Como tal, o último paso para integrar a imaxe de vendas interactivas é engadir a seguinte liña de código ao controlador :

loadQuickView(quickViewUrl);

O seguinte é o código fonte 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();

O sitio web de demostración final coa imaxe interactiva interactiva.

Usando vistas rápidas para crear fiestras emerxentes personalizadas

Ver a través de visualizacións rápidas para crear fiestras emerxentes personalizadas.