Product Badge

Badge visual que aparece sobre los tiles de producto y/o en el PDP. Puede ser una imagen gráfica o un texto con estilos inline. Ambos modos son mutuamente excluyentes: si image tiene valor, se muestra la imagen; de lo contrario, se renderiza el texto.

---

Vista previa

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

---

Comportamiento

• Badge imagen: si image contiene una ruta válida, se renderiza un elemento <img> con esa ruta. Los campos text y color se ignoran.
• Badge texto: si image está vacío, se muestra el contenido de text (admite HTML inline) con el color de texto y fondo definidos en color.
• HTML en text: se pueden usar etiquetas inline para dar formato parcial al texto (ej. <strong>, <em>).
• Colores: únicamente válidos en modo texto. Se aplican como color y background-color del elemento del badge.

---

Configuración

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

Modo texto:

{
  "image": "",
  "text": "<strong>best</strong> seller",
  "color": {
    "text": "#FFFFFF",
    "background": "#000000"
  }
}

Modo imagen:

{
  "image": "images/badges/new-arrival.svg?$staticlink$",
  "text": "",
  "color": {
    "text": "",
    "background": ""
  }
}

---

Propiedades

Propiedad	Tipo	Obligatorio	Descripción
image	string	No	Ruta de la imagen del badge. Si tiene valor, se usa la imagen y se ignoran text y color. Debe terminar en ?$staticlink$.
text	string	No	Texto del badge. Admite HTML inline (ej. <strong>, <em>). Se usa sólo si image está vacío.
color.text	string	No	Color del texto en formato hexadecimal (ej. #FFFFFF). Sólo aplica en modo texto.
color.background	string	No	Color de fondo en formato hexadecimal (ej. #000000). Sólo aplica en modo texto.

---

Notas y consejos

Fichero de plantilla

content/productBadge.isml

Formato de color: solo hexadecimal

Los campos de color únicamente aceptan valores en formato hexadecimal de 6 dígitos:

"text": "#FFFFFF",
"background": "#000000"

No uses rgb(), nombres de color CSS ni abreviaturas de 3 dígitos.

HTML inline en text

El campo text renderiza HTML sin escapar. Puedes resaltar parte del texto con negritas o cursivas:

"text": "<strong>best</strong> seller"
"text": "new <em>arrival</em>"

Evita etiquetas de bloque (<p>, <div>) ya que el badge es un elemento inline.

Imágenes: recuerda ?$staticlink$

Si usas modo imagen, la ruta debe terminar en ?$staticlink$:

"image": "images/badges/sale.svg?$staticlink$"