> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Bloque Product add-on
> El bloque Product add-on del Aftersell Cart: ofrece un producto específico como adición rápida dentro del drawer.
> El bloque **Product add-on** ofrece un único producto específico que eliges como complemento dentro del carrito, promoviendo un producto conocido (una garantía, una muestra, un superventas) como adición rápida directamente en el carrito.
A diferencia de [**Upsells**](/es/aftersell/cart/upsells-block), que muestra productos elegidos por una estrategia, el Product add-on siempre muestra el producto exacto que tú eliges.
## Comportamiento
* **Si no se resuelve ninguna variante activa** — el producto no está establecido, está archivado o está agotado — el bloque no renderiza **nada** en lugar de un botón muerto.
* El control refleja si la línea de complemento *de este propio bloque* está en el carrito, así que desactivarlo elimina la línea que agregó (y no afectará al mismo producto agregado en otro lugar).
* Un precio de comparación aparece tachado cuando hay una rebaja genuina; la etiqueta de "% off" se oculta si el descuento redondea por debajo del 1%.
* La imagen del complemento recurre a la imagen destacada del producto cuando la variante elegida no tiene ninguna.
## Configuraciones
| Configuración | Qué controla | Predeterminado |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------- |
| **Display type** | Cómo aparece el control de agregar: **Toggle** o **Checkbox**. | Toggle |
| **Product** | La variante de producto a ofrecer. Un solo selector cubre ambos. La imagen y el precio provienen de la variante elegida. | Ninguno |
| **Title** | Encabezado de texto enriquecido. | `{{product_title}}` |
| **Price label** | La línea de precio. | `{{price}}` |
| **Description** | Texto de apoyo. | `Add {{product_title}} to your order` |
**Title**, **Price label** y **Description** admiten los mismos cuatro tokens: `{{product_title}}`, `{{price}}`, `{{compare_at_price}}` y `{{savings}}`.
## Ubicación y límites
* **Región:** cuerpo o parte inferior.
* **Máximo:** 3 por estado del carrito. El carrito con artículos y el carrito vacío tienen cada uno su propio cupo.
* **Estado:** tanto carrito con artículos como carrito vacío.
* No se agrega de forma predeterminada. No está bloqueado — puedes eliminarlo u ocultarlo.
## Plantilla personalizada
Admite una [plantilla personalizada](/es/aftersell/cart/custom-templates) desde su pestaña Code, que reemplaza el marcado integrado de este bloque con tu JSX. Estas son las props que recibe.
### Contenido
| Prop | Tipo | Para qué sirve |
| ------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------- |
| `addonTitle` | `string` | Título en texto plano. Úsalo para el texto alternativo y el `aria-label`, y como respaldo cuando no hay título enriquecido. |
| `addonTitleHtml` | `string` | HTML del título de texto enriquecido sanitizado. Vacío cuando no hay ninguno. |
| `descriptionHtml` | `string` | HTML de la descripción de texto enriquecido sanitizado. Vacío cuando no hay ninguna. |
| `formattedPrice` | `string` | Etiqueta de precio con formato de moneda. Vacía cuando no se muestra. |
| `formattedCompareAtPrice` | `string` | Precio de comparación de la variante formateado (MSRP). Vacío cuando no hay ahorro real. |
| `savings` | `string` | Etiqueta de ahorro en porcentaje entero, por ejemplo `25%`. Vacía cuando no hay ahorro. |
| `priceHtml` | `string \| null` | HTML de precio de texto enriquecido sanitizado del campo de precio dedicado. `null` cuando está vacío. |
| `ctaText` | `string` | Etiqueta del botón, para el formato `button`. |
| `imageUrl` | `string` | Imagen del producto. Vacía cuando no hay ninguna. |
| `productUrl` | `string` | URL de la página del producto. Vacía cuando no hay ninguna, en cuyo caso no enlaces la imagen ni el título. |
### Estado y acciones
| Prop | Tipo | Para qué sirve |
| -------------- | ------------------------------------ | --------------------------------------------------------------------------------------------------------------- |
| `variantId` | `number \| null` | Variante resuelta. `null` cuando no hay variante activa, porque el producto no está establecido o está agotado. |
| `format` | `'button' \| 'checkbox' \| 'toggle'` | Cómo agrega el comprador el complemento. Ramifica tu marcado según esto. |
| `isEnabled` | `boolean` | Si el complemento está actualmente en el carrito. |
| `isAdding` | `boolean` | `true` mientras el agregado o la eliminación está en curso. Deshabilita tu control con esto. |
| `handleAdd` | `() => void` | Agrega el complemento. Para el formato `button`. |
| `handleToggle` | `() => void` | Alterna el complemento dentro y fuera del carrito. Para `checkbox` y `toggle`. |
| `isLoading` | `boolean` | `true` mientras el carrito sigue haciendo su primer fetch. |
`format` decide qué handler aplica: `handleAdd` para `button`, `handleToggle` para `checkbox` y `toggle`. Un `variantId` `null` significa que no hay nada que agregar, así que condiciona tu control según él en lugar de llamar a un handler que no puede tener éxito.
## Diseño
Dale estilo a este bloque con su sección **Design** en el panel de configuración. Son anulaciones por bloque que se aplican encima de tu diseño global y recurren a él cuando están en blanco.
### Text
La sección **Text** de Design te permite controlar la tipografía de tres elementos. Usa el selector **Text element** para alternar entre ellos.
**Title** — el nombre del producto. También admite una familia tipográfica personalizada. La negrita y el color del texto se establecen en el Rich Text Editor de arriba (en la pestaña Settings), no aquí.
| Configuración | Qué controla | Predeterminado |
| ------------------ | --------------------------------- | --------------- |
| **Font** | Familia tipográfica del título. | Hereda del tema |
| **Size** | Tamaño de fuente. | `15px` |
| **Line height** | Multiplicador de altura de línea. | `1.33` |
| **Letter spacing** | Espaciado entre caracteres. | Normal |
**Price** — la línea de precio. La negrita y el color del texto se establecen en el Rich Text Editor de arriba.
| Configuración | Qué controla | Predeterminado |
| ------------------ | --------------------------------- | -------------- |
| **Size** | Tamaño de fuente. | `15px` |
| **Line height** | Multiplicador de altura de línea. | `1.33` |
| **Letter spacing** | Espaciado entre caracteres. | Normal |
**Description** — el texto de apoyo. La negrita y el color del texto se establecen en el Rich Text Editor de arriba.
| Configuración | Qué controla | Predeterminado |
| ------------------ | --------------------------------- | -------------- |
| **Size** | Tamaño de fuente. | `14px` |
| **Line height** | Multiplicador de altura de línea. | `1.29` |
| **Letter spacing** | Espaciado entre caracteres. | Normal |
Al hacer clic en un elemento de texto directamente en la vista previa del carrito, se resalta y se abren sus controles en el panel automáticamente.
¿Qué son las configuraciones de diseño? Aprende más aquí: [Configuraciones de diseño](/es/aftersell/cart/design-settings).