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

# Como funcionam os carrinhos?

> Como um Aftersell Cart é estruturado: estados cheio e vazio, seções Header/Body/Footer e como os blocos se encaixam em cada uma.

Um **carrinho** no Aftersell é uma experiência configurável de cart drawer. Você o projeta em dois **estados**, o organiza em três **seções** e preenche essas seções com **blocos**.

<div id="cart-states">
  ## Estados do carrinho
</div>

Todo carrinho tem dois layouts independentes. Você alterna entre eles no editor:

* **Carrinho cheio**: o que os compradores veem quando o carrinho tem itens.
* **Carrinho vazio**: o que os compradores veem quando o carrinho não tem itens.

Alguns blocos pertencem a apenas um estado:

* O bloco [**Empty cart**](/pt/aftersell/cart/empty-cart-block) aparece apenas no estado **vazio**.
* [**Cart items**](/pt/aftersell/cart/cart-items-block), [**Checkout button**](/pt/aftersell/cart/checkout-button-block), [**Notes**](/pt/aftersell/cart/notes-block), [**Express payments**](/pt/aftersell/cart/express-payments-block) e [**Shipping protection**](/pt/aftersell/cart/shipping-protection-block) aparecem apenas no estado **cheio**.

Outros blocos (Header, Banner, Rewards, Image, Custom code e mais) podem ficar em qualquer estado. Carrinhos novos começam com **Header + Empty cart** no estado vazio, e **Header → Banner → Cart items → Summary → Checkout button** no estado cheio.

<Info>
  O **estado de carrinho vazio** é todo o layout vazio. O **bloco Empty cart** é um bloco dentro desse layout, geralmente a mensagem e o botão de continuar comprando. Os nomes parecem iguais, mas o estado pode conter mais do que esse único bloco.
</Info>

<div id="sections">
  ## Seções
</div>

Cada estado é dividido em três seções: **Header**, **Body** e **Footer**. As seções controlam onde um bloco fica e como ele rola:

* **Header**: fixado no topo do drawer; permanece visível enquanto o body rola.
* **Body**: o meio rolável. Os blocos aqui se movem com o conteúdo. Bloco fixo: **Cart items**.
* **Footer**: fixado na parte inferior do drawer. Bloco fixo: **Checkout button**.

Quando você adiciona ou move um bloco, a seção dele decide seu comportamento de rolagem. Nem todo bloco está disponível em todas as seções. Veja [Como funcionam os blocos?](/pt/aftersell/cart/blocks-overview#blocks-available-in-each-section).

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

Um **bloco** é uma peça configurável do drawer (a lista de produtos, uma oferta de upsell, um botão de checkout e assim por diante). Você os empilha em uma seção, reordena e estiliza. Para saber como funcionam adição, limites, sub-blocos e condições, veja [Como funcionam os blocos?](/pt/aftersell/cart/blocks-overview).

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

* [Criar um carrinho](/pt/aftersell/cart/creating-carts)
* [Pré-visualizar um carrinho](/pt/aftersell/cart/previewing-carts)
* [Gerenciar vários carrinhos](/pt/aftersell/cart/having-multiple-carts)