List Products

Widget configurable y dinámico que renderiza un listado o carrusel de productos provenientes de una categoría específica de Salesforce Commerce Cloud (SFCC). Es idóneo para destacar novedades, productos más vendidos (best sellers) o colecciones temáticas en la Home, landing pages o páginas promocionales.

---

Vista previa

---

Comportamiento

• Carga Dinámica de Categoría: Obtiene y renderiza automáticamente los productos asignados a la categoría especificada mediante su identificador único category_id.
• Modos de visualización: Permite elegir entre un carrusel interactivo deslizable (carousel: true) o una cuadrícula de cuadrantes estáticos (carousel: false).
• Control de límites: Configura el límite total de productos a cargar (limit_products) y la cantidad de productos que se muestran simultáneamente en pantalla (number_of_visible_products).
• Título superior personalizable: Permite añadir opcionalmente un encabezado principal con una etiqueta HTML dinámica (tag), texto y enlace directo.
• Botón CTA de acción secundaria: Permite configurar un botón "Ver más" o "Ver todo" al final del listado redirigiendo al usuario a la categoría completa.
• Compatibilidad con Enlaces: Admite las expresiones dinámicas estándar de Salesforce Commerce Cloud (SFCC) para mantener las rutas funcionales entre entornos:
  • Categorías y búsquedas: $url('Search-Show', 'cgid', 'ID_CATEGORIA')$
  • Productos: $url('Product-Show', 'pid', 'ID_PRODUCTO')$
  • Páginas de contenido (assets): $url('Page-Show', 'cid', 'ID_PAGINA')$

---

Configuración

Content Asset

El widget se configura mediante un JSON en Business Manager → Content Assets con el ID de recurso correspondiente (por ejemplo, home-best-sellers).

{
  "category_id": "gafas-sol-hombre",
  "fullwidth": false,
  "limit_products": 7,
  "number_of_visible_products": 4,
  "carousel": true,
  "title": {
    "visible": true,
    "tag": "h2",
    "text": "LO MÁS VENDIDO",
    "link": {
      "url": "$url('Search-Show', 'cgid', 'gafas-sol-hombre')$",
      "target": "_self"
    }
  },
  "button": {
    "visible": true,
    "text": "VER TODO",
    "link": {
      "url": "$url('Search-Show', 'cgid', 'gafas-sol-hombre')$",
      "target": "_self"
    }
  }
}

---

Propiedades

Propiedad	Tipo	Obligatorio	Descripción
category_id	string	Sí	ID identificador de la categoría en SFCC de la cual se obtendrán los productos.
fullwidth	boolean	Sí	Si es true, el widget se expande al 100% de la pantalla. Si es false, se enmarca en un contenedor centrado con márgenes.
limit_products	number	Sí	Cantidad máxima de productos que se cargarán en el listado/carrusel.
number_of_visible_products	number	Sí	Cantidad de productos visibles simultáneamente en pantalla (ej. 4).
carousel	boolean	Sí	Si es true, habilita el deslizamiento táctil y de flechas (carrusel). Si es false, renderiza en una cuadrícula (grid) fija.
title	object	No	Configuración del encabezado o título del widget.
title.visible	boolean	Sí	Determina si el título del widget es visible.
title.tag	string	No	Etiqueta HTML para el título (ej. "p", "h2", "h3"). Por defecto suele ser "p".
title.text	string	Sí	El texto visible del título principal.
title.link	object	No	Enlace opcional aplicado sobre el título.
title.link.url	string	Sí	Dirección de destino. Admite expresiones $url de SFCC.
title.link.target	string	No	Comportamiento del enlace al pulsar ("_self" o "_blank").
button	object	No	Configuración de botón CTA superpuesto al final del listado.
button.visible	boolean	Sí	Si es true, muestra el botón físico de redirección al final del widget.
button.text	string	Sí	Etiqueta o texto legible en el interior del botón (ej. "VER TODO").
button.link	object	Sí	Enlace principal del botón CTA.
button.link.url	string	Sí	URL de destino (admite $url de SFCC).
button.link.target	string	No	Atributo target ("_self" o "_blank").

---

Notas y consejos

Ficheros

Plantilla

content/listProducts.isml

Inclusión genérica

Renderizado en cualquier página mediante la etiqueta <iscontentasset aid="ID_DEL_ASSET" />

Enlaces dinámicos ($url)

Se recomienda encarecidamente utilizar las expresiones de $url dinámicas para las categorías y páginas internas. Esto asegura que la navegación no se rompa al migrar cambios de datos entre los entornos de Staging, Sandbox o Producción.

Configurando el Carrusel

Para que la navegación en modo carrusel funcione de forma óptima:

• Asegúrate de que limit_products sea mayor que number_of_visible_products.
• Por ejemplo, configurando limit_products: 8 y number_of_visible_products: 4, el carrusel tendrá 2 páginas completas para que el usuario navegue mediante deslizamiento o flechas.