> ## 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 Notes
> O bloco Notes do Aftersell Cart: um campo recolhível de notas do pedido que salva instruções do comprador no carrinho e no pedido.
> O bloco **Notes** é um campo recolhível onde os compradores podem adicionar notas do pedido ou instruções especiais (mensagens de presente, instruções de entrega e assim por diante) sem sair do carrinho. A nota é salva no carrinho e levada até o pedido.
## Comportamento
* O campo é um **elemento recolhível**, recolhido por padrão. Recolher é apenas visual — uma nota salva continua valendo. Quando recolhido com uma nota salva, uma marca de verificação aparece para que o comprador saiba que a nota está armazenada.
* A nota **é salva quando o comprador clica fora** (no blur), com feedback de status de salvando / salvo / erro.
* Se a nota do carrinho mudar em outro lugar — na página `/cart` ou em outra aba — o campo é sincronizado com ela, a menos que o comprador já tenha começado a digitar, para que a nota em andamento nunca seja sobrescrita.
## Configurações
| Configuração | O que controla | Padrão |
| --------------- | -------------------------------------------- | ------------------------------------- |
| **Title** | O rótulo do campo. Rich text, traduzível. | `Order notes` |
| **Placeholder** | O texto de placeholder do campo. Traduzível. | `Special instructions for your order` |
## Posicionamento e limites
* **Região:** body ou bottom.
* **Máximo:** 1 por estado do carrinho.
* **Estado:** apenas carrinho cheio.
* Não é adicionado por padrão. Não é fixo — você pode removê-lo ou ocultá-lo.
## 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 |
| --------------- | ------------------------------------------ | -------------------------------------------------------------------------------------------------------- |
| `titleHtml` | `string` | HTML do título em rich text sanitizado. Vazio quando o lojista deixou o título em branco. |
| `titleText` | `string` | Título em texto simples. Use-o para o `aria-label` do textarea e como cabeçalho quando não há rich text. |
| `hasTitle` | `boolean` | Se alguma forma de título está presente. Controla o cabeçalho e o `aria-label` da alternância. |
| `placeholder` | `string` | Placeholder mostrado no campo de nota vazio. |
| `noteInput` | `string` | Texto atual da nota. |
| `status` | `'idle' \| 'saving' \| 'saved' \| 'error'` | Ciclo de vida do salvamento. Alimenta a região live de status falado. |
| `statusLabel` | `string` | Anúncio resolvido da região live para `status`. Vazio quando em idle. |
| `displayStatus` | `'idle' \| 'saving' \| 'saved' \| 'error'` | Status para o ícone. Igual a `status`, exceto que uma nota recolhida com texto aparece como `saved`. |
| `isExpanded` | `boolean` | Se o campo de nota está expandido. Recolher é apenas visual; a nota sempre persiste. |
| `onNoteChange` | `(value: string) => void` | Atualiza o texto da nota. Chame com o novo valor, por exemplo do `onInput` do textarea. |
| `onNoteBlur` | `(event: unknown) => void` | Salva a nota. Anexe diretamente ao `onBlur` do textarea; ela lê o valor do evento. |
| `onToggle` | `() => void` | Alterna o estado de expandir e recolher. |
**A nota é salva no `onNoteBlur`, não a cada tecla.** Conecte tanto `onNoteChange` quanto `onNoteBlur`, ou as notas silenciosamente nunca persistirão. Mantenha o texto de status em uma região live para que leitores de tela anunciem salvando e salvo.
## 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 de dois elementos. Use o seletor **Text element** para alternar entre eles.
**Title** — o cabeçalho da seção acima do campo de nota. O negrito é definido no Rich Text Editor acima (na aba Settings). A cor do texto é definida na seção Toggle de Design.
| Configuração | O que controla | Padrão |
| ------------------ | --------------------------------- | ------ |
| **Size** | Tamanho da fonte. | `14px` |
| **Line height** | Multiplicador de altura da linha. | `1.4` |
| **Letter spacing** | Espaçamento entre caracteres. | Normal |
**Note field** — o texto dentro do textarea onde os compradores digitam a nota.
| Configuração | O que controla | Padrão |
| ------------------ | --------------------------------------------------------- | --------------------------------- |
| **Text color** | Cor do texto da nota. | Herda da cor de texto do carrinho |
| **Size** | Tamanho da fonte. | `14px` |
| **Weight** | Peso da fonte — Light, Regular, Medium, Semibold ou Bold. | Regular (400) |
| **Line height** | Multiplicador de altura da linha. | `1.5` |
| **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).