Show Menu
TEMAS×

Imágenes interactivas

Puede hacer que las imágenes estáticas sean ricas y atractivas para los clientes arrastrando y soltando puntos interactivos "comprables" en una imagen. Los puntos de conexión de ventas combinan información adicional sobre un producto o servicio con una capacidad directa de "Añadir al carro" o "Comprar" en el punto de venta. Los clientes pueden tocar o hacer clic en estos puntos interactivos y estar vinculados directamente al producto o servicio, agregarlos a un carro de compras o vincularlos a una página web. Las experiencias directas como éstas aumentan la conversión y la participación de los clientes en el sitio web.
El siguiente es un letrero de ventas con una ventana emergente de vista rápida. Un usuario activa la vista rápida tocando el círculo o la "zona interactiva" del modelo.
Consulte las imágenes interactivas en acción en la página web que se muestra arriba.

Ver cómo se crean los letreros de imagen interactivos

Vea un tutorial de 10 minutos y 33 segundos sobre cómo se crean los letreros de imagen interactivos. También aprenderá a previsualizar, editar y distribuir letreros de imagen interactivos.

Inicio rápido: Imágenes interactivas

La siguiente descripción paso a paso del flujo de trabajo se ha diseñado para ayudarle en el uso inicial de imágenes interactivas en Recursos AEM.
Busque el encabezado Ejemplo en algunas de las tareas de inicio rápido. Contiene un breve tutorial basado en un ejemplo de página web que aún no contiene imágenes interactivas .
El tutorial ayuda a ilustrar los pasos para integrar imágenes interactivas en su propio sitio web.
Pasos de imágenes interactivas:
  1. (Opcional) Identificación de variables de puntos interactivos: si utiliza Recursos AEM y Medios dinámicos independientes, comience identificando las variables dinámicas utilizadas en la implementación de Vista rápida existente para que pueda introducir datos de puntos interactivos al crear la imagen interactiva. Consulte (Opcional) Identificación de variables de puntos interactivos. Sin embargo, si utiliza AEM Sites, AEM eCommerce o ambos, este paso no es necesario.
  2. (Opcional) Creación de un ajuste preestablecido de visor de imágenes interactivo: personalice la imagen gráfica que se utiliza para representar zonas interactivas. No es necesario crear su propio ajuste preestablecido de visor de imagen interactiva si desea utilizar el ajuste preestablecido de visor de imagen interactiva incorporado Shoppable_Banner . Consulte (Opcional) Creación de un ajuste preestablecido de visor de imágenes interactivo.
  3. Carga de una pancarta de imagen: cargue las pancartas de imagen que desee que sean interactivas. Consulte Carga de letreros de imagen.
  4. Adición de zonas interactivas a una pancarta de imagen: agregue una o varias zonas interactivas a una pancarta de imagen y asocie cada una de ellas con una acción como un hipervínculo, una vista rápida o un fragmento de experiencia. Después de agregar zonas interactivas, finalizará esta tarea publicando la imagen interactiva. Consulte Adición de zonas interactivas a un letrero de imagen. Consulte Vista previa de imágenes interactivas: opcional. Si lo desea, puede ver una representación de la pancarta de ventas y probar su interactividad. Consulte Publicación de recursos para obtener más información sobre cómo publicar recursos de imagen interactivos.
  5. Adición de una imagen interactiva a su sitio web o a su sitio web en AEM . Si utiliza AEM Sites, AEM eCommerce, o ambos, puede añadir la imagen interactiva directamente a una página web en AEM arrastrando el componente Medios interactivos a la página. See Adding Dynamic Media Assets to Pages. Si utiliza Recursos AEM y Medios dinámicos independientes, debe copiar el código incrustado en el sitio web y, a continuación, integrarlo con la vista rápida existente. Consulte Integración de una imagen interactiva con el sitio Web . Si está utilizando 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 Integración de una imagen interactiva con una vista rápida existente.

(Opcional) Identificación de variables de puntos interactivos

