Banner de carrusel

Los banners de carrusel permiten a los especialistas en marketing impulsar la conversión creando fácilmente contenido promocional giratorio interactivo y entregándolo a cualquier pantalla.

La creación y modificación del contenido de los titulares promocionales puede llevar mucho tiempo, lo que limita su capacidad de publicar rápidamente contenido nuevo o de dirigirlo mejor. Los banners de carrusel le permiten crear o modificar rápidamente banners giratorios y añadir interactividad, como la vinculación de puntos interactivos a los detalles del producto o recursos relacionados. Puede enviarlos a cualquier pantalla, lo que le permite llevar el nuevo contenido promocional al mercado más rápido.

Los titulares de carrusel se designan mediante un banner con la palabra CAROUSELSET:

En su sitio web, un banner de carrusel puede tener el siguiente aspecto:

Aquí puede navegar por las imágenes seleccionando los números. Además, las diapositivas giran automáticamente en función de un intervalo de tiempo que se pueda personalizar. Las imágenes de un banner de carrusel admiten zonas interactivas y mapas de imágenes. Los usuarios pueden seleccionar o ir a un hipervínculo o acceder a una ventana de vista rápida.

En este ejemplo, un usuario ha seleccionado un mapa de imagen y accedió a la ventana Vista rápida para guantes:

Ver cómo se crean los titulares de carrusel

Mire este tutorial en cómo se crean los titulares de carrusel (Duración: 10 minutos y 33 segundos). También aprenderá a previsualizar, editar y enviar banners de carrusel.

Inicio rápido: Banner de carrusel

Para ponerle en marcha rápidamente:

1. Identificar las variables de zona interactiva y mapa de imagen (solo para clientes que utilizan Adobe Experience Manager Assets + Dynamic Media)

   Comience por identificar las variables dinámicas que utiliza la implementación de vista rápida existente. De este modo, podrá introducir los puntos interactivos y los datos de mapas de imágenes correctamente durante el proceso de creación de banners de carrusel en Experience Manager Assets.

2. Opcional: Cree un ajuste preestablecido de visualizador de conjuntos de carrusel, según sea necesario.

   Si es administrador, puede personalizar el comportamiento y el aspecto del carrusel creando su propio ajuste preestablecido de visualizador de carrusel. La principal ventaja es que puede reutilizar este ajuste preestablecido de visualizador personalizado para varios carruseles. Sin embargo, los usuarios pueden personalizar de forma opcional el comportamiento y el aspecto del carrusel directamente durante la creación del carrusel. Se prefiere este enfoque cuando se desea un diseño específico para un carrusel determinado.

3. Cargar un titular de imagen.

   Cargue banners de imagen que desee hacer interactivos.

4. Crear un conjunto de carrusel.

   En Conjuntos de carruseles, los usuarios navegan por las imágenes de banner y seleccionan zonas interactivas o mapas de imágenes para acceder al contenido relevante.

   Para crear un conjunto de carrusel en Assets, seleccione Crear y, a continuación, seleccione Conjuntos de carrusel. Agregue recursos a las diapositivas y seleccione Guardar. También puede editar el aspecto y el comportamiento del carrusel directamente en el editor.

5. Agregar zonas interactivas o mapas de imágenes a un titular de imagen.

   Agregue una o más zonas interactivas o mapas de imágenes a un banner de imagen. A continuación, asocie cada uno de ellos a una acción, como un vínculo, una vista rápida o un fragmento de experiencia. Después de agregar zonas interactivas o mapas de imágenes, para finalizar esta tarea, publique el conjunto de carrusel. La publicación crea el código incrustado que puede utilizar para copiar y aplicar a la página de aterrizaje del sitio web.

   Consulte (Opcional) Vista previa de letreros de carrusel - Opcional. Si lo desea, puede ver una representación del conjunto de carrusel y probar su interactividad.

6. Publicar titulares de carrusel.

   Puede publicar un conjunto de carrusel como lo haría con cualquier recurso. En Assets, vaya al conjunto de carrusel, selecciónelo y seleccione Publicación. Al publicar un conjunto de carrusel, se activa la dirección URL y la cadena Incrustar.

7. Realice una de las acciones siguientes:

   • Agregue un banner de carrusel a la página de su sitio webPuede añadir la URL del banner de carrusel o incrustar el código que ha copiado en la página del sitio web.

     • Integrar el banner de carrusel con una vista rápida existente. Si utiliza un sistema de administración de contenido web de terceros, debe integrar el nuevo titular de carrusel con la implementación de vista rápida existente en el sitio web.

   • Agregue un banner de carrusel a su sitio web en Experience Manager. Si es cliente de Experience Manager Sites, puede añadir el conjunto de carrusel directamente a la página mediante el componente Medios interactivos.

