Hellobar

Barra de mensajes en la parte superior del sitio. Muestra una lista de mensajes que rotan con animación. Cada mensaje tiene una versión larga (pantallas grandes) y una corta (móvil), puede ser clicable y puede incluir su propio contador regresivo.

---

Vista previa

Sin imagen disponible aún. Añade una captura en ./img/hellobar.jpg y descomenta la línea siguiente.

---

Comportamiento

• Los mensajes rotan automáticamente cada time_between_messages milisegundos.
• animation controla el efecto de transición: "marquee" (desplazamiento continuo) o "slide" (deslizamiento entre mensajes).
• En pantallas pequeñas se muestra short si tiene valor; en pantallas grandes se muestra large.
• Si link tiene valor, el mensaje completo queda envuelto en un <a>.
• Cada mensaje puede tener su propio countdown independiente.
• style.color define los colores globales de la barra (fondo y texto).

---

Configuración

El JSON se introduce en el body del content slot de tipo HTML en Business Manager → Content Slots.

{
  "animation": "slide",
  "time_between_messages": 4000,
  "style": {
    "color": {
      "background": "#CEFF02",
      "text": "#000000"
    }
  },
  "messages": [
    {
      "large": "<i>2x1</i> Llévate dos gafas y paga solo una. <a href='$url(\"Search-Show\",\"cgid\",\"outlet\")$'>Ver oferta</a>",
      "short": "2x1 en gafas seleccionadas",
      "link": "$url('Search-Show', 'cgid', 'outlet')$",
      "countdown": {
        "start": "Jun 01, 2025 00:00:00",
        "end": "Jun 30, 2025 23:59:59",
        "option": {
          "visible": true,
          "type": "simple",
          "show_days": true,
          "show_labels": true,
          "is_bold": true
        },
        "label": {
          "days": "d",
          "hours": "h",
          "minutes": "m",
          "seconds": "s"
        },
        "color": {
          "text": "#000000",
          "background": "transparent",
          "background_opacity": "0"
        }
      }
    },
    {
      "large": "Envío gratuito en pedidos superiores a 50€",
      "short": "Envío gratis +50€",
      "link": ""
    }
  ]
}

---

Propiedades

Raíz y estilo

Propiedad	Tipo	Obligatorio	Descripción
animation	string	Sí	Tipo de animación: "marquee" (desplazamiento continuo) o "slide" (deslizamiento).
time_between_messages	number	Sí	Tiempo en milisegundos entre la rotación de mensajes.
style.color.background	string	No	Color de fondo de la barra (hexadecimal).
style.color.text	string	No	Color del texto de la barra (hexadecimal).

Mensajes (messages[])

Propiedad	Tipo	Obligatorio	Descripción
messages[].large	string	Sí	Mensaje completo mostrado en pantallas grandes. Admite HTML (<strong>, <a>, <i>, etc.).
messages[].short	string	No	Versión corta del mensaje para móvil. Si está vacío, se muestra large en todos los tamaños.
messages[].link	string	No	URL de destino: envuelve el mensaje completo en un <a>. Admite expresiones $url de SFCC.
messages[].countdown	object	No	Countdown integrado en el mensaje. Ver estructura a continuación.

Countdown por mensaje (messages[].countdown)

Misma estructura que el content asset Countdown. El campo type admite además "simple" (texto plano, sin animación flip):

Propiedad	Tipo	Descripción
countdown.start	string	Fecha de inicio: Jan 01, 2025 09:30:00.
countdown.end	string	Fecha de fin: Jan 01, 2025 23:59:59. Al superarse, el contador desaparece.
countdown.option.visible	boolean	Si false, el countdown no se muestra.
countdown.option.type	string	"simple" (texto) o "flipdown" (animación de tarjetas).
countdown.option.show_days	boolean	Muestra el contador de días.
countdown.option.show_labels	boolean	Muestra las etiquetas de unidades.
countdown.option.is_bold	boolean	Números en negrita.
countdown.label.days/hours/minutes/seconds	string	Etiquetas de unidades (ej. "d", "días").
countdown.color.text	string	Color del texto del contador.
countdown.color.background	string	Color de fondo del contador.
countdown.color.background_opacity	string	Opacidad del fondo (entre "0" y "1").

---

Notas y consejos

Tipo de slot y plantilla

• Tipo: HTML
• Plantilla: slots/html/hellobar.isml

Tiempo entre mensajes en milisegundos

4000  →  4 segundos
6000  →  6 segundos

marquee vs slide

animation	Comportamiento
"marquee"	El texto se desplaza horizontalmente de forma continua (scroll).
"slide"	Los mensajes aparecen y desaparecen con una transición de deslizamiento.

Mensaje largo y corto

short es opcional: si está vacío, large se muestra en todos los tamaños. Úsalo cuando el mensaje completo es demasiado largo para móvil:

"large": "Promoción 2x1 en gafas de sol seleccionadas. Válida hasta el 30 de junio.",
"short": "2x1 en gafas — hasta el 30 jun"

Countdown de tipo "simple" en la hellobar

A diferencia del flipdown (tarjetas animadas), el tipo "simple" muestra el contador como texto plano inline, lo que encaja mejor en el espacio limitado de la hellobar.