Imágenes interactivas

Puede hacer que las imágenes estáticas sean ricas y atractivas para los clientes arrastrando y soltando puntos interactivos "de ventas" en una imagen. Los hotspots de ventas combinan información adicional sobre un producto o servicio con una capacidad directa y de punto de venta "Añadir al carro" o "Comprar". Los clientes pueden seleccionar estos puntos interactivos y estar vinculados directamente al producto o servicio, agregarlos a un carro de compras o estar vinculados a una página web. Las experiencias directas como estas aumentan las participaciones de los clientes y las conversiones en el sitio web.

El siguiente es un banner de ventas con una ventana emergente de vista rápida. Un usuario activa la vista rápida seleccionando el círculo o la "zona interactiva" en el modelo.

Consulte imágenes interactivas en acción en la página web anterior. Para ello, vaya a:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion-QVzoom/index2-shoppable.html?lang=es?lang=es

Ver cómo se crean los titulares de imagen interactivos

Reproduzca un tutorial en cómo se crean los banners de imagen interactivos (10 minutos y 33 segundos). También aprenderá a previsualizar, editar y distribuir banners de imagen interactivos.

Inicio rápido: Imágenes interactivas

La siguiente descripción paso a paso del flujo de trabajo está diseñada para ayudarle a poner en marcha las imágenes interactivas con rapidez en Adobe Experience Manager Assets.

Busque el encabezado Example dentro de algunas de las tareas de inicio rápido. Contiene un breve tutorial basado en el siguiente ejemplo de página web que aún no tiene imágenes interactivas agregadas:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-0.html?lang=es?lang=es

El tutorial ayuda a ilustrar los pasos para integrar imágenes interactivas en su propio sitio web.

Pasos de imágenes interactivas:

1. (Opcional) Identifique las variables de puntos interactivos : si utiliza Recursos de Experience Manager y Dynamic Media de forma independiente, comience por identificar las variables dinámicas que se usan en la implementación de vista rápida existente. A continuación, puede introducir datos de puntos interactivos al crear la imagen interactiva. Consulte (Opcional) Identificar variables de puntos interactivos.
   Sin embargo, si utiliza Adobe Experience Manager Sites, Adobe Experience Manager eCommerce, o ambos, este paso no es necesario.
   Consulte eCommerce concepts in Experience Manager Assets.

2. (Opcional) Crear un ajuste preestablecido de visualizador de imagen interactiva : personalice la imagen gráfica que se utiliza para representar zonas interactivas. No es necesario crear su propio ajuste preestablecido de visualizador de imagen interactiva si quiere usar el ajuste preestablecido de visualizador de imagen interactiva predeterminado, denominado Shoppable_Banner en su lugar.
   Consulte (Opcional) Crear un ajuste preestablecido de visualizador de imagen interactivo.

3. Cargar un banner de imagen : cargue banners de imagen que desee hacer interactivos.
   Consulte Cargar un banner de imagen.

4. Agregar zonas interactivas a un banner de imagen : agregue una o varias zonas interactivas a un banner de imagen y asocie cada una de ellas a una acción como un hipervínculo, una vista rápida o un fragmento de experiencia. Después de agregar zonas interactivas, terminará esta tarea publicando la imagen interactiva.

   • Consulte Agregar zonas interactivas a un titular de imagen.
   • Consulte Vista previa de imágenes interactivas - Opcional. Si lo desea, puede ver una representación del banner de ventas y probar su interactividad.
   • Consulte Publicar recursos para obtener más información sobre cómo publicar recursos de imagen interactivos.

5. Agregar una imagen interactiva a su sitio web : si usa Sitios Experience Manager o Comercio electrónico, o ambos, puede agregar la imagen interactiva a una página web en Experience Manager. Arrastre el componente Medios interactivos a la página. Consulte Agregar recursos de Dynamic Media a páginas.

   Si utiliza Recursos de Experience Manager y Dynamic Media de forma independiente, debe copiar el código incrustado en el sitio web y, a continuación, integrarlo con la vista rápida existente. Consulte Integrar una imagen interactiva con su sitio web.

   Si utiliza un WCM de terceros (Web Content Manager), debe integrar el nuevo vídeo interactivo con la implementación de vista rápida existente que se utiliza en el sitio web. Consulte Integrar una imagen interactiva con una vista rápida existente.

(Opcional) Identifique las variables de puntos interactivos