Si debe editar los conjuntos de carrusel, consulte Editar conjuntos de carrusel. Además, puede ver y editar Propiedades del conjunto de carrusel.

Identificar variables de zona interactiva y mapa de imagen

Comience por identificar las variables dinámicas que utiliza la implementación de vista rápida existente. Este método le ayuda a introducir correctamente puntos interactivos o datos de mapa de imagen durante el proceso de creación de conjuntos de carrusel en Experience Manager Assets.

Al agregar zonas interactivas o mapas de imágenes a una imagen de titular, se asigna un SKU (unidad de mantenimiento de existencias). También puede asignar variables adicionales opcionales a cada zona interactiva o mapa de imagen. Estas variables se utilizan más adelante para hacer coincidir puntos interactivos o mapas de imágenes 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 zona interactiva o mapa de imagen. Cada zona interactiva o mapa de imagen que se añada a una imagen de banner debe contener suficiente información para identificar sin ambigüedades el producto en el sistema back-end existente. Al mismo tiempo, asegúrese de que cada zona interactiva o mapa de imagen no incluya más datos de los necesarios. El motivo es que esto haría que el proceso de entrada de datos sea demasiado complejo y en curso, o la administración de mapas de imágenes sea más propensa a errores.

Existen diferentes maneras de identificar un conjunto de variables que se utilizarán para los datos de zona interactiva o mapa de imagen.

A veces es suficiente consultar a los especialistas de TI responsables de la implementación de Quickview existente. Es probable que sepan cuál es el conjunto mínimo de datos para identificar la vista rápida en el sistema. Sin embargo, 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 un Vista rápida botón.
• El sitio web envía una solicitud de Ajax al back-end 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, déclencheur la vista rápida y adquiera 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 (Windows®) o Comando-Opción-I (Mac) para abrir el panel de herramientas para desarrolladores. Seleccione la pestaña Red.
• En Firefox, puede activar el complemento Firebug pulsando F12 (Windows®) o Comando-Opción-I (Mac). Utilice su ficha Red o la herramienta Inspector integrada y su pestaña Red.

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 porción de cadena de consulta compleja y su tipo MIME de respuesta es text/html, text/xmlo 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 tienen 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 o mapas de imagen a la imagen del banner.

Sin embargo, en casos complejos, la URL de vista rápida tiene diferentes elementos además del SKU. Algunos de estos elementos incluyen 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 zona interactiva o mapa de imagen en la función de titular de carrusel.

Veamos los siguientes ejemplos de direcciones URL de vista rápida y las variables de zona interactiva o mapa de imagen que se obtienen:

Cargar titulares de imagen

Si ya ha cargado las imágenes que desea utilizar, avance al siguiente paso, Crear conjuntos de carrusel. Las imágenes utilizadas en el carrusel deben cargarse una vez que Dynamic Media se haya habilitado.

Para cargar titulares de imagen, consulte Cargar recursos.

Crear conjuntos de carrusel

Para crear conjuntos de carrusel:

1. En Assets, vaya a la carpeta en la que desea crear el conjunto de carrusel y vaya a Crear > Conjunto de carrusel.

2. En la página Editor de banners de carrusel , seleccione Toque para abrir el Selector de recursos para seleccionar la imagen de la primera diapositiva.

   En la página Editor de banners de carrusel , realice una de las acciones siguientes:

   • Cerca de la esquina superior izquierda de la página, seleccione Agregar diapositiva icono.

   • Cerca del centro de la página, seleccione Toque para abrir el Selector de recursos.

   Seleccione para seleccionar los recursos que desea incluir en el conjunto de carrusel. Los recursos seleccionados tienen un icono de marca de verificación sobre ellos. Cuando haya terminado, seleccione , cerca de la esquina superior derecha de la página Select.

   Con el Selector de recursos, puede buscar recursos escribiendo una palabra clave y seleccionando Devuelve. También puede aplicar filtros para restringir los resultados de búsqueda. Puede filtrar por ruta, colección, tipo de archivo y etiqueta. Seleccione el filtro y, a continuación, el Filtro en la barra de herramientas. Para cambiar la vista, seleccione el icono Ver y seleccione Vista de columna, Vista de tarjeta o Vista de lista.

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