Esta tarea solo es necesaria si se cumple lo siguiente:
  • Para agregar interactividad a la imagen, active las vistas rápidas.
  • La implementación de AEM no utiliza un marco de integración de comercio electrónico para extraer datos de productos en AEM desde cualquier solución de comercio electrónico, como comercio de esfera web de IBM, ruta elástica, híbris o Intershop.
Si la implementación de AEM utiliza el comercio electrónico, puede omitir esta tarea y continuar con la siguiente.
Comience identificando las variables dinámicas que utiliza la implementación de vista rápida existente para poder introducir datos de puntos interactivos y crear la imagen interactiva.
Al añadir zonas interactivas a una imagen de pancarta en Recursos AEM, debe asignar un SKU (unidad de almacenamiento de información; un identificador único para cada producto o servicio distinto que ofrezca) y variables adicionales opcionales para cada zona interactiva. Estas variables de puntos interactivos se utilizan más adelante para hacer coincidir puntos interactivos con el 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 pancarta debe contener suficiente información para identificar sin ambigüedades el producto 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 puede bastar con consultar con especialistas de TI responsables de la implementación de Quickview existente, ya que es probable que sepan cuál es el conjunto mínimo de datos necesario para identificar Quickview en el sistema. Sin embargo, en la mayoría de los casos también es posible simplemente analizar el comportamiento existente del código front-end.
La mayoría de las implementaciones de Quickview utilizan el siguiente paradigma:
  • El usuario activa un elemento de interfaz de usuario en el sitio web. Por ejemplo, al hacer clic en 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 la vista rápida se traducen al contenido como preparación para su procesamiento en la página web.
  • Por último, el código front-end procesa visualmente dicho contenido en la pantalla.
El método consiste en visitar diferentes áreas del sitio web existente donde se implementa la función Vista rápida, activar la Vista rápida y capturar la URL de Ajax enviada por 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. Estos son 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 del desarrollador y, a continuación, haga clic en la ficha Red. En un Mac, pulse Comando+Opción+I para abrir el panel Herramientas del desarrollador y, a continuación, haga clic en la ficha Red.
  • En Firefox, puede activar el complemento Firebug pulsando F12 y utilizando su ficha Red, o bien puede utilizar la herramienta Inspector integrada y su ficha Red. En un Mac, pulse Comando+Opción+I para abrir el panel Herramientas del desarrollador y, a continuación, haga clic en la ficha Inspector.
Cuando la supervisión de red está activada en el explorador, active 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 análisis futuros. En la mayoría de los casos, cuando se activa 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 una porción de 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 direcciones URL de vista rápida pueden tener partes comunes para una categoría de sitio web determinada, pero solo cambian si se visita un área diferente del sitio web.
En el caso más sencillo, la única parte variable de la URL de vista rápida es el SKU del producto. En este caso, el valor de SKU es la única pieza de datos que necesita para agregar zonas interactivas a la imagen de la pancarta.
Sin embargo, en casos complejos, la URL de vista rápida tiene distintos elementos además del SKU, como ID de categoría, código de color, código de tamaño, etc. 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 de Recursos AEM.
Considere los siguientes ejemplos de direcciones URL de Quickview y sus variables de puntos interactivos resultantes:
SKU único, que se encuentra en la cadena de consulta.
Las direcciones URL de vista rápida grabadas incluyen lo siguiente:
  • 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
La única parte variable de la dirección URL es el valor del parámetro de cadena de consulta productId= y es claramente un valor de SKU. Por lo tanto, nuestras zonas interactivas solo necesitan campos SKU rellenados con valores como 866558 , 1196184 , 1081492 , 1898294 .
SKU único, que se encuentra en la ruta de URL.
Las direcciones URL de vista rápida grabadas incluyen lo siguiente:
  • https://server/product/6422350843
  • https://server/product/1607745002
  • https://server/product/0086724882
La parte variable se encuentra en la última parte de la ruta y se convierte en el valor de SKU de las zonas interactivas: 6422350843 , 1607745002 , 0086724882 .
SKU y ID de categoría en la cadena de consulta.
Las direcciones URL de vista rápida grabadas incluyen lo siguiente:
  • 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 este caso, hay dos partes diferentes en la dirección URL. El SKU se almacena en el prodId parámetro y el ID de categoría se almacena en el category= parámetro.
