Skip to main content
O bloco Header é a área fixa no topo do cart drawer, dando ao drawer um título claro e uma forma óbvia de fechá-lo. Você controla seu layout atribuindo Title, Logo e Close button às seções esquerda e direita. Como o Header é fixado no topo, ele permanece visível enquanto o restante do carrinho rola.
Bloco Header com título do carrinho, contagem de itens e controle de fechar no topo do drawer

​
Comportamento

  • O Header é fixado no topo do drawer e não rola com o body do carrinho.
  • O controle de fechar está sempre disponível e dispensa o drawer.

​
Configurações

O título é traduzível. Se o seu título resolver para vazio (por exemplo, uma tradução não definida), o carrinho volta a mostrar Cart para que o header nunca fique em branco. Os elementos aparecem na ordem em que você os seleciona, da esquerda para a direita, e cada elemento pode ser atribuído a apenas uma seção por vez.

​
Posicionamento e limites

  • Região: apenas top.
  • Máximo: 1 por estado do carrinho.
  • Estado: carrinho cheio e vazio (cada estado tem a própria instância do Header).
  • Adicionado a carrinhos novos por padrão em ambos os estados. Não é fixo, então você pode removê-lo ou ocultá-lo com o botão de olho.

​
Template personalizado

Suporta um template personalizado pela aba Code, que substitui a marcação nativa deste bloco pelo seu JSX. Estas são as props que ele recebe.
logoUrl é a única prop que não tem equivalente nativo: a imagem enviada do Header é renderizada apenas por um template personalizado. Se um lojista definiu um logo e ele não está aparecendo, é por isso.
Se você não conectar onClose a algo, os compradores ainda podem fechar o drawer clicando no overlay ou pressionando Escape, mas seu header não terá botão de fechar. Sempre inclua um.

​
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 do título do carrinho. Negrito e cor do texto são definidos no Rich Text Editor acima (na aba Settings), não aqui. O que são configurações de design? Saiba mais aqui: Configurações de design.