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

> O bloco Banner do Aftersell Cart: um banner de mensagem exibido dentro do drawer, com um cronômetro regressivo opcional.

> O bloco **Banner** é uma faixa de mensagem exibida dentro do carrinho, útil para promoções, mensagens de frete ou apelos de urgência, como um aviso de frete grátis, um anúncio de promoção ou uma mensagem de "carrinho reservado". Ele pode incluir um cronômetro regressivo ao vivo.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-banner-block-reservation-countdown.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=8aff1b333a8ebe9005d2d70bc7f9a2cd" alt="Bloco Banner no cart drawer da Aftersell exibindo uma mensagem de contagem regressiva de reserva" width="1366" height="106" data-path="images/aftersell/cart-banner-block-reservation-countdown.png" />
</Frame>

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

* **A contagem regressiva só roda quando as três condições são atendidas:** o cronômetro está ativado, o texto contém o token `{{timer}}` e a duração é maior que zero. Caso contrário, o banner é exibido como texto estático.
* O cronômetro faz a contagem regressiva em `MM:SS` e é lembrado para a aba do comprador (ele sobrevive à navegação dentro da sua loja durante a sessão), então não reinicia a cada página.
* **Quando o cronômetro chega a `00:00`, o banner inteiro desaparece**, para que os compradores nunca vejam um relógio zerado.
* Na pré-visualização do editor, o cronômetro fica em loop e o banner nunca se esconde, para que você possa continuar estilizando-o.

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

| Configuração              | O que controla                                                                                                                                                      | Padrão                                         |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- |
| **Text**                  | A mensagem em rich text. Inclua o token `{{timer}}` para exibir uma contagem regressiva.                                                                            | `Your cart is reserved for {{timer}} minutes!` |
| **Countdown timer**       | Ativa ou desativa a contagem regressiva.                                                                                                                            | Ativado                                        |
| **Minutes** / **Seconds** | Quanto tempo a contagem regressiva dura. Dois campos numéricos, exibidos quando **Countdown timer** está ativado e mostrados como `MM:SS` onde `{{timer}}` aparece. | 10 minutos                                     |

O texto é traduzível.

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

* **Região:** qualquer uma (topo, corpo ou parte inferior).
* **Máximo:** 3 por estado do carrinho — o carrinho cheio e o carrinho vazio têm, cada um, sua própria cota.
* **Estado:** tanto carrinho cheio quanto vazio.
* Adicionado a novos carrinhos por padrão. Não é bloqueado, então você pode removê-lo ou ocultá-lo.

<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                                                                                                                           |
| ----------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| `text`                        | `string`  | A mensagem do banner como HTML sanitizado, com o token `{{timer}}` **já substituído** pela contagem regressiva ao vivo.                  |
| `shouldUseTimer`              | `boolean` | `true` quando a contagem regressiva está rodando para este banner.                                                                       |
| `isTimerExpiredAndShouldHide` | `boolean` | `true` quando a contagem regressiva chega a zero.                                                                                        |
| `isLoading`                   | `boolean` | Sempre `false` aqui: o bloco renderiza seu skeleton nativo durante o carregamento e só chama seu template quando o carrinho está pronto. |

Não há uma prop `timer` separada. A contagem regressiva é interpolada em `text` para você, então renderizar `text` é suficiente.

```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
function CustomTemplate(props) {
  // The built-in banner removes itself at 00:00; a custom template must do the same.
  if (props.shouldUseTimer && props.isTimerExpiredAndShouldHide) return null;

  return (
    <div className="cart-external-banner" style={{ padding: '10px', textAlign: 'center' }}>
      <span dangerouslySetInnerHTML={{ __html: props.text }} />
    </div>
  );
}
```

<Warning>
  Esse retorno antecipado é importante. Sem ele, seu banner continua sendo renderizado depois que o cronômetro expira e, como o token já foi substituído, os compradores veem um `00:00` congelado.
</Warning>

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

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

A seção **Text** em Design permite controlar a tipografia da mensagem do banner. 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 texto do banner. | Herda do tema |
| **Size**           | Tamanho da fonte.                        | `14px`        |
| **Line height**    | Multiplicador de altura da linha.        | `1.4`         |
| **Letter spacing** | Espaçamento entre caracteres.            | Normal        |

<div id="style">
  ### Style
</div>

| Configuração         | O que controla                                                | Padrão       |
| -------------------- | ------------------------------------------------------------- | ------------ |
| **Background color** | O preenchimento de fundo do banner.                           | `#000000`    |
| **Text color**       | Cor de texto de fallback (sobrescrita pelo Rich Text Editor). | `#ffffff`    |
| **Border**           | Se o banner tem borda — **None** (0px) ou **Show** (1px).     | None         |
| **Border color**     | Cor da borda quando **Show** é selecionado.                   | Transparente |

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