> ## 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 de resumen

> El bloque Summary de Aftersell Cart: totales, ahorros y códigos de descuento aplicados.

> El bloque **Summary** le muestra al comprador lo que va a pagar: una fila de total con ahorros opcionales, más las etiquetas de descuento aplicadas. Resume los totales y ahorros del carrito justo encima del botón de checkout, para que los compradores vean la cifra final antes de comprometerse.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-summary-block-subtotal-savings-applied-discounts.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=455f22040697c41fd1e02a870e9cccf8" alt="Bloque Summary mostrando subtotal, ahorros y descuentos aplicados antes del checkout" width="1368" height="250" data-path="images/aftersell/cart-summary-block-subtotal-savings-applied-discounts.png" />
</Frame>

<div id="behavior">
  ## Comportamiento
</div>

* **Los tokens de ahorro se contraen con elegancia.** Si una celda hace referencia a `{{savings}}` o `{{pre_savings_price}}` pero el carrito no tiene ahorro, esa celda recurre a solo `{{total_price}}`, de modo que los compradores nunca ven "\$0.00 de descuento" ni un precio tachado igual al total. Si combinas `{{cart_item_count}}` y `{{savings}}` en la misma celda, el recuento de artículos también se elimina en la alternativa sin ahorros — colócalos en celdas separadas para evitarlo.
* Las etiquetas de descuento aparecen solo cuando **Show discount codes** está activado *y* el carrito tiene descuentos para listar. Esto incluye tanto los descuentos basados en códigos como los automáticos.

<div id="settings">
  ## Ajustes
</div>

| Ajuste                  | Qué controla                                                                                                                 | Predeterminado                       |
| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ |
| **Left text**           | La celda izquierda de la fila de total. Texto enriquecido con tokens. Ejemplo: `Subtotal ({{cart_item_count}} items)`.       | `Subtotal`                           |
| **Right text**          | La celda derecha. Texto enriquecido con tokens (total, precio previo a ahorros tachado, ahorros, recuento de artículos).     | Total con marcado de ahorros tachado |
| **Savings format**      | Mostrar los ahorros como `percent` entero o como monto `absolute`.                                                           | `percent`                            |
| **Show discount codes** | Si aparecen las etiquetas de descuento aplicadas. Esto incluye tanto los descuentos basados en códigos como los automáticos. | Activado                             |

Las celdas de texto admiten los tokens `{{cart_item_count}}`, `{{total_price}}`, `{{pre_savings_price}}` y `{{savings}}`.

<div id="placement-and-limits">
  ## Ubicación y límites
</div>

* **Región:** parte inferior.
* **Máximo:** 2 por estado del carrito. El carrito con artículos y el carrito vacío tienen cada uno su propio cupo.
* **Estado:** carrito con artículos y vacío.
* Se agrega a los carritos nuevos de forma predeterminada. No está bloqueado, así que puedes quitarlo u ocultarlo.

<div id="custom-template">
  ## Plantilla personalizada
</div>

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                                                                                                                             |
| ------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| `leftHtml`          | `string`   | La celda izquierda como HTML sanitizado, con los tokens resueltos.                                                                         |
| `rightHtml`         | `string`   | La celda derecha como HTML sanitizado, con los tokens resueltos.                                                                           |
| `discountCodes`     | `string[]` | Títulos de descuento aplicados al carrito (basados en códigos y automáticos). `[]` cuando no hay.                                          |
| `showDiscountCodes` | `boolean`  | Si el comerciante quiere que se listen las etiquetas de descuento **y** el carrito tiene descuentos para listar.                           |
| `hasSavings`        | `boolean`  | `true` cuando el carrito tiene un ahorro. Úsalo para ocultar tu propia fila de ahorros.                                                    |
| `totalPrice`        | `string`   | Total del carrito, ya formateado.                                                                                                          |
| `preSavingsPrice`   | `string`   | Total antes de los ahorros, ya formateado.                                                                                                 |
| `savings`           | `string`   | Monto ahorrado. Ya formateado, **o un porcentaje** como `15%`, según el ajuste de formato de ahorros del comerciante.                      |
| `itemCount`         | `number`   | Unidades totales en el carrito — la suma de las cantidades de las líneas visibles, excluyendo la línea de protección de envío.             |
| `isLoading`         | `boolean`  | Siempre `false` aquí: el bloque renderiza su skeleton integrado durante la carga y solo llama a tu plantilla cuando el carrito está listo. |

<Warning>
  Como `savings` puede ser dinero o un porcentaje, no construyas tu propia frase alrededor de él asumiendo uno u otro. `{props.savings}` por sí solo es seguro; `You saved ${props.savings}` no lo es.
</Warning>

<div id="design">
  ## Diseño
</div>

Da estilo a este bloque con su sección **Design** en el panel de ajustes. Son overrides por bloque que se superponen a tu diseño global y recurren a él cuando están en blanco.

¿Qué son los ajustes de diseño? Obtén más información aquí: [Ajustes de diseño](/es/aftersell/cart/design-settings).