Por lo tanto, las definiciones de puntos interactivos son pares. Es decir, un valor de SKU y una variable adicional llamada categoryId . Los pares resultantes son los siguientes:
  • El SKU es 305466 y categoryId es 1100004 .
  • El SKU es 310181 y categoryId es 1100004 .
  • El SKU es 308706 y categoryId es 1740148 .
Ejemplo
Puede aplicar el mismo enfoque utilizado en los tres ejemplos anteriores a la página web de demostración.
La página web de demostración tiene varias miniaturas de productos, cada una con un botón de vista rápida rotulado "Ver más". Con la herramienta de depuración del explorador web aún activada, haga clic en cada botón y anote las direcciones URL de vista rápida grabadas. Después de activar las cuatro vistas rápidas del producto disponibles en la página, tiene la siguiente lista de solicitudes de vista rápida realizadas en el servidor:
  • /datafeed/Men-Windbreaker.json
  • /datafeed/Men-SimpleHenley.json
  • /datafeed/Men-CamoPullover.json
  • /datafeed/Women-QuiltedDownJacket.json
Si observa estas llamadas al servidor, verá que la información específica del producto solo está presente en la ruta de solicitud. También se observa que la cadena de consulta no se utiliza en absoluto y que hay dos tipos distintos de datos involucrados:
  • El primer tipo es Hombre o Mujer. Puede llamar a esta "categoría de producto".
  • El segundo tipo es el nombre del producto, como CamoPullover. Puede suponer que se trata del SKU del producto.
Dada esta información, toda la URL de vista rápida tiene el siguiente patrón:
/datafeed/$categoryId$-$SKU$.json
En base a este análisis, utilizaría categoryId y SKU para zonas interactivas.
Ya puede cargar una pancarta de imagen y agregarle zonas interactivas mediante la función de imagen interactiva de ventas en Recursos AEM.

(Opcional) Creación de un ajuste preestablecido de visor de imágenes interactivo

Puede optar por utilizar el ajuste preestablecido de visor de imágenes interactivo predeterminado, denominado Shoppable_Banner que se incluye con Recursos AEM. También puede crear su propio ajuste preestablecido de visor personalizado para utilizarlo con imágenes interactivas.
Al crear un ajuste preestablecido de visor de imágenes interactivo personalizado, puede determinar el aspecto de las zonas interactivas en la pancarta de imágenes. Como parte de la creación del ajuste preestablecido de visor, puede elegir utilizar un gráfico de puntos interactivos de una galería de imágenes predefinidas.
Después de guardar el ajuste preestablecido de visor, se activa automáticamente (se activa) en la página de lista de ajustes preestablecidos de visor de Recursos AEM. Esta funcionalidad significa que está visible en el componente Medios interactivos y siempre que se visualiza un recurso. Sin embargo, para *entregar un letrero interactivo con este ajuste preestablecido de visor, *también debe publicar *el ajuste preestablecido de visor (esto es válido para los ajustes preestablecidos de visor personalizados o predeterminados).
Para crear un ajuste preestablecido de visor de imágenes interactivo
  1. En el carril izquierdo, toque Herramientas > Recursos > Ajustes preestablecidos de visor.
  2. Near the upper-right corner of the page, tap Create .
  3. En el cuadro de diálogo Nuevo ajuste preestablecido de visor, escriba un nombre para describir el ajuste preestablecido de visor de letreros interactivo.
    Este es el título que aparecerá en la página de lista de ajustes preestablecidos de visor después de guardarlo.
  4. En el menú desplegable Tipo de medio enriquecido, seleccione Imagen ​interactiva.
  5. Toque Crear .
  6. En la página Editar ajuste preestablecido de visor, toque la ficha Aspecto .
  7. Realice una de las acciones siguientes:
    • Para cargar su propia imagen de zona interactiva que desee utilizar en las imágenes, toque el icono del selector de recursos. En la página Seleccionar contenido, desplácese hasta la imagen de zona interactiva que desee utilizar, selecciónela y, a continuación, toque el icono Marca de verificación en la esquina superior derecha.
    • Para seleccionar una imagen de zona interactiva predefinida, toque el icono Galería de puntos interactivos. En la paleta de la galería de zonas interactivas, toque la imagen de zona interactiva que desee utilizar.
  8. Near the upper-right corner of the page, tap Save .
    Asegúrese de publicar el nuevo ajuste preestablecido de visor.
    Ya está listo para cargar una pancarta de imagen.