Comience por identificar las variables dinámicas que usa la implementación de vista rápida existente, de modo que pueda introducir datos de zona interactiva para crear la imagen interactiva.

Al agregar zonas interactivas a una imagen de titular en Recursos Experience Manager, debe asignar un SKU (unidad de mantenimiento de existencias) y variables adicionales opcionales a cada zona interactiva. Estas variables de puntos interactivos se utilizan más adelante para hacer coincidir puntos interactivos con contenido de vista rápida.

Es importante identificar correctamente el número y el tipo de variables que se asociarán con los datos de puntos interactivos. Cada zona interactiva agregada a una imagen de banner debe contener suficiente información para identificar el producto de forma inequívoca en el sistema back-end existente.

Existen diferentes maneras de identificar un conjunto de variables que se utilizarán para los datos de puntos interactivos.

A veces es suficiente consultar a los especialistas de TI responsables de la implementación de Quickview existente. Es probable que los especialistas en TI sepan cuál es el conjunto mínimo de datos necesario para la identificación de Quickview en el sistema. Sin embargo, también es posible simplemente analizar el comportamiento existente del código front-end.

La mayoría de las implementaciones de vista rápida utilizan el siguiente paradigma:

• El usuario activa un elemento de interfaz de usuario en el sitio web. Por ejemplo, si selecciona el botón "Vista rápida".
• El sitio web envía una solicitud de Ajax al servidor para cargar los datos o el contenido de la vista rápida, si es necesario.
• Los datos de vista rápida se traducen al contenido como preparación para su renderización en la página web.
• Por último, el código front-end procesa visualmente dicho contenido en la pantalla.

El método entonces es visitar diferentes áreas del sitio web existente donde se implementa la función Vista rápida. A continuación, se déclencheur la vista rápida y se captura la URL de Ajax que envía la página web para cargar los datos o el contenido de la vista rápida.

Normalmente no es necesario que utilice ninguna herramienta de depuración especializada. Los navegadores web modernos cuentan con inspectores web que realizan un trabajo adecuado. A continuación se indican algunos ejemplos de exploradores web que incluyen inspectores web:

• Para ver todas las solicitudes HTTP salientes en Google Chrome, pulse F12 para abrir el panel Herramientas para desarrolladores y, a continuación, seleccione la pestaña Red.
  En un Mac, pulse Comando+Opción+I para abrir el panel Herramientas para desarrolladores y, a continuación, seleccione la ficha Red.

• En Firefox, puede activar el complemento Firebug pulsando F12 y utilizando su pestaña Red, o puede utilizar la herramienta Inspector integrada y su pestaña Red.
  En un Mac, pulse Comando+Opción+I para abrir el panel Herramientas para desarrolladores y, a continuación, seleccione la ficha Inspector .

Cuando la supervisión de red está activada en el explorador, ponga en déclencheur la vista rápida en la página.

Ahora, busque la URL de Ajax de vista rápida en el registro de red y copie la URL grabada para su análisis futuro. Por lo general, cuando se déclencheur la vista rápida hay numerosas solicitudes que se envían al servidor. Normalmente, la URL de Ajax de vista rápida es una de las primeras de la lista. Tiene una ruta o parte de una cadena de consulta compleja y su tipo MIME de respuesta es text/html, text/xml o text/javascript.

Durante este proceso, es importante visitar diferentes áreas del sitio web, con diferentes tipos y categorías de productos. El motivo es que las URL de vista rápida pueden tener partes que son comunes para una categoría de sitio web determinada, pero cambian solo si visita un área diferente del sitio web.

En el caso más simple, la única parte de la variable en la URL de vista rápida es el SKU del producto. En este caso, el valor SKU es la única pieza de datos que necesita para agregar zonas interactivas a la imagen del banner.

Sin embargo, en casos complejos, la URL de vista rápida tiene diferentes elementos además del SKU, como el ID de categoría, el código de color y el código de tamaño. En estos casos, cada elemento es una variable independiente en la definición de datos de puntos interactivos de la función de imagen interactiva de ventas en Recursos Experience Manager.

Veamos los siguientes ejemplos de direcciones URL de vista rápida y las variables de puntos interactivos resultantes:

Ejemplo

Puede aplicar el mismo enfoque utilizado en los tres ejemplos anteriores a la página web de demostración:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-0.html?lang=es?lang=es

