Skip to main content

Customer Area Promos

Define el catálogo de promociones que aparece en el área privada del cliente (dashboard y página "Mis promociones"). Cada ítem del content asset se vincula a una promoción activa de SFCC por ID. Solo se muestran las promociones que estén activas en el momento de la sesión y que tengan habilitada la visibilidad en el área de cliente.

Las promociones se presentan como tarjetas con efecto flip: la cara frontal muestra la imagen y el título; si hay descripción, al pulsar el icono de información la tarjeta se gira y muestra el texto en la cara trasera.

Vista previa​

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

Comportamiento​

  • Doble filtro de visibilidad: Un ítem del content asset solo se muestra si se cumplen las dos condiciones simultáneamente:
    1. La promoción con ese id está activa en SFCC para los grupos del cliente en el momento de la sesión.
    2. La promoción tiene el atributo personalizado isVisibleInCustomerArea = true en Business Manager.
  • Filtrado silencioso: Los ítems que no pasen el filtro se omiten sin aviso. Si un ítem no aparece, comprueba primero que la promoción esté activa y tenga el atributo habilitado.
  • Tarjeta con flip: Si description tiene contenido, la tarjeta muestra un icono de información (i) y permite girarla para leer el texto en la cara trasera. Si description está vacío, la tarjeta solo tiene cara frontal, sin flip.
  • Descripción admite HTML: El campo description se renderiza sin escapar, por lo que acepta etiquetas HTML (<strong>, <em>, <u>, etc.).
  • Visible en dos páginas: El listado de promociones filtradas se pasa a account/dashboard (sección de resumen) y a account/promotions/list (página dedicada "Mis promociones").

Configuración​

Site Preference​

El ID del content asset se configura en Business Manager → Merchant Tools → Site Preferences → Custom Preferences:

customerAreaContentAssetIdForPromos = customer-area-promos

Atributo de la promoción en Business Manager​

Para que una promoción aparezca en el área de cliente, además de estar activa, debe tener habilitado el atributo personalizado en Business Manager → Merchant Tools → Online Marketing → Promotions → [Promoción] → Custom Attributes:

isVisibleInCustomerArea = true

Content Asset​

El body del content asset es un array JSON (no un objeto). Cada elemento representa una promoción con su imagen y textos.

[
  {
    "id": "FREE_SHIPPING_50",
    "title": "Envío gratis en pedidos +50€",
    "image": "images/promos/free-shipping-50.jpg?$staticlink$",
    "description": "<strong>¡Envío gratuito!</strong> en todos tus pedidos superiores a 50€. Válido para península y Baleares."
  },
  {
    "id": "FREE_COUPON_ANTON",
    "title": "Descuento exclusivo para ti",
    "image": "images/promos/coupon-anton.jpg?$staticlink$",
    "description": ""
  },
  {
    "id": "FREE_SHIPPING_70",
    "title": "Envío gratis en pedidos +70€",
    "image": "images/promos/free-shipping-70.jpg?$staticlink$",
    "description": ""
  }
]

Propiedades​

PropiedadTipoObligatorioDescripción
idstringSíID de la promoción en SFCC. Debe coincidir exactamente con el ID de una promoción activa que tenga isVisibleInCustomerArea = true.
titlestringSíTítulo visible en la cara frontal de la tarjeta.
imagestringSíRuta de la imagen de la tarjeta. Debe terminar en ?$staticlink$.
descriptionstringNoTexto visible en la cara trasera de la tarjeta (efecto flip). Admite HTML. Si está vacío (""), la tarjeta no tiene flip ni icono de información.

Notas y consejos​

Ficheros

cartridge/scripts/helpers/accountHelpers.js → getActivePromosForCustomerGroupInCustomerArea()

Lee el ID del content asset desde la site preference customerAreaContentAssetIdForPromos, parsea el JSON y filtra los ítems cruzándolos con las promociones activas y el atributo isVisibleInCustomerArea.

El id debe coincidir exactamente con el ID de la promoción en SFCC

El filtro cruza el id del content asset con el ID de la promoción en Business Manager. Si hay diferencia de mayúsculas, espacios o un error tipográfico, el ítem se descarta silenciosamente y no aparece en el área de cliente aunque la promoción esté activa.

La promoción debe tener isVisibleInCustomerArea = true

No basta con que la promoción esté activa. Es obligatorio que tenga el atributo personalizado isVisibleInCustomerArea activado en Business Manager. Sin este atributo, la promoción se filtra aunque el id coincida.

Imágenes y $staticlink$

Las rutas de imagen deben terminar en ?$staticlink$ para que SFCC resuelva correctamente la ruta estática del cartucho:

"image": "images/promos/free-shipping-50.jpg?$staticlink$"
La descripción activa el efecto flip

Si description tiene contenido, la tarjeta es interactiva: muestra un icono i que al pulsarlo gira la tarjeta y revela el texto. Si no necesitas descripción, deja el campo vacío ("") para que la tarjeta sea estática.

La descripción admite HTML:

"description": "<strong>¡Envío gratuito!</strong> en pedidos superiores a 50€."
El orden del array determina el orden visual

Las tarjetas se muestran en el mismo orden que aparecen en el array JSON. Reordena los ítems para cambiar la disposición en pantalla.