3. Siga agregando diapositivas hasta que haya añadido todas las imágenes que desee rotar en el conjunto de carrusel.

4. (Opcional) Realice cualquiera de las siguientes acciones:

   • Si es necesario, arrastre las diapositivas para reordenar las imágenes en la lista de conjuntos.

   • Para eliminar una imagen, seleccione la imagen y, a continuación, seleccione Eliminar diapositiva en la barra de herramientas.

   • Para aplicar un ajuste preestablecido, cerca de la esquina superior derecha de la página, seleccione la lista desplegable de ajustes preestablecidos y, a continuación, seleccione un ajuste preestablecido para aplicarlo al conjunto a la vez.

   Para eliminar una diapositiva, selecciónela. En la barra de herramientas, seleccione Eliminar diapositiva en la barra de herramientas. Para mover una diapositiva, seleccione el icono de reordenación y desplácese a la ubicación deseada.

5. Después de agregar las imágenes en las diapositivas, puede agregar un punto interactivo, un mapa de imágenes o ambos a la imagen. Consulte Agregar zonas interactivas o mapas de imágenes a un titular de imagen.

6. Puede cambiar el diseño visual y el comportamiento de los conjuntos de carrusel. Seleccione el Comportamiento y Aspecto fichas si desea ajustar el aspecto del titular de carrusel o el comportamiento de componentes específicos. Consulte Administrar ajustes preestablecidos de visor para obtener más información sobre cómo utilizar el editor de visores.

   NOTA

   Para los titulares de carrusel, puede ajustar lo siguiente:

   • Duración que muestra una imagen. De forma predeterminada, cada imagen se muestra durante 9 segundos.
   • Animación. De forma predeterminada, cada transición de diapositiva es un fundido. Puede cambiarlo a una transición de diapositiva.
   • Estilo de los botones. Los usuarios pueden rotar por los banners seleccionando cada punto o número. Puede cambiar dónde aparecen los botones del indicador de conjunto (y si son numéricos o de un estilo punteado) y su tamaño.
   • Cambie el estilo de resaltado de un mapa de imagen o el icono utilizado para las zonas interactivas.
   • Antes de editar un ajuste preestablecido de visualizador, elija el estilo en el que desea basar el ajuste preestablecido. Si no elige un estilo, al comenzar a editar el ajuste preestablecido de visualizador, perderá todos los cambios si cambia a otro ajuste preestablecido.

   También puede previsualizar el aspecto del banner de carrusel. Consulte (Opcional) Vista previa de letreros de carrusel.

7. Select Guardar cuando termine.

Agregar zonas interactivas o mapas de imágenes a un titular de imagen

Puede agregar zonas interactivas o mapas de imágenes a un banner mediante el editor de conjuntos de carrusel.

Al agregar zonas interactivas o mapas de imágenes, puede definirlas como una visualización emergente de vista rápida, como un hipervínculo o un fragmento de experiencia.

Consulte Fragmento de experiencia.

Cuando agregue zonas interactivas o mapas de imágenes a una imagen, recuerde guardar su trabajo. 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 el banner de carrusel, puede usar la opción Vista previa para ver una representación de cómo el banner de carrusel aparece para los clientes.

Consulte (Opcional) Vista previa de letreros de carrusel.

Para agregar zonas interactivas o mapas de imágenes a un titular de imagen:

1. En Assets, desplácese hasta el conjunto de carrusel que desee interactuar.

2. Seleccione el conjunto de carrusel y seleccione Editar. Se abre el Editor del visualizador de carrusel.

3. Seleccione la diapositiva que desee convertir en interactiva.

4. Cerca de la esquina superior izquierda de la página, seleccione Zona interactiva o Mapa de imágenes.

5. Realice una de las siguientes acciones:

   • Para zonas interactivas: En la imagen, seleccione una ubicación en la que desee que aparezca el punto interactivo.
   • Para mapas de imágenes: En la imagen, arrastre desde la parte superior izquierda a la parte inferior derecha para crear el área del mapa de imagen. Para ajustar el tamaño del mapa de imagen, arrastre las esquinas.

   Si es necesario, arrastre el punto interactivo o el mapa de imagen a una nueva ubicación. O bien, utilice las teclas de flecha del teclado para controlar la posición de una zona interactiva seleccionada. Agregue más zonas interactivas o mapas de imágenes según sea necesario.

   Para eliminar una zona interactiva o un mapa de imagen, seleccione la opción Acciones pestaña . En el Mapas y zonas interactivas del Tipo seleccionado lista desplegable, seleccione el nombre del punto interactivo o del mapa de imagen que desea eliminar. Seleccione el Papelera junto al menú y, a continuación, seleccione Eliminar.