Carga de una pancarta de imagen

Si ya ha cargado las imágenes que desea utilizar, continúe con el paso siguiente: Adición de zonas interactivas a un letrero de imagen.
Para cargar una pancarta de imagen
  1. Cargue letreros de imagen que desee convertir en interactivos.
    Ya está listo para añadir zonas interactivas a la pancarta de imágenes; consulte la siguiente tarea a continuación.

Adición de zonas interactivas a una pancarta de imagen

Puede agregar zonas interactivas a una pancarta de imagen mediante el editor de la página Administración de puntos interactivos.
Cuando agrega zonas interactivas, puede definirlas como una visualización emergente de vista rápida, como un hipervínculo o como un fragmento de experiencia.
Consulte Fragmentos de experiencias .
Tenga en cuenta que las herramientas de uso compartido de medios sociales en Imagen interactiva no son compatibles cuando incrusta el visor en un fragmento de experiencia.
 Para solucionar este problema, puede utilizar o crear ajustes preestablecidos de visor que no tengan herramientas de uso compartido en medios sociales. Estos ajustes preestablecidos de visor permiten incrustarlos correctamente en fragmentos de experiencia.
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 aparecerá la imagen interactiva para los clientes.
Cuando se agregan zonas interactivas a una imagen en una imagen interactiva o una pancarta de carrusel, la información de las zonas interactivas se almacena en la misma ubicación de metadatos (en relación con la ubicación de la imagen), independientemente de si se trata de una imagen interactiva o de una pancarta de carrusel. Esta funcionalidad significa que puede reutilizar fácilmente la misma imagen (junto con los datos de puntos interactivos definidos) en cualquier visor.
Sin embargo, tenga en cuenta que los letreros de carrusel admiten mapas de imagen en imágenes que también pueden contener zonas interactivas; una imagen interactiva no. Tenga esto en cuenta si desea crear una imagen interactiva o una pancarta de carrusel que utilice la misma imagen. Puede que desee crear imágenes interactivas y letreros de carrusel con copias independientes de la misma imagen.
Consulte también Pancartas de carrusel .
Si está editando imágenes interactivas con zonas interactivas y recortando la imagen, las zonas interactivas se eliminan.
Adición de zonas interactivas a una pancarta de imagen
  1. En la vista Recursos, desplácese hasta la pancarta de imagen que desee hacer interactiva.
  2. Realice una de las acciones siguientes:
    • Pase el ratón sobre la imagen y, a continuación, toque Seleccionar (icono de marca de verificación). En la barra de herramientas, toque Editar .
    • Pase el ratón sobre la imagen y, a continuación, toque Más acciones (icono de tres puntos) > Editar .
    • Toque la imagen para abrirla en la página Vista de detalles. En la barra de herramientas, toque Editar .
  3. Cerca de la esquina superior izquierda de la página, toque 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, toque Zona interactiva .
  5. Cerca de la esquina superior izquierda de la página Administración de puntos interactivos, toque Zona interactiva .
  6. En la imagen, toque una ubicación en la que desee que aparezca el punto interactivo. Si es necesario, arrastre la zona interactiva para ajustar su ubicación.
  7. Agregue zonas interactivas adicionales según sea necesario mediante la repetición de los pasos a y b.
  8. (Opcional) Para eliminar una zona interactiva, selecciónela en la imagen y, a continuación, toque Eliminar (icono de papelera) en el encabezado Zonas interactivas.
  9. 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.
  10. Realice una de las acciones siguientes:
    • Toque Vista rápida.
      • Si es cliente de AEM Sites o eCommerce, toque o haga clic en el icono del selector de productos (lupa) para abrir la página Seleccionar producto. Toque o haga clic en el producto que desee utilizar y, a continuación, toque Seleccionar ​en la esquina superior derecha de la página para volver a la página de administración de puntos interactivos.
      • Si no es cliente de AEM Sites o eCommerce
        • Consulte Identificación de variables de puntos interactivos; deberá 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 almacenamiento de información), que es un identificador único para cada producto o servicio distinto que ofrezca. El valor de 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 tocada con una vista rápida de SKU concreta.
        • (Opcional) Si hay otras variables dentro de la vista rápida que debe utilizar para identificar un producto, toque Agregar variable genérica. En el campo de texto, especifique una variable adicional. Por ejemplo, category=Mens es una variable agregada.
    • Toque Hipervínculo .
      • Si es cliente de AEM Sites, toque o haga clic en el icono (carpeta) Selector de sitio para ir a una URL. Tenga en cuenta que el método de vinculación basado en URL no es posible si el contenido interactivo tiene vínculos con direcciones URL relativas, en particular vínculos a páginas de AEM Sites.
      • Si es un 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 ficha del explorador (opción predeterminada recomendada) o en la misma ficha.
    Consulte Uso de selectores para obtener más información.
    • Puntee en Fragmento de experiencias .
      • Si es cliente de AEM Sites, toque o haga clic en el icono de búsqueda (lupa) para abrir la página Fragmento de experiencias. Toque o haga clic en el fragmento de experiencias que desee utilizar y, a continuación, toque Seleccionar en la esquina superior derecha de la página para volver a la página de administración de puntos interactivos. Consulte Fragmentos de experiencias .
      • Especifique la anchura y la altura del fragmento de experiencias tal como aparecerán en el letrero.
        Tenga en cuenta que las herramientas de uso compartido de medios sociales en Imagen interactiva no son compatibles cuando incrusta el visor en un fragmento de experiencia.
 Para solucionar este problema, puede utilizar o crear ajustes preestablecidos de visor que no tengan herramientas de uso compartido en medios sociales. Estos ajustes preestablecidos de visor permiten incrustarlos correctamente en fragmentos de experiencia.
  11. Toque Guardar para guardar el trabajo y volver a la página Examinar.
  12. Publique la imagen interactiva. La publicación permite que el letrero se entregue a través de la nube y también genera código incrustado si necesita integrarse con un sitio web de terceros.
    Una vez que haya agregado zonas interactivas y publicado la imagen interactiva, estará listo para agregarla al sitio web existente.
    Si edita imágenes interactivas con zonas interactivas y recorta la imagen, se eliminarán las zonas interactivas.

