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

# Bloco Header

> O bloco Header do Aftersell Cart: o título, a contagem de itens, o logo e o controle de fechar fixados no topo do drawer.

> O bloco **Header** é a área fixa no topo do cart drawer, dando ao drawer um título claro e uma forma óbvia de fechá-lo. Você controla seu layout atribuindo **Title**, **Logo** e **Close button** às seções esquerda e direita. Como o Header é fixado no topo, ele permanece visível enquanto o restante do carrinho rola.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-header-block-title-item-count.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=e60cc6dbfe8728eb818d20cf5aa8ae5c" alt="Bloco Header com título do carrinho, contagem de itens e controle de fechar no topo do drawer" width="689" height="91" data-path="images/aftersell/cart-header-block-title-item-count.png" />
</Frame>

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

* O Header é fixado no topo do drawer e não rola com o body do carrinho.
* O controle de fechar está sempre disponível e dispensa o drawer.

<div id="settings">
  ## Configurações
</div>

| Configuração | O que controla                                                                                                                                                                                                                 | Padrão                       |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- |
| **Left**     | Quais elementos são renderizados na seção esquerda (`Title`, `Logo`, `Close button`) e em que ordem.                                                                                                                           | `Title`                      |
| **Right**    | Quais elementos são renderizados na seção direita (`Title`, `Logo`, `Close button`) e em que ordem.                                                                                                                            | `Close button`               |
| **Title**    | Título em rich text do carrinho. Suporta os tokens `{{cart_item_count}}` e `{{total_price}}`.                                                                                                                                  | `Cart • {{cart_item_count}}` |
| **Image**    | Uma imagem exposta a um template personalizado como `props.logoUrl`. Este campo só aparece enquanto um template personalizado está ativo, e o header nativo nunca a renderiza. Formatos suportados: WebP, JPEG, PNG, GIF, SVG. | Nenhum                       |

O título é traduzível. Se o seu título resolver para vazio (por exemplo, uma tradução não definida), o carrinho volta a mostrar **Cart** para que o header nunca fique em branco.
Os elementos aparecem na ordem em que você os seleciona, da esquerda para a direita, e cada elemento pode ser atribuído a apenas uma seção por vez.

<div id="placement-and-limits">
  ## Posicionamento e limites
</div>

* **Região:** apenas top.
* **Máximo:** 1 por estado do carrinho.
* **Estado:** carrinho cheio e vazio (cada estado tem a própria instância do Header).
* Adicionado a carrinhos novos por padrão em ambos os estados. Não é fixo, então você pode removê-lo ou ocultá-lo com o botão de olho.

<div id="custom-template">
  ## Template personalizado
</div>

Suporta um [template personalizado](/pt/aftersell/cart/custom-templates) pela aba Code, que substitui a marcação nativa deste bloco pelo seu JSX. Estas são as props que ele recebe.

<Note>
  `logoUrl` é a única prop que não tem equivalente nativo: a imagem enviada do Header é **renderizada apenas por um template personalizado**. Se um lojista definiu um logo e ele não está aparecendo, é por isso.
</Note>

| Prop           | Tipo                                      | Para que serve                                                                                                                           |
| -------------- | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| `title`        | `string`                                  | O título do header como HTML sanitizado, com `{{cart_item_count}}` e `{{total_price}}` já resolvidos.                                    |
| `logoUrl`      | `string \| null`                          | A imagem enviada do header. `null` quando o lojista não definiu uma.                                                                     |
| `leftSection`  | `('title' \| 'logo' \| 'close_button')[]` | Itens selecionados para a seção esquerda, na ordem de renderização.                                                                      |
| `rightSection` | `('title' \| 'logo' \| 'close_button')[]` | Itens selecionados para a seção direita, na ordem de renderização.                                                                       |
| `itemCount`    | `number`                                  | Itens no carrinho, como o comprador vê.                                                                                                  |
| `onClose`      | `() => void`                              | Fecha o drawer. Conecte-o ao seu controle de fechar.                                                                                     |
| `isLoading`    | `boolean`                                 | Sempre `false` aqui: o bloco renderiza o skeleton nativo durante o carregamento e só chama o seu template quando o carrinho está pronto. |

<Warning>
  Se você não conectar `onClose` a algo, os compradores ainda podem fechar o drawer clicando no overlay ou pressionando Escape, mas seu header não terá botão de fechar. Sempre inclua um.
</Warning>

<div id="design">
  ## Design
</div>

Estilize este bloco pela seção **Design** no painel de configurações. São substituições por bloco que se sobrepõem ao seu design global e voltam a ele quando ficam em branco.

<div id="text">
  ### Text
</div>

A seção **Text** em Design permite controlar a tipografia do título do carrinho. Negrito e cor do texto são definidos no Rich Text Editor acima (na aba Settings), não aqui.

| Configuração       | O que controla                    | Padrão        |
| ------------------ | --------------------------------- | ------------- |
| **Font**           | Família da fonte para o título.   | Herda do tema |
| **Size**           | Tamanho da fonte.                 | `18px`        |
| **Line height**    | Multiplicador de altura da linha. | `1.3`         |
| **Letter spacing** | Espaçamento entre caracteres.     | Normal        |

O que são configurações de design? Saiba mais aqui: [Configurações de design](/pt/aftersell/cart/design-settings).