6. En el campo de texto Nombre , escriba el nombre del punto interactivo o del mapa de imagen. Este nombre también aparece en la sección Mapas y puntos interactivos lista desplegable. Proporcionar un nombre facilita la identificación del punto interactivo o del mapa de imagen si decide cambiarlo en el futuro.

7. Realice una de las siguientes acciones en la sección Acciones pestaña:

   • Select Vista rápida.

     • Si es un Experience Manager Sites cliente, seleccione el icono Selector de producto (lupa) para abrir la página Seleccionar producto . Para volver al Editor de letreros de carrusel, seleccione el producto que desee utilizar y, a continuación, seleccione la marca de verificación en la esquina superior derecha de la página.

     • Si no es un Experience Manager Sites cliente:

       • Defina las variables. Consulte Identificación de variables de zona interactiva.

       • 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. El sistema ahora sabe que asocia 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=Mens es una variable agregada.

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

   • Select Hipervínculo.

     • Si es cliente de Experience Manager Sites, seleccione el icono Selector de sitio (carpeta) para desplazarse a una dirección URL.

       NOTA

       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 Experience Manager 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 pestaña del explorador (opción predeterminada recomendada) o en la misma pestaña.

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

   • Select Fragmento de experiencia.

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

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

       NOTA

       Las herramientas de uso compartido de redes sociales en Carousel Banner 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.

   

   También puede previsualizar el aspecto del banner de carrusel. Consulte (Opcional) Vista previa de letreros de carrusel.

8. Seleccione Guardar.

9. Publique el conjunto de carrusel. La publicación crea el código incrustado o la URL que puede usar en la página del sitio web. Si es cliente de Experience Manager Sites, agregue el conjunto de carrusel directamente a su página web.

   Consulte Publicar recursos.

   Consulte Agregar un conjunto de carrusel a la página de aterrizaje del sitio web

Editar conjuntos de carrusel

Puede realizar varias tareas de edición en conjuntos de carrusel, como las siguientes:

• Agregue diapositivas a un conjunto de carrusel. Consulte también Trabajar con selectores.
• Vuelva a ordenar las diapositivas en el conjunto de carrusel.
• Eliminar recursos del conjunto de carrusel.
• Aplique un ajuste preestablecido de visualizador.
• Eliminar el conjunto de carrusel.
• Agregue o edite zonas interactivas y mapas de imágenes. Consulte también Trabajar con selectores.

Para editar conjuntos de carrusel:

1. Realice una de las siguientes acciones:

   • Pase el ratón sobre un recurso de conjunto de carrusel y, a continuación, seleccione Editar (icono de lápiz).

   • Pase el ratón sobre un recurso de conjunto de carrusel y seleccione Select (icono de marca de verificación) y, en la barra de herramientas, seleccione Editar.

   • Seleccione un recurso de conjunto de carrusel y, a continuación, en la esquina superior izquierda de la página, seleccione Editar (icono de lápiz).

2. Para editar el conjunto de carrusel, realice una de las acciones siguientes:

   • Para añadir una diapositiva, seleccione Agregar diapositiva icono. Vaya al recurso que desea agregar a esa diapositiva y, a continuación, seleccione la marca de verificación.
   • Para reordenar las diapositivas, arrastre una diapositiva a una nueva ubicación (seleccione el icono de reordenar para mover elementos).
   • Para añadir una zona interactiva o un mapa de imagen, seleccione los iconos de zona interactiva o mapa de imagen y consulte Agregar zonas interactivas y mapas de imágenes a un titular de imagen.
   • Para editar el aspecto o el comportamiento del conjunto de carrusel, seleccione la opción Aspecto o Comportamiento y, a continuación, defina las opciones que desee.
   • Para editar zonas interactivas o mapas de imágenes, en la diapositiva adecuada, seleccione una zona interactiva o un mapa de imágenes. En el Acciones , realice los cambios.
   • Para eliminar una diapositiva, selecciónela y luego seleccione Eliminar diapositiva en la barra de herramientas.
   • Para aplicar un ajuste preestablecido, cerca de la esquina superior derecha de la página, seleccione la opción Ajuste preestablecido lista desplegable y, a continuación, seleccione un ajuste preestablecido de visualizador.
   • Para eliminar un conjunto de carrusel completo, vaya al conjunto de carrusel, selecciónelo y, a continuación, seleccione Eliminar.
   NOTA

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

