> ## 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 blocos?

> Entenda os blocos do Aftersell Cart: seções e sub-blocos, cheio vs. vazio, limites, blocos bloqueados, condições e configurações por bloco.

O layout do seu carrinho é uma pilha de **blocos**: peças configuráveis que você adiciona, reordena, estiliza e personaliza no Cart Editor. Os blocos que você inclui, e em que ordem, formam o carrinho que os compradores veem.

Para entender como os blocos se encaixam em **estados** e **seções**, veja [Como funcionam os carrinhos?](/pt/aftersell/cart/how-carts-work).

<div id="blocks-and-sub-blocks">
  ## Blocos e sub-blocos
</div>

Existem dois tipos de bloco:

* **Blocos** ficam diretamente no carrinho, em uma de três seções: **Header**, **Body** ou **Footer**. Cada seção oferece um conjunto diferente de blocos.
* **Sub-blocos** ficam aninhados dentro de outro bloco. Hoje apenas [**Cart items**](/pt/aftersell/cart/cart-items-block) hospeda sub-blocos: a linha **Product** (a própria linha do item), [**Subscription upgrade**](/pt/aftersell/cart/subscription-upgrade-block) e [**Custom code**](/pt/aftersell/cart/custom-code-blocks).

<div id="adding-reordering-and-removing-blocks">
  ## Adicionando, reordenando e removendo blocos
</div>

* **Adicione** um bloco com o seletor **Add block**. Um bloco fica acinzentado se não puder ir onde você está adicionando, ou se você atingiu o limite dele (o seletor mostra um selo `count/max`).
* **Reordene** arrastando um bloco dentro da sua seção.
* **Remova** com o ícone de lixeira, exceto os blocos bloqueados (abaixo).
* **Mostre/oculte** a maioria dos blocos com o botão de olho, que esconde um bloco dos compradores sem excluí-lo. Alguns blocos estruturais não podem ser ocultados: **Cart items**, **Checkout button** e a linha **Product**.

<div id="locked-blocks">
  ## Blocos bloqueados
</div>

Alguns blocos podem ser reordenados, mas não excluídos, para que o comportamento essencial do carrinho (por exemplo, finalizar a compra) não possa ser removido por acidente:

* **Cart items**
* **Checkout button**

<div id="default-blocks">
  ## Blocos padrão
</div>

Novos carrinhos começam com um layout padrão funcional:

* **Carrinho cheio:** Header, Banner, Cart items, Summary, Checkout button
* **Carrinho vazio:** Header, bloco Empty cart

<Info>
  O **estado de carrinho vazio** é o layout vazio inteiro. O **bloco Empty cart** é um bloco dentro dele. Veja [Como funcionam os carrinhos?](/pt/aftersell/cart/how-carts-work) para entender a diferença.
</Info>

<div id="how-many-of-each-block-you-can-add">
  ## Quantos de cada bloco você pode adicionar
</div>

Os limites são contados **por estado do carrinho**, não por carrinho. O carrinho cheio e o carrinho vazio têm, cada um, sua própria cota, então um carrinho pode ter três Banners no layout cheio e mais três no layout vazio.

A maioria dos blocos é limitada a um por estado. As exceções:

| Bloco          | Máximo por estado do carrinho |
| -------------- | ----------------------------- |
| Banner         | 3                             |
| Image          | 3                             |
| Product add-on | 3                             |
| Summary        | 2                             |
| Custom code    | Ilimitado                     |

<div id="content-design-and-code">
  ## Content, Design e Code
</div>

Cada bloco é configurado por meio de até três superfícies no editor:

* **Content**: as configurações do bloco (texto, escolhas de produtos, limites e assim por diante). O bloco **Custom code** é a única exceção: ele não tem painel Content porque o bloco *é* o código.
* **Design**: estilização por bloco que se sobrepõe às suas [**Configurações de design**](/pt/aftersell/cart/design-settings) globais. Todo bloco tem uma, exceto **Custom code**, que não tem painel de configurações.
* **Code**: substitua a renderização nativa do bloco por um [**template personalizado**](/pt/aftersell/cart/custom-templates). A maioria dos blocos suporta isso; alguns não.

<div id="show-or-hide-by-market-country-or-currency">
  ## Mostrar ou ocultar por mercado, país ou moeda
</div>

Alguns blocos podem mostrar configurações diferentes, ou se ocultar por completo, com base em quem é o comprador. Isso é separado do **botão de olho** da barra lateral, que ativa ou desativa um bloco para todos.

|                | **Botão de olho**                                          | **Condições**                                                    |
| -------------- | ---------------------------------------------------------- | ---------------------------------------------------------------- |
| **O que faz**  | Oculta ou mostra o bloco inteiro para todos os compradores | Escolhe qual variante de configurações um comprador vê (ou nada) |
| **Baseado em** | Sua escolha no editor                                      | Mercado Shopify, país do cliente ou moeda do cliente             |
| **Onde**       | Ícone de olho na barra lateral na maioria dos blocos       | Painel de configurações dos blocos que suportam condições        |

