> ## 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 Product add-on

> O bloco Product add-on do Aftersell Cart: ofereça um produto específico como adição rápida dentro do drawer.

> O bloco **Product add-on** oferece um único produto específico que você escolhe como complemento dentro do carrinho, promovendo um produto conhecido (uma garantia, uma amostra, um best-seller) como adição rápida diretamente no carrinho.

<Info>
  Ao contrário do [**Upsells**](/pt/aftersell/cart/upsells-block), que exibe produtos escolhidos por uma estratégia, o Product add-on sempre mostra exatamente o produto que você escolheu.
</Info>

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-product-add-on-block-additional-product.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=29c7598c41c78f6503af7f9cd7ec084a" alt="Bloco Product add-on oferecendo um produto adicional para o comprador incluir no carrinho" width="678" height="125" data-path="images/aftersell/cart-product-add-on-block-additional-product.png" />
</Frame>

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

* **Se nenhuma variante ativa for resolvida** — o produto não está definido, foi arquivado ou está sem estoque — o bloco não renderiza **nada** em vez de um botão morto.
* O controle reflete se a linha de complemento *deste próprio bloco* está no carrinho, então desativá-lo remove a linha que ele adicionou (e não afeta o mesmo produto adicionado em outro lugar).
* Um preço comparativo aparece riscado quando há uma remarcação genuína; o rótulo de "% off" fica oculto se o desconto arredondar para menos de 1%.
* A imagem do complemento volta para a imagem em destaque do produto quando a variante escolhida não tem imagem.

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

| Configuração     | O que controla                                                                                       | Padrão                                |
| ---------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------- |
| **Display type** | Como o controle de adicionar aparece: **Toggle** ou **Checkbox**.                                    | Toggle                                |
| **Product**      | A variante do produto a oferecer — um seletor cobre ambos. Imagem e preço vêm da variante escolhida. | Nenhum                                |
| **Title**        | Título em rich text.                                                                                 | `<strong>{{product_title}}</strong>`  |
| **Price label**  | A linha de preço.                                                                                    | `{{price}}`                           |
| **Description**  | Texto de apoio.                                                                                      | `Add {{product_title}} to your order` |

**Title**, **Price label** e **Description** suportam os mesmos quatro tokens: `{{product_title}}`, `{{price}}`, `{{compare_at_price}}` e `{{savings}}`.

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

* **Região:** body ou bottom.
* **Máximo:** 3 por estado do carrinho — o carrinho cheio e o carrinho vazio têm cada um a própria cota.
* **Estado:** tanto carrinho cheio quanto vazio.
* Não é adicionado por padrão. Não é fixo — você pode removê-lo ou ocultá-lo.

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

<div id="content">
  ### Conteúdo
</div>

| Prop                      | Tipo             | Para que serve                                                                                                      |
| ------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------- |
| `addonTitle`              | `string`         | Título em texto simples. Use-o para o alt text e o `aria-label`, e como fallback quando não há título em rich text. |
| `addonTitleHtml`          | `string`         | HTML do título em rich text sanitizado. Vazio quando não há.                                                        |
| `descriptionHtml`         | `string`         | HTML da descrição em rich text sanitizado. Vazio quando não há.                                                     |
| `formattedPrice`          | `string`         | Rótulo de preço formatado em moeda. Vazio quando não é exibido.                                                     |
| `formattedCompareAtPrice` | `string`         | Preço comparativo formatado da variante (MSRP). Vazio quando não há economia real.                                  |
| `savings`                 | `string`         | Rótulo de economia em porcentagem inteira, por exemplo `25%`. Vazio quando não há economia.                         |
| `priceHtml`               | `string \| null` | HTML de preço em rich text sanitizado do campo de preço dedicado. `null` quando vazio.                              |
| `ctaText`                 | `string`         | Rótulo do botão, para o formato `button`.                                                                           |
| `imageUrl`                | `string`         | Imagem do produto. Vazio quando não há.                                                                             |
| `productUrl`              | `string`         | URL da página do produto. Vazio quando não há; nesse caso, não coloque link na imagem nem no título.                |

<div id="state-and-actions">
  ### Estado e ações
</div>

| Prop           | Tipo                                 | Para que serve                                                                                                   |
| -------------- | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
| `variantId`    | `number \| null`                     | Variante resolvida. `null` quando não há variante ativa, porque o produto não está definido ou está sem estoque. |
| `format`       | `'button' \| 'checkbox' \| 'toggle'` | Como o comprador adiciona o complemento. Ramifique sua marcação com base nisso.                                  |
| `isEnabled`    | `boolean`                            | Se o complemento está atualmente no carrinho.                                                                    |
| `isAdding`     | `boolean`                            | `true` enquanto a adição ou remoção está em andamento. Desabilite seu controle com base nisso.                   |
| `handleAdd`    | `() => void`                         | Adiciona o complemento. Para o formato `button`.                                                                 |
| `handleToggle` | `() => void`                         | Alterna o complemento dentro e fora do carrinho. Para `checkbox` e `toggle`.                                     |
| `isLoading`    | `boolean`                            | `true` enquanto o carrinho ainda está fazendo a primeira busca.                                                  |

<Warning>
  `format` decide qual handler se aplica: `handleAdd` para `button`, `handleToggle` para `checkbox` e `toggle`. Um `variantId` `null` significa que não há nada para adicionar, então condicione seu controle a ele em vez de chamar um handler que não pode ter sucesso.
</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 de três elementos. Use o seletor **Text element** para alternar entre eles.

**Title** — o nome do produto. Também suporta uma família de fonte personalizada. 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.                 | `15px`        |
| **Line height**    | Multiplicador de altura da linha. | `1.33`        |
| **Letter spacing** | Espaçamento entre caracteres.     | Normal        |

**Price** — a linha de preço. Negrito e cor do texto são definidos no Rich Text Editor acima.

| Configuração       | O que controla                    | Padrão |
| ------------------ | --------------------------------- | ------ |
| **Size**           | Tamanho da fonte.                 | `15px` |
| **Line height**    | Multiplicador de altura da linha. | `1.33` |
| **Letter spacing** | Espaçamento entre caracteres.     | Normal |

**Description** — o texto de apoio. Negrito e cor do texto são definidos no Rich Text Editor acima.

| Configuração       | O que controla                    | Padrão |
| ------------------ | --------------------------------- | ------ |
| **Size**           | Tamanho da fonte.                 | `14px` |
| **Line height**    | Multiplicador de altura da linha. | `1.29` |
| **Letter spacing** | Espaçamento entre caracteres.     | Normal |

<Tip>
  Clicar em um elemento de texto diretamente na pré-visualização do carrinho o destaca e abre seus controles no painel automaticamente.
</Tip>

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