> ## 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.

# ¿Cómo funcionan los carritos?

> Cómo se estructura un Aftersell Cart: estados con artículos y vacío, secciones Header/Body/Footer y cómo encajan los bloques en cada una.

Un **carrito** en Aftersell es una experiencia configurable de drawer de carrito. Lo diseñas en dos **estados**, lo organizas en tres **secciones** y llenas esas secciones con **bloques**.

<div id="cart-states">
  ## Estados del carrito
</div>

Cada carrito tiene dos layouts independientes. Alternas entre ellos en el editor:

* **Carrito con artículos**: lo que los compradores ven cuando el carrito tiene artículos.
* **Carrito vacío**: lo que los compradores ven cuando el carrito no tiene artículos.

Algunos bloques solo pertenecen a un estado:

* El bloque [**Empty cart**](/es/aftersell/cart/empty-cart-block) aparece solo en el estado **vacío**.
* [**Cart items**](/es/aftersell/cart/cart-items-block), [**Checkout button**](/es/aftersell/cart/checkout-button-block), [**Notes**](/es/aftersell/cart/notes-block), [**Express payments**](/es/aftersell/cart/express-payments-block) y [**Shipping protection**](/es/aftersell/cart/shipping-protection-block) aparecen solo en el estado **con artículos**.

Otros bloques (Header, Banner, Rewards, Image, Custom code y más) pueden vivir en cualquiera de los dos estados. Los carritos nuevos comienzan con **Header + Empty cart** en el estado vacío, y **Header → Banner → Cart items → Summary → Checkout button** en el estado con artículos.

<Info>
  El **estado de carrito vacío** es todo el layout vacío. El **bloque Empty cart** es un bloque dentro de ese layout, normalmente el mensaje y el botón de seguir comprando. Suenan parecido, pero el estado puede contener más que ese único bloque.
</Info>

<div id="sections">
  ## Secciones
</div>

Cada estado se divide en tres secciones: **Header**, **Body** y **Footer**. Las secciones controlan dónde se ubica un bloque y cómo se desplaza:

* **Header**: fijado en la parte superior del drawer; permanece visible mientras el cuerpo se desplaza.
* **Body**: la parte central desplazable. Los bloques aquí se mueven con el contenido. Bloque fijo: **Cart items**.
* **Footer**: fijado en la parte inferior del drawer. Bloque fijo: **Checkout button**.

Cuando agregas o mueves un bloque, su sección decide su comportamiento de desplazamiento. No todos los bloques están disponibles en todas las secciones. Consulta [¿Cómo funcionan los bloques?](/es/aftersell/cart/blocks-overview#blocks-available-in-each-section).

<div id="blocks">
  ## Bloques
</div>

Un **bloque** es una pieza configurable del drawer (la lista de productos, una oferta de upsell, un botón de checkout, etcétera). Los apilas en una sección, los reordenas y les das estilo. Para saber cómo funcionan la adición, los límites, los sub-bloques y las condiciones, consulta [¿Cómo funcionan los bloques?](/es/aftersell/cart/blocks-overview).

<div id="next-steps">
  ## Próximos pasos
</div>

* [Crear un carrito](/es/aftersell/cart/creating-carts)
* [Previsualizar un carrito](/es/aftersell/cart/previewing-carts)
* [Gestionar múltiples carritos](/es/aftersell/cart/having-multiple-carts)