> ## 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 Rewards
> El bloque Rewards del Aftersell Cart: envío gratis por niveles, descuentos y regalos gratis, incluyendo niveles diferentes por mercado, país o moneda.
> El bloque **Rewards** muestra una barra de progreso hacia niveles de recompensa (envío gratis, un descuento en el pedido o un regalo gratis) que los compradores desbloquean agregando más a su carrito, motivando carritos más grandes al mostrar a los compradores qué tan cerca están de la próxima recompensa y otorgando automáticamente las recompensas que califican. Los niveles pueden variar por mercado, país y moneda.
## Validación de umbrales de niveles
La lista de niveles de cada condición admite hasta **4** niveles. Un bloque Rewards con varias condiciones de mercado, país o moneda almacena hasta 4 por condición y, como la primera condición coincidente es la que se muestra, un mismo comprador ve como máximo 4. El umbral de cada nivel debe ser estrictamente mayor que el del nivel anterior — los umbrales deben estar en orden ascendente. Si el umbral de un nivel es igual o menor que el umbral del nivel previo, aparece un error en línea en el campo de umbral de ese nivel y el botón **Save** queda bloqueado hasta que el problema se resuelva. El nivel afectado se expande automáticamente para que el error sea visible.
Por ejemplo, si el Nivel 1 está establecido en \$100, el Nivel 2 debe establecerse en \$101 o más.
## Comportamiento
* El progreso **excluye** del total las líneas de regalos de recompensa, las líneas de product add-on, las líneas de protección de envío y las tarjetas de regalo, para que esos artículos no inflen el avance del comprador hacia una recompensa.
* El mensaje muestra el monto o la cantidad restante hasta el siguiente nivel, o el mensaje de completado una vez que se alcanzan todos los niveles.
* **Los regalos gratis se otorgan automáticamente.** Cuando un comprador alcanza un nivel de regalo, el regalo se agrega al carrito; si cae por debajo, el regalo se elimina. Con las recompensas acumulables desactivadas, solo se otorga el regalo del nivel más alto alcanzado.
* **Add back removed free gifts** controla qué sucede cuando un comprador elimina manualmente un regalo otorgado automáticamente. Cuando está habilitado (el valor predeterminado), el regalo se vuelve a agregar automáticamente en la siguiente actualización del carrito. Cuando está deshabilitado, la eliminación se respeta y el regalo permanece fuera del carrito durante el resto de esa sesión, para que los compradores no tengan que pelear con el carrito para rechazar un regalo.
## Configuraciones
| Configuración | Qué controla | Predeterminado |
| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------- |
| **Rewards calculation** | Si el progreso se mide por **Cart total (\$)** o **Cart quantity (#)**. | Cart total (\$) |
| **Stack rewards across tiers** | Activado: se aplica cada recompensa que el comprador desbloquea, hasta el nivel más alto alcanzado. Desactivado: se aplica solo la recompensa del nivel más alto desbloqueado. | Activado |
| **Add back removed free gifts** | Vuelve a agregar un regalo gratis ganado después de que el comprador lo elimina. | Activado |
| **Show tier icons** | Si los iconos de nivel aparecen en la barra. | Activado |
| **Show tier labels** | Si el texto de la etiqueta aparece en cada marcador de nivel de la barra. | Desactivado |
| **Text after completing full rewards bar** | Texto enriquecido que se muestra una vez que se alcanzan todos los niveles. | `All rewards unlocked!` |
| **Tiers** | Los niveles de recompensa (abajo). Hasta **4** por condición; el panel muestra un contador `n/4` y deshabilita **Add tier** al llegar al límite. | Ninguno |
Cada **nivel** se expande para mostrar:
| Configuración del nivel | Qué controla | Predeterminado |
| ------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
| **Reward type** | **Free shipping**, **Order discount** o **Free gift**. Cambiarlo restablece el título y la etiqueta de la barra de progreso de ese nivel al texto predeterminado del nuevo tipo. | Free shipping |
| **Threshold (\$)** / **Threshold (items)** | El total del carrito o la cantidad de artículos que desbloquea el nivel. La etiqueta sigue a **Rewards calculation**. Mínimo `1`. | `50` |
| **Discount value type** | Solo para descuentos en el pedido: **Percentage (%)** o **Fixed amount (\$)**. | Percentage (%) |
| **Percentage off** / **Amount off** | Solo para descuentos en el pedido: el monto del descuento. Los porcentajes tienen un tope de 100. | `10` |
| **Title before achieving tier** | Mensaje de texto enriquecido que se muestra mientras al comprador todavía le falta para alcanzar el nivel. Admite el token `{{amount}}`. | `You're {{amount}} away from free shipping!` |
| **Progress bar label** | La etiqueta mostrada en el marcador del nivel. | `Free shipping` |
| **Gift products** | Solo para regalos gratis: el/los producto(s)/variante(s) otorgados, hasta **3** por nivel. | Ninguno |
## Ubicación y límites
* **Región:** cualquiera (parte superior, cuerpo o parte inferior).
* **Máximo:** 1 por estado del carrito. El carrito con artículos y el carrito vacío tienen cada uno el suyo.
* **Estado:** tanto carrito con artículos como carrito vacío.
* No se agrega de forma predeterminada. No está bloqueado, así que puedes eliminarlo u ocultarlo.
## Recompensas por mercado
Rewards es el bloque que hoy tiene la UI completa de **Conditions**: define múltiples conjuntos de niveles, cada uno dirigido a un **mercado de Shopify**, un **país del cliente** o una **moneda del cliente** (**In** o **Not in**). La primera condición coincidente se muestra al comprador. Si ninguna coincide, el bloque no renderiza nada para él.
Cada condición es una tarjeta en el panel de configuración (**When** + condición). Debajo, una sección **Display** contiene los niveles para esa condición. Mantén las reglas específicas por encima de una condición comodín de **All buyers**. El orden es la prioridad, no una combinación de todas las coincidencias.
No puedes eliminar la última condición (siempre se requiere al menos una). La vista previa del editor no evalúa al comprador real; selecciona una condición en el panel para previsualizar esa variante.
Para saber cómo se relacionan las condiciones con el interruptor del ojo y otros bloques, consulta [Mostrar u ocultar por mercado, país o moneda](/es/aftersell/cart/blocks-overview#show-or-hide-by-market-country-or-currency).
## 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.
| Prop | Tipo | Para qué sirve |
| -------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| `milestones` | `Milestone[]` | Los niveles de recompensa, en orden. Ver abajo. |
| `rewardsMessageHtml` | `string` | El mensaje de progreso o de completado como HTML sanitizado. |
| `showIcons` | `boolean` | Si el comerciante habilitó los iconos de nivel. |
| `showTierLabels` | `boolean` | Si el comerciante habilitó las etiquetas de la barra de niveles. |
| `isLoading` | `boolean` | Siempre `false` aquí: el bloque renderiza su skeleton integrado durante la carga y solo llama a tu plantilla una vez que el carrito está listo. |
Cada `Milestone`:
| Campo | Tipo | Para qué sirve |
| ----------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `id` | `string` | Clave estable para el nivel. Úsala como tu `key` de React. |
| `label` | `string` | La etiqueta del nivel, como texto plano. |
| `icon` | `ReactElement \| null` | Elemento de icono pre-renderizado. `null` cuando el nivel no tiene ninguno. Renderízalo directamente: `{m.icon}`. |
| `isCompleted` | `boolean` | Si el carrito ha alcanzado este nivel. |
| `positionPercent` | `number` | Qué tan lleno está **el segmento propio de este nivel** de la barra, de `0` a `100`. No es una posición a lo largo de una sola barra compartida. |
```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
function Rewards(props) {
return (
{props.milestones.map((milestone) => (
// Each tier gets its own track; positionPercent (0-100) fills that track.
{props.showIcons && milestone.icon ? milestone.icon : null}
{props.showTierLabels && milestone.label !== '' ? milestone.label : null}
))}
);
}
```
`m.icon` es un **elemento pre-renderizado**, no una URL ni el nombre de un icono, así que renderízalo directamente en lugar de intentar construir un elemento de imagen a partir de él.
`milestones` nunca está vacío dentro de una plantilla personalizada. Cuando no hay niveles que mostrar, el bloque no renderiza nada y tu plantilla no es llamada en absoluto, así que no necesitas una rama de estado vacío.
## 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 los elementos de texto de las recompensas. Usa el selector **Text element** para alternar entre ellos.
**Message** — el mensaje de progreso o de completado. 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 mensaje. | Hereda del tema |
| **Size** | Tamaño de fuente. | `14px` |
| **Line height** | Multiplicador de altura de línea. | `1.43` |
| **Letter spacing** | Espaciado entre caracteres. | Normal |
**Tier label** — la etiqueta que se muestra en cada marcador de nivel. Solo disponible cuando **Show tier labels** está habilitado.
| Configuración | Qué controla | Predeterminado |
| ------------------ | --------------------------------------------------------- | ------------------------- |
| **Text color** | Color de la etiqueta del nivel. | Color de texto secundario |
| **Size** | Tamaño de fuente. | `13px` |
| **Weight** | Peso de fuente — Light, Regular, Medium, Semibold o Bold. | Regular (400) |
| **Line height** | Multiplicador de altura de línea. | `1.2` |
| **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).