**Tipos de condição suportados hoje:** mercado Shopify, país do cliente e moeda do cliente (cada um com **In** ou **Not in**). Total do carrinho e conteúdo do carrinho **não** são tipos de condição. Use os limites de níveis do bloco [Rewards](/pt/aftersell/cart/rewards-block) para progresso por gasto/quantidade, ou o [Cart SDK](/pt/aftersell/cart/sdk-overview) quando precisar de uma regra que o editor não consegue expressar.

As condições são uma lista ordenada: a **primeira condição correspondente** vence. Coloque regras específicas acima de uma condição genérica **All buyers**. Se nada corresponder, o bloco não renderiza nada para aquele comprador.

**No editor hoje**, a interface completa de Conditions está disponível no bloco [**Rewards**](/pt/aftersell/cart/rewards-block#per-market-rewards): conjuntos de níveis diferentes por mercado, país ou moeda. Os outros blocos usam uma única configuração "all buyers" ou ainda não participam desse sistema.

A pré-visualização do editor **não** avalia o comprador real. Selecione uma condição no painel para pré-visualizar aquela variante.

<div id="all-blocks">
  ## Todos os blocos
</div>

**Estrutura**

* [Header](/pt/aftersell/cart/header-block): título, contagem de itens, logo e controle de fechar, fixados no topo.
* [Cart items](/pt/aftersell/cart/cart-items-block): os itens que os clientes adicionam ao carrinho; repete por linha.
* [Subscription upgrade](/pt/aftersell/cart/subscription-upgrade-block): sub-bloco que oferece converter uma linha em assinatura.
* [Summary](/pt/aftersell/cart/summary-block): totais, economias e descontos aplicados.
* [Checkout button](/pt/aftersell/cart/checkout-button-block): a call to action principal para o checkout.
* [Empty cart](/pt/aftersell/cart/empty-cart-block): o conteúdo exibido quando o carrinho está vazio.
* [Express payments](/pt/aftersell/cart/express-payments-block): botões de checkout acelerado (Shop Pay, PayPal e outros) dentro do carrinho.

**Merchandising**

* [Upsells](/pt/aftersell/cart/upsells-block): recomendações de produtos escolhidas por estratégia.
* [Product add-on](/pt/aftersell/cart/product-add-on-block): um único produto específico oferecido como add-on.
* [Rewards](/pt/aftersell/cart/rewards-block): recompensas escalonadas, como frete grátis ou brindes.
* [Shipping protection](/pt/aftersell/cart/shipping-protection-block): um add-on de proteção de envio opcional.

**Entrada do comprador**

* [Discount code](/pt/aftersell/cart/discount-code-block): um campo para aplicar um código de desconto.
* [Notes](/pt/aftersell/cart/notes-block): um campo de observações do pedido.

**Conteúdo**

* [Banner](/pt/aftersell/cart/banner-block): um banner de mensagem, com cronômetro regressivo opcional.
* [Image](/pt/aftersell/cart/image-block): uma única imagem ou um preset hospedado, como ícones de pagamento.
* [Custom code](/pt/aftersell/cart/custom-code-blocks): HTML ou React personalizado em qualquer lugar do carrinho.

**Extensão**

* [Custom templates](/pt/aftersell/cart/custom-templates): substitua a renderização de qualquer bloco pela aba Code dele.

<div id="blocks-available-in-each-section">
  ## Blocos disponíveis em cada seção
</div>

Cada seção tem um conjunto diferente de blocos disponíveis. Isso mantém o layout focado e reduz a desordem.

| Seção      | Blocos disponíveis                                                                                                                                  |
| ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Header** | Header, Banner, Rewards, Image, Custom code                                                                                                         |
| **Body**   | Banner, Notes, Discount code, Cart items, Empty cart, Custom code, Rewards, Product add-on, Shipping protection, Image, Upsells                     |
| **Footer** | Banner, Notes, Discount code, Custom code, Rewards, Product add-on, Shipping protection, Express payments, Image, Upsells, Summary, Checkout button |

Alguns desses blocos são específicos de estado (por exemplo, Empty cart apenas no estado vazio). Veja [Como funcionam os carrinhos?](/pt/aftersell/cart/how-carts-work).

<div id="block-validation-errors">
  ## Erros de validação de blocos
</div>

Se as configurações de um bloco contiverem um valor inválido, um pequeno ponto vermelho aparece ao lado do nome desse bloco na barra lateral. O ponto permanece até você corrigir o problema. Não é uma notificação que pode ser dispensada.

Enquanto qualquer bloco tiver um erro, **salvar fica bloqueado**. O botão **Save** continua clicável, mas selecioná-lo exibe um toast de erro (*"Fix the errors in your cart blocks before saving"*) e pula para o primeiro bloco com problema, abrindo suas configurações para você corrigir o campo destacado. **Publish** exige adicionalmente que não haja alterações não salvas, então permanece indisponível até que um salvamento limpo seja concluído.

Assim que o campo inválido for corrigido, o ponto desaparece sozinho e o salvamento prossegue normalmente.

<Note>
  Blocos ocultos ainda são validados. Um bloco que você ocultou pode conter uma configuração inválida, exibir um ponto de erro e bloquear o salvamento exatamente como um bloco visível — então, se o salvamento estiver bloqueado e todos os blocos visíveis parecerem bem, verifique seus blocos ocultos.
</Note>