Cart - Add Extra Item

Widget configurable que aparece en la página de carrito, debajo de la lista de productos añadidos. Permite promocionar un producto específico con imagen, texto y botón de compra directa.

---

Vista previa

---

Comportamiento

• El widget se muestra debajo de los productos del carrito.
• Al hacer clic en la imagen o el contenido de texto, se abre un modal con hasta 4 imágenes del producto, nombre, precio y botón de añadir al carrito.
• Al añadir el producto al carrito, el widget desaparece automáticamente.
• Si el usuario elimina ese producto del carrito, el widget vuelve a aparecer.
• El botón muestra un spinner de carga mientras se procesa la petición.
• Integrado con GTM mediante gtm-list-name="cart-extra-item".

---

Configuración

Preferencia de sitio

El ID del content asset utilizado se define en Business Manager → Site Preferences:

Preferencia	Valor por defecto
cartContentAssetIdForAddExtraItem	cart-add-extra-item

Content Asset

El content asset se configura mediante un JSON en Business Manager → Content Assets.

{
  "visible": true,
  "productId": "PRODUCT_SKU",
  "image": "folder/subfolder/imagen.jpg?$staticlink$",
  "title": "Título del producto",
  "description": "Descripción con soporte de <strong>HTML</strong>.",
  "moreInfo": "Texto informativo secundario con soporte de <strong>HTML</strong>.",
  "showPrice": true,
  "button": "Añadir al carrito"
}

---

Propiedades

Propiedad	Tipo	Obligatorio	Descripción
visible	boolean	Sí	Muestra u oculta el widget en la página.
productId	string	Sí	SKU del producto que se va a añadir al carrito.
image	string	No	URL de imagen de preview personalizada. Si se omite, se usa la imagen del producto.
title	string	No	Título principal del widget. Admite texto plano.
description	string	No	Descripción del producto. Admite HTML.
moreInfo	string	No	Texto secundario con icono de información. Admite HTML.
showPrice	boolean	No	Si es true, muestra el precio del producto en el widget y en el modal.
button	string	No	Texto del botón de añadir al carrito. Si se omite, se muestra solo el icono.

---

Notas y consejos

Ficheros

Controlador

Cart-ShowExtraItem

Plantilla

components/cart/add-extra-item.isml

Imágenes con staticlink

Todas las URLs de imágenes deben terminar con ?$staticlink$ para que SFCC resuelva correctamente la ruta estática.

"image": "content/img/promo-pack.jpg?$staticlink$"

Diseño adaptable

El layout del widget se ajusta automáticamente según los campos activos:

• Si no hay moreInfo ni showPrice, el contenido de texto se centra verticalmente.
• El texto del botón solo se muestra en pantallas mobileLandscape y lg en adelante; en el resto se muestra únicamente el icono del carrito.