[CMS + Front] Componentes en contenidos estáticos

Introducción

Descripción de la gestión de contenido estático mediante componentes en el CMS del producto TOL. El contenido estático, al incluir componentes, se gestiona de manera headless desde el CMS y se visualiza en TOL y APP de manera sencilla.

La principal novedad de los componentes es la inclusión de un CMS headless 100%, evitando el campo 'cuerpo', que gestionaba el contenido por HTML, provocando que la APP no pudiese consumir el contenido de manera escalable. Estas 2 soluciones coexistirán en el CMS.

Tipos de componentes

Banner

Tipo de componente que genera un banner configurable. El componente BANNER tiene como objetivo el mostrar una imagen que redireccione allí donde desee el cliente.

Campos CMS:

• Título administrativo del componente (interno CMS).
• Imagen del banner (por idioma).
• Cuerpo del banner (por idioma).
• Campos de analítica:
  • Creative name.
  • Creative slot.
  • Promotion name.
  • Promotion code.
• Acciones:
  • Añadir productos al carrito (múltiple).
• Redirecciones:
  • Redirección a campaña de MKT (ID MKT)
  • Redirección a bundle
  • Redirección a ficha de producto - código producto
  • Redirección a agrupación
  • Redirección a landing
  • Redirección a categoría
  • Redirección a URL externa
  • Redirección a receta
  • Redirección a colección de recetas
• Filtros de visualización:
  • Color de fondo
  • Color y grosor de borde
  • Margen en píxeles
  • Slots que ocupa el componente (máximo los slots definidos en el contenido).

Widget en TOL:

TO-DO

Widget en APP:

TO-DO

Producto

Tipo de componente que genera un widget de producto configurable. El componente producto mostrará la información propia del producto a promocionar (que podrá ocupar N slots según defina el cliente), así como una imagen de fondo que podrá ocupar también N slots según defina el cliente.

Campos CMS:

• Título administrativo del componente (interno CMS).
  • Código de producto (obligatorio).
• Imagen alternativa de producto.
• Ver receta (código para redirección).
• Plantilla (posición del producto, máximo los slots definidos en el contenido).
• Tamaño de ficha de producto (máximo los slots definidos en el contenido).
• Imagen del componente (por idioma).
• Cuerpo del componente (por idioma).
• Fondo de información de producto (color).
• Campos de analítica:
  • Creative name.
  • Creative slot.
  • Promotion name.
  • Promotion code.
• Acciones:
  • Añadir productos al carrito (múltiple).
• Redirecciones:
  • Redirección a campaña de MKT (ID MKT)
  • Redirección a bundle
  • Redirección a ficha de producto - código producto
  • Redirección a agrupación
  • Redirección a landing
  • Redirección a categoría
  • Redirección a URL externa
  • Redirección a receta
  • Redirección a colección de recetas
• Filtros de visualización:
  • Color de fondo
  • Color y grosor de borde
  • Margen en píxeles
  • Slots que ocupa el componente (máximo los slots definidos en el contenido).

Widget en TOL:

TO-DO

Widget en APP:

TO-DO

Separador

Único tipo de componente que no ocupa slots. Sirve para crear una línea de separación configurable en píxeles entre componentes en el mismo contenido estático.

Campos CMS:

• Título administrativo del componente (interno CMS).
• Anchura (píxeles).

Detalle en TOL:

TO-DO

Detalle en APP:

TO-DO

HTML

Tipo de componente que permite insertar contenido HTML libre dentro de un contenido estático. A diferencia del resto de componentes headless, el componente HTML renderiza directamente el código HTML proporcionado en el campo "cuerpo", permitiendo máxima flexibilidad para contenidos personalizados.

El componente ejecuta automáticamente los scripts (<script>) incluidos en el HTML tras renderizarse, lo que permite utilizar las funciones JS disponibles y cualquier lógica JavaScript personalizada.

Campos CMS:

• Título administrativo del componente (interno CMS).
• Imagen del componente (por idioma).
• Cuerpo HTML (por idioma) — campo de texto libre donde se introduce el código HTML que se renderizará en el front.
• Campos de analítica:
  • Creative name.
  • Creative slot.
  • Promotion name.
  • Promotion code.
• Acciones:
  • Añadir productos al carrito (múltiple).
• Redirecciones:
  • Redirección a campaña de MKT (ID MKT)
  • Redirección a bundle
  • Redirección a ficha de producto - código producto
  • Redirección a agrupación
  • Redirección a landing
  • Redirección a categoría
  • Redirección a URL externa
  • Redirección a receta
  • Redirección a colección de recetas
• Filtros de visualización:
  • Color de fondo
  • Imagen de fondo
  • Color y grosor de borde
  • Radio de borde (por esquina)
  • Margen en píxeles (top, right, bottom, left)
  • Padding en píxeles (top, right, bottom, left)
  • Ancho máximo
  • Alineación horizontal y vertical
  • Slots que ocupa el componente (máximo los slots definidos en el contenido).

Comportamiento en TOL:

• El HTML del campo "cuerpo" se renderiza dentro de un contenedor <div> utilizando innerHTML.
• Los scripts incluidos en el HTML se ejecutan automáticamente tras la renderización (se recrean los nodos <script> para garantizar su ejecución en el contexto de Angular).
• Se pueden utilizar las funciones JS globales documentadas en Funciones JS directamente desde el HTML (por ejemplo: onclick="goToLogin()").
• Los estilos de visualización (márgenes, padding, bordes, fondo, alineación) se aplican como estilos inline al contenedor principal.

Ejemplo de uso:

<div style="text-align: center;">
  <h2>¡Oferta especial!</h2>
  <p>Descubre nuestras promociones</p>
  <button onclick="searchForPromocion('PROMO123')">Ver promoción</button>
</div>
<script>
  sendAnalyticsCustomEventTrack('view_special_offer');
</script>

Gestión CMS

La gestión de componentes en el CMS es la siguiente:

1. Acceder a la gestión de estáticos en el CMS, como de manera habitual.

Buscador de contenidos estáticos

1. Dentro del formulario de estáticos, disponemos de una pestaña de componentes.

Formulario de contenidos estáticos.

1. CRUD de componentes en el CMS:

   a. Crear un nuevo componente.

   b. Editar un componente.

   c. Actualizar el orden de componentes.

   d. Eliminar un componente.

Acciones en el CMS con componentes

Mensaje cuando modificamos los componentes

1. Otras consideraciones:

   a. ¿Qué ocurre si superamos el número de slots configurados para un estático? Si superamos el número de slots, el front colocará en una nueva fila el componente que genere ese 'salto'. El CMS devolverá un mensaje de aviso de superación de slots.

Mensaje de advertencia en el CMS y gráfico relleno

b. ¿Y si no completamos el número de slots configurados para un estático? El frontal se encargará de encajar el componente de manera automática, y en el cms nos mostrará el número de slots ocupados del total.

Mostramos qué cantidad de slots quedan ocupados por componentes.

¡Es necesario actualizar el contenido para que los cambios en componentes se guarden!

Clicamos en guardar el contenido para que se apliquen los cambios