La página web de demostración tiene varias miniaturas de productos, cada una con un botón de vista rápida etiquetado como "Ver más". Con la herramienta de depuración del explorador web aún activada, seleccione cada botón y anote las URL de vista rápida registradas. Después de activar los cuatro productos de Quickview disponibles en la página, tiene la siguiente lista de solicitudes de Quickview realizadas en el servidor:

• /datafeed/Male-Windbreaker.json
• /datafeed/Male-SimpleHenley.json
• /datafeed/Male-CamoPullover.json
• /datafeed/Female-QuiltedDownJacket.json

Al examinar las llamadas al servidor, verá que la información específica del producto solo está presente en la ruta de solicitud. También observa que la cadena de consulta no se utiliza en absoluto y que hay dos tipos distintos de fragmentos de datos involucrados:

• El primer tipo es Masculino o Femenino. Puede llamar a esta "categoría de producto".
• El segundo tipo es el nombre del producto, como CamoPullover. Puede suponer que esta información es el SKU del producto.

Dada esta información, toda la URL de vista rápida tiene el siguiente patrón:

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

En función de este análisis, utilizaría categoryId y SKU para las zonas interactivas.

Ya está listo para cargar un titular de imagen y agregarle zonas interactivas mediante la función de imagen interactiva de ventas en Recursos Experience Manager.

(Opcional) Crear un ajuste preestablecido de visualizador de imagen interactivo

Puede elegir utilizar el ajuste preestablecido predeterminado y listo para usar del visualizador de imagen interactiva llamado Shoppable_Banner que se incluye con los recursos de Experience Manager. O puede crear su propio ajuste preestablecido de visualizador personalizado para utilizarlo con imágenes interactivas.

Al crear un ajuste preestablecido personalizado del visualizador de imagen interactiva, puede determinar el aspecto de las zonas interactivas en el banner de imagen. Como parte de la creación del ajuste preestablecido de visualizador, puede elegir utilizar un gráfico de zona interactiva de una galería de imágenes predefinidas.

Después de guardar el ajuste preestablecido de visualizador, se activa automáticamente (se activa) en la página de lista Ajustes preestablecidos de visualizador en Recursos de Experience Manager. Esta funcionalidad significa que está visible en el componente de Medios interactivos y siempre que se vea un recurso. Sin embargo, para entregar un banner interactivo con este ajuste preestablecido de visualizador, también debe publicar el ajuste preestablecido de visualizador. Esta regla es verdadera para los ajustes preestablecidos de visor personalizados o predeterminados.

Para crear un ajuste preestablecido de visualizador de imagen interactiva:

1. En el carril izquierdo, vaya a Tools > Assets > Viewer Presets.

2. Cerca de la esquina superior derecha de la página, seleccione Crear.

3. En el cuadro de diálogo Nuevo ajuste preestablecido de visualizador, escriba un nombre para describir el ajuste preestablecido de visualizador de banners interactivo.

   El título aparece en la página de lista Ajustes preestablecidos de visor después de guardarlo.

4. En el menú desplegable Tipo de medio enriquecido, seleccione Imagen interactiva.

5. Seleccione Crear.

6. En la página Editar ajuste preestablecido de visualizador, seleccione la pestaña Aspecto.

7. Realice una de las acciones siguientes:

   • Para cargar su propia imagen de zona interactiva que desee utilizar en imágenes, seleccione el icono Selector de recursos . En la página Seleccionar contenido , vaya a la imagen de zona interactiva que desee utilizar, selecciónela y, a continuación, seleccione el icono Marca de verificación en la esquina superior derecha.
   • Para seleccionar una imagen de zona interactiva predefinida, seleccione el icono Galería de puntos interactivos . En la paleta Galería de puntos interactivos, seleccione la imagen de zona interactiva que desee utilizar.

8. Cerca de la esquina superior derecha de la página, seleccione Guardar.

   Asegúrese de publicar el nuevo ajuste preestablecido de visor.

   Consulte Ajustes preestablecidos de visualizador de publicaciones que ha agregado.

   Ya está listo para cargar un titular de imagen.

Cargar un titular de imagen

Si ya ha cargado las imágenes que desea usar, avance al siguiente paso, Añadir zonas interactivas a un titular de imagen.

Para cargar un titular de imagen:

1. Cargue banners de imagen que desee hacer interactivos.

   Consulte Carga de recursos.

   Ya está listo para agregar zonas interactivas al titular de la imagen; consulte la siguiente tarea a continuación.

Agregar zonas interactivas a un banner de imagen

Puede agregar zonas interactivas a un banner de imagen mediante el editor de la página Administración de puntos interactivos .

Cuando agregue zonas interactivas, puede definirlas como una visualización emergente de vista rápida, como un hipervínculo o un fragmento de experiencia.

Consulte Fragmentos de experiencias.

Las opciones Deshacer y Rehacer, cerca de la esquina superior derecha de la página, son compatibles durante la sesión de creación/edición actual.

Cuando termine de crear la imagen interactiva, puede utilizar Vista previa para ver una representación de cómo la imagen interactiva aparece para los clientes.

Consulte (Opcional) Vista previa de imágenes interactivas.

Para agregar zonas interactivas a un titular de imagen:

1. En la vista Recursos, desplácese hasta el banner de imagen que desee convertir en interactivo.

2. Realice una de las acciones siguientes:

   • Pase el ratón sobre la imagen y, a continuación, seleccione Seleccionar (icono de marca de verificación). En la barra de herramientas, seleccione Editar.

   • Pase el ratón sobre la imagen y, a continuación, seleccione Más acciones (icono de tres puntos) Editar.

   • Seleccione la imagen para abrirla en la página Vista de detalles . En la barra de herramientas, seleccione Editar.

3. Cerca de la esquina superior izquierda de la página, seleccione Agregar zona interactiva (icono con el dedo) para abrir la página de administración de puntos interactivos.

4. Cerca de la esquina superior izquierda de la página, seleccione Zona interactiva.

   1. Cerca de la esquina superior izquierda de la página Administración de puntos interactivos, seleccione Zona interactiva.
   2. En la imagen, seleccione una ubicación en la que desee que aparezca el punto interactivo. Si es necesario, arrastre la zona interactiva para ajustar su ubicación.
   3. Agregue más zonas interactivas según sea necesario repitiendo los pasos a y b.
   4. (Opcional) Para eliminar una zona interactiva, selecciónela en la imagen y, a continuación, seleccione Eliminar (icono de la papelera) en el encabezado Zonas interactivas.

5. En el campo de texto Nombre , escriba el nombre de la zona interactiva. Este nombre también aparece en la lista desplegable Zona interactiva seleccionada .

6. Realice una de las acciones siguientes:

   • Seleccione Quickview.

     • Si es Experience Manager de Sitios o cliente de comercio electrónico, seleccione el icono Selector de productos (lupa) para abrir la página Seleccionar producto . Seleccione el producto que desea utilizar y, a continuación, seleccione Seleccionar en la esquina superior derecha de la página para que pueda volver a la página de administración de puntos interactivos.

     • Si es no cliente de Sites Experience Manager o comercio electrónico

       • Consulte Identificar variables de puntos interactivos; debe definir estas variables.
       • A continuación, introduzca manualmente el valor de SKU. En el campo de texto Valor de SKU , escriba el SKU del producto (unidad de mantenimiento de stock), que es un identificador único para cada producto o servicio distinto que ofrezca. El valor SKU introducido rellena automáticamente la parte variable de la plantilla de vista rápida, de modo que el sistema sepa asociar la zona interactiva seleccionada con la vista rápida de un SKU concreto.
       • (Opcional) Si hay otras variables dentro de la vista rápida que debe utilizar para identificar un producto, seleccione Agregar variable genérica. En el campo de texto, especifique una variable adicional. Por ejemplo, category=Males es una variable agregada.

   • Seleccione Hipervínculo.

     • Si es cliente de Sites Experience Manager, seleccione el icono Selector de sitio (carpeta) para navegar a una dirección URL. El método de vinculación basado en URL no es posible si el contenido interactivo tiene vínculos con direcciones URL relativas, especialmente vínculos a páginas de sitios Experience Manager.
     • Si es cliente independiente, en el campo de texto HREF especifique la ruta de URL completa a una página web vinculada.

   Asegúrese de especificar si desea abrir el vínculo en una nueva pestaña del explorador (opción predeterminada recomendada) o en la misma pestaña.

   Consulte Trabajar con selectores para obtener más información.

   • Seleccione Fragmento de experiencia.

     • Si es cliente de Sitios Experience Manager, seleccione el icono de búsqueda (lupa) para abrir la página Fragmento de experiencias . Seleccione el fragmento de experiencia que desee utilizar y, a continuación, seleccione Seleccionar en la esquina superior derecha de la página para que pueda volver a la página de administración de puntos interactivos.
       Consulte Fragmentos de experiencias.

     • Especifique la anchura y la altura del fragmento de experiencia tal como desea que aparezca en el banner.

       NOTA

       Las herramientas de uso compartido de medios sociales en Imagen interactiva no son compatibles cuando se incrusta el visor en un fragmento de experiencia. Para solucionar este problema, puede utilizar o crear ajustes preestablecidos de visualizador que no tengan herramientas de uso compartido en redes sociales. Estos ajustes preestablecidos de visor permiten incrustarlos correctamente en fragmentos de experiencias.