(Opcional) Vista previa de imágenes interactivas

Puede utilizar Vista previa para ver una representación del aspecto que tendrá la imagen interactiva para los clientes y probar las zonas interactivas de la imagen para asegurarse de que se comportan de la forma esperada.
Cuando esté satisfecho con la imagen interactiva, puede publicarla. Consulte Incrustación del visor de imágenes o vídeos en una página Web. See Linking URLs to your web application . Tenga en cuenta que el método de vinculación basado en URL no es posible si el contenido interactivo tiene vínculos con direcciones URL relativas, en particular vínculos a páginas de AEM Sites. See Adding Dynamic Media Assets to Pages.
Para obtener una vista previa de imágenes interactivas
  1. En la vista Recursos, desplácese hasta una imagen interactiva existente que haya creado y toque para abrirla en Vista previa.
  2. Cerca de la esquina superior izquierda de la página Vista previa, en la lista desplegable Contenido, toque Visores .
  3. En la lista Visores, toque Shoppable_Banner o el nombre del ajuste preestablecido de visor de imágenes interactivo que ha creado.
  4. Toque zonas interactivas en la imagen para probar las acciones asociadas.

Publicación de recursos de imagen interactivos

Consulte Publicación de 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

Una vez que haya cargado una imagen de letrero, agregado zonas interactivas a la imagen y publicado la imagen interactiva, estará listo para agregarla a la página del sitio web.
Si es cliente de AEM Sites, puede añadir la imagen interactiva arrastrando el componente de medios interactivos a la página. See Adding Dynamic Media Assets to Pages.
Si es cliente independiente de Recursos AEM, puede añadir manualmente la imagen interactiva a su sitio web, tal como se describe en esta sección.
  1. Copie el código incrustado de la imagen interactiva publicada. Consulte Incrustación del visor 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, por lo que debe ajustarse automáticamente al área asignada.
