> ## 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 Rewards
> O bloco Rewards do Aftersell Cart: frete grátis, descontos e brindes em níveis, incluindo níveis diferentes por mercado, país ou moeda.
> O bloco **Rewards** mostra uma barra de progresso rumo a níveis de recompensa (frete grátis, um desconto no pedido ou um brinde) que os compradores desbloqueiam adicionando mais itens ao carrinho, incentivando carrinhos maiores ao mostrar aos compradores o quão perto eles estão da próxima recompensa e concedendo recompensas qualificadas automaticamente. Os níveis podem variar por mercado, país e moeda.
## Validação de limites dos níveis
A lista de níveis de cada condição comporta até **4** níveis — um bloco Rewards com várias condições de mercado, país ou moeda armazena até 4 por condição, e como a primeira condição correspondente é a exibida, qualquer comprador individual vê no máximo 4. O limite de cada nível deve ser estritamente maior que o do nível acima — os limites devem estar em ordem crescente. Se o limite de um nível for igual ou menor que o do nível anterior, um erro inline aparece no campo de limite desse nível e o botão **Save** fica bloqueado até que o problema seja resolvido. O nível afetado se expande automaticamente para que o erro fique visível.
Por exemplo, se o Nível 1 estiver definido como \$100, o Nível 2 deve ser definido como \$101 ou mais.
## Comportamento
* O progresso **exclui** do total as linhas de brindes de recompensa, linhas de product add-on, linhas de shipping protection e cartões-presente, para que esses itens não inflem o progresso do comprador rumo a uma recompensa.
* A mensagem mostra o valor ou a quantidade restante até o próximo nível, ou a mensagem de conclusão quando todos os níveis são atingidos.
* **Os brindes são concedidos automaticamente.** Quando um comprador atinge um nível de brinde, o brinde é adicionado ao carrinho; se ele cair abaixo desse nível, o brinde é removido. Com recompensas acumuláveis desativadas, apenas o brinde do nível mais alto atingido é concedido.
* **Add back removed free gifts** controla o que acontece quando um comprador remove manualmente um brinde concedido automaticamente. Quando habilitado (o padrão), o brinde é readicionado automaticamente na próxima atualização do carrinho. Quando desabilitado, a remoção é respeitada e o brinde fica fora do carrinho pelo resto daquela sessão, para que os compradores não fiquem lutando contra o carrinho para recusar um brinde.
## Configurações
| Configuração | O que controla | Padrão |
| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- |
| **Rewards calculation** | Se o progresso é medido por **Cart total (\$)** ou **Cart quantity (#)**. | Cart total (\$) |
| **Stack rewards across tiers** | Ativado: aplica todas as recompensas que o comprador desbloqueou, até o nível mais alto atingido. Desativado: aplica apenas a recompensa do nível mais alto desbloqueado. | Ativado |
| **Add back removed free gifts** | Readiciona um brinde conquistado depois que o comprador o remove. | Ativado |
| **Show tier icons** | Se os ícones dos níveis aparecem na barra. | Ativado |
| **Show tier labels** | Se o texto do rótulo aparece em cada marcador de nível na barra. | Desativado |
| **Text after completing full rewards bar** | Rich text exibido quando todos os níveis são atingidos. | `All rewards unlocked!` |
| **Tiers** | Os níveis de recompensa (abaixo). Até **4** por condição; o painel mostra um contador `n/4` e desabilita **Add tier** no limite. | Nenhum |
Cada **nível** se expande para:
| Configuração do nível | O que controla | Padrão |
| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- |
| **Reward type** | **Free shipping**, **Order discount** ou **Free gift**. Alterá-lo redefine o título e o rótulo da barra de progresso desse nível para o texto padrão do novo tipo. | Free shipping |
| **Threshold (\$)** / **Threshold (items)** | O total do carrinho ou a contagem de itens que desbloqueia o nível. O rótulo segue **Rewards calculation**. Mínimo `1`. | `50` |
| **Discount value type** | Apenas descontos no pedido: **Percentage (%)** ou **Fixed amount (\$)**. | Percentage (%) |
| **Percentage off** / **Amount off** | Apenas descontos no pedido: o valor do desconto. Porcentagens são limitadas a 100. | `10` |
| **Title before achieving tier** | Mensagem em rich text exibida enquanto o comprador ainda não atingiu o nível. Suporta o token `{{amount}}`. | `You're {{amount}} away from free shipping!` |
| **Progress bar label** | O rótulo exibido no marcador do nível. | `Free shipping` |
| **Gift products** | Apenas brindes: o(s) produto(s)/variante(s) concedido(s), até **3** por nível. | Nenhum |
## Posicionamento e limites
* **Região:** qualquer (top, body ou bottom).
* **Máximo:** 1 por estado do carrinho — o carrinho cheio e o carrinho vazio têm cada um o seu.
* **Estado:** tanto carrinho cheio quanto vazio.
* Não é adicionado por padrão. Não é fixo, então você pode removê-lo ou ocultá-lo.
## Recompensas por mercado
Rewards é o bloco com a interface completa de **Conditions** hoje: defina vários conjuntos de níveis, cada um segmentando um **mercado do Shopify**, **país do cliente** ou **moeda do cliente** (**In** ou **Not in**). A primeira condição correspondente é exibida ao comprador. Se nenhuma corresponder, o bloco não renderiza nada para ele.
Cada condição é um cartão no painel de configurações (**When** + condição). Abaixo dele, uma seção **Display** contém os níveis dessa condição. Mantenha regras específicas acima de uma condição genérica **All buyers**. A ordem é prioridade, não uma combinação de todas as correspondências.
Você não pode excluir a última condição (pelo menos uma é sempre necessária). A pré-visualização do editor não avalia o comprador real; selecione uma condição no painel para pré-visualizar essa variante.
Para saber como as condições se relacionam com o botão de olho e outros blocos, veja [Mostrar ou ocultar por mercado, país ou moeda](/pt/aftersell/cart/blocks-overview#show-or-hide-by-market-country-or-currency).
## Template personalizado
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.
| Prop | Tipo | Para que serve |
| -------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| `milestones` | `Milestone[]` | Os níveis de recompensa, em ordem. Veja abaixo. |
| `rewardsMessageHtml` | `string` | A mensagem de progresso ou conclusão como HTML sanitizado. |
| `showIcons` | `boolean` | Se o lojista habilitou os ícones dos níveis. |
| `showTierLabels` | `boolean` | Se o lojista habilitou os rótulos da barra de níveis. |
| `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. |
Cada `Milestone`:
| Campo | Tipo | Para que serve |
| ----------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| `id` | `string` | Chave estável do nível. Use-a como sua `key` do React. |
| `label` | `string` | O rótulo do nível, como texto simples. |
| `icon` | `ReactElement \| null` | Elemento de ícone pré-renderizado. `null` quando o nível não tem. Renderize-o diretamente: `{m.icon}`. |
| `isCompleted` | `boolean` | Se o carrinho atingiu este nível. |
| `positionPercent` | `number` | O quão cheio está **o segmento próprio deste nível** na barra, de `0` a `100` — não uma posição ao longo de uma barra compartilhada. |
```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
function Rewards(props) {
return (
{props.milestones.map((milestone) => (
// Each tier gets its own track; positionPercent (0-100) fills that track.
{props.showIcons && milestone.icon ? milestone.icon : null}
{props.showTierLabels && milestone.label !== '' ? milestone.label : null}
))}
);
}
```
`m.icon` é um **elemento pré-renderizado**, não uma URL nem um nome de ícone, então renderize-o diretamente em vez de tentar construir um elemento de imagem a partir dele.
`milestones` nunca está vazio dentro de um template personalizado. Quando não há níveis a mostrar, o bloco não renderiza nada e o seu template nem é chamado, então você não precisa de uma ramificação de estado vazio.
## Design
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.
### Text
A seção **Text** em Design permite controlar a tipografia dos elementos de texto das recompensas. Use o seletor **Text element** para alternar entre eles.
**Message** — a mensagem de progresso ou conclusão. 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 a mensagem. | Herda do tema |
| **Size** | Tamanho da fonte. | `14px` |
| **Line height** | Multiplicador de altura da linha. | `1.43` |
| **Letter spacing** | Espaçamento entre caracteres. | Normal |
**Tier label** — o rótulo exibido em cada marcador de nível. Só disponível quando **Show tier labels** está habilitado.
| Configuração | O que controla | Padrão |
| ------------------ | --------------------------------------------------------- | ----------------------- |
| **Text color** | Cor do rótulo do nível. | Cor de texto secundária |
| **Size** | Tamanho da fonte. | `13px` |
| **Weight** | Peso da fonte — Light, Regular, Medium, Semibold ou Bold. | Regular (400) |
| **Line height** | Multiplicador de altura da linha. | `1.2` |
| **Letter spacing** | Espaçamento entre caracteres. | Normal |
Clicar em um elemento de texto diretamente na pré-visualização do carrinho o destaca e abre seus controles no painel automaticamente.
O que são configurações de design? Saiba mais aqui: [Configurações de design](/pt/aftersell/cart/design-settings).