Product Badge

Badge visual que aparece sobre los tiles de producto (tile) y en el PDP (pdp). Cada ubicación se configura de forma independiente dentro del mismo JSON, por lo que el badge del tile y el del PDP pueden tener contenido, imagen y colores distintos.

En cada ubicación el badge 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

Configuración por ubicación: el JSON tiene dos objetos raíz, tile (badge en los tiles de producto) y pdp (badge en la ficha de producto). Ambos comparten la misma estructura y se evalúan por separado.
Badge imagen: si image contiene una ruta válida, se renderiza un elemento <img> con esa ruta. Los campos text y color de esa ubicación 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 (mismo badge en tile y PDP):

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

Modo imagen (mismo badge en tile y PDP):

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

Modos combinados (imagen en el tile y texto en el PDP):

{
  "tile": {
    "image": "images/badges/new-arrival.svg?$staticlink$",
    "text": "",
    "color": {
      "text": "",
      "background": ""
    }
  },
  "pdp": {
    "image": "",
    "text": "new <em>arrival</em>",
    "color": {
      "text": "#FFFFFF",
      "background": "#000000"
    }
  }
}

Propiedades

Raíz

Propiedad	Tipo	Obligatorio	Descripción
`tile`	`object`	Sí	Configuración del badge que se muestra en los tiles de producto.
`pdp`	`object`	Sí	Configuración del badge que se muestra en la ficha de producto (PDP).

Propiedades de `tile` y `pdp`

Ambos objetos comparten exactamente la misma estructura.

Propiedad	Tipo	Obligatorio	Descripción
`tile.image` / `pdp.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$`.
`tile.text` / `pdp.text`	`string`	No	Texto del badge. Admite HTML inline (ej. `<strong>`, `<em>`). Se usa sólo si `image` está vacío.
`tile.color.text` / `pdp.color.text`	`string`	No	Color del texto en formato hexadecimal (ej. `#FFFFFF`). Sólo aplica en modo texto.
`tile.color.background` / `pdp.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

Tile y PDP son independientes

Cada objeto se configura por separado: puedes usar imagen en el tile y texto en el PDP, cambiar los colores de uno sin afectar al otro, o dejar uno de ellos vacío ("image": "" y "text": "") si no quieres mostrar badge en esa ubicación.

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$"

Vista previa​

Comportamiento​

Configuración​

Propiedades​

Raíz​

Propiedades de tile y pdp​

Notas y consejos​