7. Seleccione Guardar para guardar el trabajo y volver a la página Examinar.

8. Publique la imagen interactiva. La publicación permite entregar el banner a través de la nube y también genera código incrustado si necesita integrarlo con un sitio web de terceros.

   Consulte Publicar recursos.

   Después de agregar zonas interactivas y publicar la imagen interactiva, ya está listo para agregarla al sitio web existente.

   Consulte Integrar una imagen interactiva con su sitio web.

   NOTA

   Si edita imágenes interactivas con zonas interactivas y recorta la imagen, se eliminarán las zonas interactivas.

(Opcional) Previsualizar imágenes interactivas

Puede utilizar Vista previa para ver una representación del aspecto que tiene la imagen interactiva para los clientes y para probar las zonas interactivas de la imagen para asegurarse de que se comportan del modo esperado.

Cuando esté satisfecho con la imagen interactiva, puede publicarla.
Consulte Incrustar el visualizador de imágenes o vídeos en una página web.
Consulte Vincular URL a su aplicación web. El método de vinculación basado en URL no es posible si el contenido interactivo tiene vínculos con direcciones URL relativas, especialmente vínculos a páginas de sitios Experience Manager.
Consulte Agregar recursos de Dynamic Media a páginas.

Para previsualizar imágenes interactivas:

1. En la vista Recursos, desplácese a la imagen interactiva existente que haya creado y seleccione para abrirla en Vista previa.
2. Cerca de la esquina superior izquierda de la página Vista previa, en la lista desplegable Contenido, seleccione Visualizadores.
3. En la lista Visualizadores, seleccione Shoppable_Banner o el nombre del ajuste preestablecido del visualizador de imágenes interactivo que ha creado.
4. Seleccione las zonas interactivas de la imagen si desea probar las acciones asociadas.

Publicar recursos de imagen interactivos

Consulte Publicar recursos para obtener más información sobre cómo publicar recursos de imagen interactivos.

Integración de una imagen interactiva con el sitio web

Después de cargar una imagen de banner, agregar zonas interactivas a la imagen y publicar la imagen interactiva, ya está listo para agregarla a la página del sitio web.

Si es cliente de Sitios Experience Manager, puede agregar la imagen interactiva arrastrando el componente de Medios interactivos a su página. Consulte Agregar recursos de Dynamic Media a páginas.

Si es cliente independiente de Recursos Experience Manager, puede agregar manualmente la imagen interactiva al sitio web tal como se describe en esta sección.

1. Copie el código incrustado de la imagen interactiva publicada.
   Consulte Incrustar el visualizador de imágenes o vídeos en una página web.

2. Agregue el código incrustado copiado en la ubicación deseada dentro de la página web.
   El código incrustado copiado está configurado para un entorno interactivo, de modo que se ajusta automáticamente al área asignada.

Ejemplo

Ejemplo de uso del sitio web de demostración:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-0.html?lang=es?lang=es

Observe que la imagen de los tres machos es 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ón es tan sencilla como eliminar la etiqueta IMG y sustituirla por el código incrustado copiado de los recursos de Experience Manager. Puede ver el resultado en la siguiente URL que muestra la imagen interactiva de ventas en la página con tres puntos interactivos de círculo:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-1.html?lang=es?lang=es

Para aplicar un "recorte" a una imagen interactiva de ventas para un entorno interactivo, puede incluir el atributo de configuración de imagen interactiva ZoomView.iscommand a la ruta. El componente ZoomView se llama y iscommand es el comando de servidor de imágenes "recortar" que se aplica.