(Opcional) Vista previa de letreros de carrusel

Puede utilizar Vista previa para ver cómo aparece el banner de carrusel para los clientes. El uso de Vista previa también permite probar las zonas interactivas y los mapas de imágenes del banner de carrusel para asegurarse de que se comportan del modo esperado.

Cuando esté satisfecho con el banner de carrusel, puede publicarlo.
Consulte Incrustar el visualizador de imágenes o vídeos en una página web.
Consulte Vincular URL a la 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 Experience Manager Sites.
Consulte Agregar recursos de Dynamic Media a páginas.

Puede obtener una vista previa de los banners de carrusel desde el Editor de carrusel (método preferido) o desde el Visualizadores lista.

Para previsualizar de forma opcional los titulares de carrusel:

1. En Recursos, vaya a un banner de carrusel existente que haya creado y seleccione para abrirlo.

2. Seleccione Editar.

3. En la lista de ajustes preestablecidos de visor situada en la esquina derecha de la barra de herramientas, seleccione un visor para previsualizar el titular del carrusel.

   

4. Seleccione Vista previa.

5. Para probar las acciones asociadas, seleccione las zonas interactivas o los mapas de imagen de la imagen.

Para previsualizar los banners de carrusel desde la lista Visualizadores:

1. En Recursos, vaya a un banner de carrusel existente que haya creado y seleccione para abrirlo.
2. Cerca de la esquina superior izquierda de la página Vista previa, seleccione el icono Contenido .
3. En el Visualizadores en el panel de la izquierda de la página, seleccione el nombre del ajuste preestablecido de visor de banners de carrusel que desee utilizar.
4. Para probar las acciones asociadas, seleccione las zonas interactivas o los mapas de imagen de la imagen.

Publicar titulares de carrusel

Para utilizar el carrusel, debe publicarlo. Al publicar un conjunto de carrusel, se activa la dirección URL y el código incrustado. También publica el carrusel en la nube de Dynamic Media, que está integrada con una CDN para una entrega escalable y con rendimiento.

Consulte Publicar recursos de Dynamic Media para obtener información sobre cómo publicar banners de carrusel.

Agregar un titular de carrusel a la página web

Después de cargar imágenes de banner para crear un carrusel, agregar zonas interactivas o mapas de imágenes, o ambos, al banner. Se ha publicado el conjunto de carrusel. Ya está listo para agregarlo a la página de sitio web existente.

Sin embargo, si es cliente independiente de Experience Manager Assets, puede añadir manualmente el banner de carrusel a la página de aterrizaje de su sitio web.

1. Copie el código incrustado del conjunto de carrusel publicado.
   Consulte Incrustar el visualizador de imágenes o vídeos en una página web.

2. Agregue el código incrustado que copió de Experience Manager Assets a la página web.
   El código incrustado copiado es interactivo, por lo que se ajusta automáticamente al área de incrustación de la página.

Integración del titular de carrusel con una vista rápida existente

Nota: este paso solo se aplica si es cliente independiente de Experience Manager Assets.

El último paso de este proceso es la integración del titular de carrusel con una implementación de vista rápida existente en su sitio web. Cada implementación de Quick View es única y se necesita un enfoque específico que normalmente involucre 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 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 la vista rápida.
6. De forma opcional, el código front-end convierte los datos de Quick View cargados en una representación de HTML.
7. El código front-end muestra un cuadro de diálogo modal o panel y representa el contenido del 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 el titular del carrusel sustituye al paso 1 y al paso 2 parcialmente, cuando un usuario selecciona un punto interactivo o un mapa de imagen, el visor gestiona esta interacción. El visor devuelve un evento a la página web que contiene todos los datos de zona interactiva o mapa de imagen agregados anteriormente.

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

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

El código incrustado devuelto por Experience Manager Assets ya tiene un controlador de eventos listo para usar en su lugar con comentarios.

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 y mapa de imagen que se abarcaron anteriormente.

Consulte Identificar las variables de zona interactiva y mapa de imagen.

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 déclencheur precisas de la implementación de la vista rápida desde el paso adecuado, teniendo una URL de vista rápida lista para usar.

Crear ventanas emergentes personalizadas con Quickview

Consulte Crear ventanas emergentes personalizadas con Quickview.