Promobar

Barra de estado de promoción del carrito. Muestra un label de oferta (ej. "2X1") y un mensaje dinámico que cambia en función de cuántos productos elegibles tiene el cliente en el carrito.

Está pensada para promociones de tipo N×M (2x1, 3x2…): cada entrada del array options corresponde a una cantidad de productos en carrito y define el texto que se mostrará en ese estado.

---

Vista previa

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

---

Comportamiento

• El sistema detecta cuántos productos elegibles (marcados con la promoción activa) hay en el carrito y busca la entrada en options cuyo quantity coincida con ese número.
• Si encuentra la entrada, muestra el text correspondiente en la barra.
• Si la entrada tiene labelTextColor o labelBackgroundColor, esos valores sobreescriben los colores globales del label para ese estado concreto. Si no los tiene, se usan los colores globales.
• El label (label.visible: false) puede ocultarse sin eliminar la barra de mensajes.

---

Configuración

El JSON se introduce en el cuerpo del content asset en Business Manager → Content Assets.

{
  "label": {
    "visible": true,
    "text": "2X1",
    "textColor": "#ffffff",
    "backgroundColor": "#4c7fef"
  },
  "options": [
    {
      "quantity": 0,
      "text": "Add two 'Special Offer' products and get one free."
    },
    {
      "quantity": 1,
      "text": "Add one more 'Special Offer' product to complete your 2for1."
    },
    {
      "quantity": 2,
      "text": "Offer completed. Do you want two more? 4x2! 6x3!",
      "labelTextColor": "#ffffff",
      "labelBackgroundColor": "#28a745"
    },
    {
      "quantity": 3,
      "text": "Add one more 'Special Offer' product to complete your 2x1."
    },
    {
      "quantity": 4,
      "text": "Offer completed. Do you want two more? 6x3! 8x4!"
    },
    {
      "quantity": 5,
      "text": "Add one more 'Special Offer' product to complete your 2for1."
    },
    {
      "quantity": 6,
      "text": "Offer completed."
    }
  ]
}

---

Propiedades

Label

Propiedad	Tipo	Obligatorio	Descripción
label.visible	boolean	Sí	Si false, el label de oferta no se muestra, pero la barra sí.
label.text	string	Sí	Texto del label (ej. "2X1", "3x2").
label.textColor	string	Sí	Color del texto del label. Valor CSS (hex recomendado).
label.backgroundColor	string	Sí	Color de fondo del label. Valor CSS (hex recomendado).

Opciones (options[])

Propiedad	Tipo	Obligatorio	Descripción
options[].quantity	number	Sí	Número de productos elegibles en el carrito que activa esta entrada. Empieza en 0.
options[].text	string	Sí	Mensaje que se muestra en la barra cuando el carrito tiene exactamente quantity productos elegibles.
options[].labelTextColor	string	No	Color del texto del label para este estado. Si se omite, se usa label.textColor.
options[].labelBackgroundColor	string	No	Color de fondo del label para este estado. Si se omite, se usa label.backgroundColor.

---

Notas y consejos

Cubre todos los estados relevantes

Define una entrada en options por cada cantidad posible de productos elegibles que quieras gestionar. Si el carrito alcanza una cantidad sin entrada definida, la barra puede no mostrar mensaje o quedar en el último estado conocido (depende de la implementación).

El patrón habitual para una 2x1 cubre las cantidades 0–N con la siguiente lógica:

quantity	Estado
0	Sin productos aún
1, 3, 5… (impar)	Falta uno para completar
2, 4, 6… (par)	Oferta completada

Cambia el color del label al completar la oferta

Usa labelBackgroundColor en la entrada de "oferta completada" para dar feedback visual de éxito:

{
  "quantity": 2,
  "text": "Offer completed!",
  "labelTextColor": "#ffffff",
  "labelBackgroundColor": "#28a745"
}

Formato de color

Los campos de color aceptan cualquier valor CSS válido (hexadecimal, rgb(), nombre de color). Se recomienda usar hexadecimal para consistencia:

"textColor": "#ffffff",
"backgroundColor": "#4c7fef"