Consulte el atributo de configuración ZoomView.iscommand.

Consulte el comando recortar servidor de imágenes.

Ya está listo para integrar la imagen interactiva con una vista rápida existente en su sitio web.

Integrar una imagen interactiva con una vista rápida existente

El último paso de este proceso es integrar la imagen interactiva con una implementación de vista rápida existente en el sitio web. No existe una solución para la integración que funcione en todos los casos. Cada implementación de QuickView es única y se necesita un enfoque específico. Probablemente implique la asistencia de una persona de TI de front-end.

La implementación de vista rápida existente representa normalmente una cadena de acciones interrelacionadas que se producen en la página web en el siguiente orden:

1. Un usuario déclencheur un elemento en la interfaz de usuario del sitio web.
2. El código del front-end obtiene una URL de vista rápida basada en el elemento de la interfaz de usuario que se activó en el paso 1.
3. El código front-end envía una solicitud de Ajax utilizando la URL obtenida en el paso 2.
4. La lógica back-end devuelve los datos o el contenido de vista rápida correspondientes al código front-end.
5. El código front-end carga los datos o el contenido de Quickview.
6. De forma opcional, el código front-end convierte los datos de Quickview cargados en una representación HTML.
7. El código front-end muestra un cuadro de diálogo modal o panel y representa el contenido HTML en la pantalla para el usuario final.

Estas llamadas no representan llamadas de API públicas independientes a las que la lógica de página web puede llamar desde un paso arbitrario. En su lugar, se trata de una llamada encadenada en la que cada paso siguiente se oculta en la última fase (llamada de retorno) del paso anterior.

Al mismo tiempo que la imagen interactiva de ventas sustituye al paso 1 y al paso 2 parcialmente, cuando un usuario selecciona un punto interactivo dentro de la imagen de ventas, el visor gestiona dicha interacción del usuario. El visor devuelve un evento a la página web que contiene todos los datos de zona interactiva añadidos anteriormente a Recursos de Experience Manager.

En un controlador de eventos de este tipo, el código front-end hace lo siguiente:

• Escucha un evento emitido por la imagen interactiva de ventas.
• Crea una URL de vista rápida basada en los datos de zona interactiva.
• Déclencheur el proceso de carga de la vista rápida desde el servidor y de renderización en la pantalla para su visualización.

El código incrustado devuelto por Recursos de Experience Manager ya tiene un controlador de eventos listo para usar que se comenta, como se ve en el siguiente fragmento de código resaltado:

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

Por lo tanto, solo es necesario descomentar el código y reemplazar el cuerpo del controlador ficticio con el código específico de la página web en particular.

El proceso de construcción de la URL de vista rápida es opuesto al proceso utilizado para identificar las variables de zona interactiva incluidas anteriormente.

Consulte Identificar variables de puntos interactivos.

En los ejemplos anteriores de URL de vista rápida, se puede ver en los ejemplos siguientes cómo se construye la URL de vista rápida en cada caso:

El último paso para almacenar en déclencheur la URL de vista rápida y activar el panel de vista rápida requiere, muy probablemente, la asistencia de una persona de TI de front-end de su departamento de TI. Tienen conocimientos para saber mejor cómo realizar un déclencheur exacto de la implementación de QuickView desde el paso adecuado, teniendo una URL de Quickview lista para usar.

Puede ver cómo se aplican estos pasos al sitio web de demostración para integrar completamente una imagen interactiva de ventas con el código de vista rápida. Anteriormente, la estructura de la URL de vista rápida se identificaba como la siguiente:

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

Para reconstruir esta URL dentro del controlador quickViewActivate , puede utilizar los campos categoryId y SKU disponibles en el objeto inData que el código del visor pasa al controlador:

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

El sitio web de demostración activa el cuadro de diálogo Vista rápida utilizando una llamada de función loadQuickView() simple. Esta función toma solo un argumento, que es la URL de datos de vista rápida. Como tal, el último paso para integrar la imagen interactiva de ventas es agregar la siguiente línea de código al controlador quickViewActivate:

loadQuickView(quickViewUrl);

El siguiente es el código fuente 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();

El sitio web de demostración final con la imagen interactiva completamente integrada tiene el siguiente aspecto:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-3.html?lang=es?lang=es

Utilice la vista rápida para crear ventanas emergentes personalizadas

Consulte Creación de ventanas emergentes personalizadas mediante Quickview.