> ## 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 Checkout button

> O bloco Checkout button do Aftersell Cart: a CTA obrigatória do rodapé que envia os compradores para o checkout.

> O bloco **Checkout button** é a call to action principal no rodapé do carrinho, que leva os compradores ao checkout, oferecendo um caminho claro e proeminente do carrinho até o checkout. É um bloco obrigatório.

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

* O botão resolve uma **URL de checkout localizada e correta para o mercado**, para que os compradores cheguem ao checkout do mercado certo. Se isso não puder ser resolvido, ele recorre ao link padrão `/checkout`.
* Com **Go to cart page instead of checkout** ativado, o botão passa a apontar para `/cart`.
* O clique navega via JavaScript, para que o tratamento de carrinho do próprio tema não possa interceptá-lo, mas ainda respeita intenções de nova aba (Cmd/Ctrl + clique, clique do botão do meio).
* O clique emite o [evento `checkout`](/pt/aftersell/cart/sdk-events) do SDK, que você pode assinar.

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

| Configuração                            | O que controla                                                                    | Padrão                       |
| --------------------------------------- | --------------------------------------------------------------------------------- | ---------------------------- |
| **Button label**                        | Rótulo em texto simples inserido em uma área de texto. Suporta `{{total_price}}`. | `Checkout • {{total_price}}` |
| **Go to cart page instead of checkout** | Envia os compradores para a sua página `/cart` em vez de direto para o checkout.  | Desativado                   |

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

* **Região:** parte inferior.
* **Máximo:** 1 por estado do carrinho.
* **Estado:** apenas carrinho cheio.
* **Bloqueado e adicionado por padrão.** O Checkout button não pode ser removido nem ocultado, apenas reposicionado dentro do rodapé.

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

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

| Prop        | Tipo                  | Para que serve                                                                                                                           |
| ----------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| `label`     | `string`              | O rótulo do botão como HTML sanitizado, com `{{total_price}}` resolvido.                                                                 |
| `href`      | `string \| undefined` | A URL de checkout. `undefined` na pré-visualização do editor, onde não há para onde navegar.                                             |
| `isLoading` | `boolean`             | Sempre `false` aqui: o bloco renderiza seu skeleton nativo durante o carregamento e só chama seu template quando o carrinho está pronto. |

<Warning>
  **Um botão de checkout personalizado perde o rastreamento de checkout.** O botão nativo anexa um handler de clique que emite o [evento `checkout`](/pt/aftersell/cart/sdk-events#checkout) do SDK e registra a conversão para o [analytics do carrinho](/pt/aftersell/cart/analytics). Esse handler não é passado para templates personalizados, então navegar apenas pelo `href` pula ambos.

  Se você precisar do evento, emita-o você mesmo em um `onClick` antes da navegação. O relatório de atribuição ainda não pode ser recuperado dessa forma, então prefira reestilizar o botão nativo com as [configurações de design](/pt/aftersell/cart/design-settings) ou [CSS personalizado](/pt/aftersell/cart/custom-css), a menos que você realmente precise de uma marcação diferente.
</Warning>

Renderize `href` como está, sem definir um valor padrão. Um `<a>` sem `href` fica inerte, que é o comportamento correto no editor.

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

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

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