Ejemplo
Usando el sitio web de demostración como ejemplo , noten que la imagen de los tres hombres es una IMG etiqueta estática:
<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 quitar la IMG etiqueta y reemplazarla por el código incrustado copiado de Recursos AEM. Puede ver el resultado que muestra la imagen interactiva de ventas en la página con tres puntos interactivos de círculo.
En este punto, los puntos de conexión de la imagen interactiva de ventas del sitio web de demostración son únicamente para fines de visualización; aún no están integrados con las vistas rápidas existentes.
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 en la ruta, donde ZoomView es el componente al que llamar y iscommand es el comando "recortar" del servicio de imágenes que aplica.
Consulte Recortar el comando de servicio de imágenes.
Ya está listo para integrar la imagen interactiva con una vista rápida existente en su sitio web.

Integración de una imagen interactiva con una vista rápida existente

Esta tarea solo se aplica si es cliente independiente de Recursos AEM.
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 que muy probablemente involucre la asistencia de una persona de TI de front-end.
La implementación de vista rápida existente normalmente representa una cadena de acciones interrelacionadas que se producen en la página web en el siguiente orden:
  1. Un usuario activa un elemento en la interfaz de usuario del sitio web.
  2. El código front-end obtiene una URL de vista rápida basada en el elemento de interfaz de usuario que se activó en el paso 1.
  3. El código front-end envía una solicitud de Ajax utilizando la dirección 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 la vista rápida.
  6. De forma opcional, el código front-end convierte los datos de vista rápida cargados en una representación HTML.
  7. El código front-end muestra un cuadro de diálogo o panel modal y representa el contenido HTML en la pantalla para el usuario final.
Es posible que estas llamadas no representen llamadas de API públicas independientes a las que la lógica de página web puede llamar de forma arbitraria. En su lugar, es una llamada encadenada donde 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, en parte, al paso 2, cuando un usuario hace clic en un punto interactivo dentro de la imagen de ventas, el visor gestiona esta interacción del usuario. El visor devuelve un evento a la página web que contiene todos los datos de puntos interactivos añadidos anteriormente a Recursos AEM.
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.
  • Construye una URL de vista rápida basada en los datos de zona interactiva.
  • Activa el proceso de cargar la vista rápida desde el servidor y procesarla en la pantalla para su visualización.
El código incrustado devuelto por Recursos AEM ya tiene un controlador de eventos listo para usar que se comenta, como se muestra 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 por el código específico de la página web en particular.
El proceso de construir la URL de vista rápida es básicamente opuesto al proceso utilizado para identificar las variables de puntos interactivos que se han cubierto anteriormente.
Consulte Identificación de variables de puntos interactivos.
Con los ejemplos anteriores de URL de vista rápida, puede ver, en los siguientes ejemplos, cómo se construye la URL de vista rápida en cada caso:
SKU único, que se encuentra en la cadena de consulta
s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/json?productId=" + inData.sku + "&amp;source=100"; }, });
SKU único, que se encuentra en la ruta de URL
s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/product/" + inData.sku; }, });
SKU y ID de categoría en la cadena de consulta
s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/quickView/product/?category=" + inData.categoryId + "&amp;prodId=" + inData.sku; }, });
El último paso para activar la URL de vista rápida y activar el panel de vista rápida requiere probablemente la asistencia de una persona de TI del cliente de su departamento de TI. Tienen los conocimientos para saber mejor cómo activar con precisión la implementación de Vista rápida desde el paso adecuado, teniendo una URL de vista rápida 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 quickViewActivate controlador, puede utilizar los campos categoryId y SKU disponibles en el inData objeto 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 está activando el cuadro de diálogo Vista rápida mediante una simple llamada loadQuickView() de función. Esta función toma sólo un argumento, que es la URL de datos de vista rápida. Como tal, el último paso necesario para integrar la imagen interactiva de ventas es agregar la siguiente línea de código al quickViewActivate controlador:
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.

Uso de las vistas rápidas para crear ventanas emergentes personalizadas