Skip to main content
O bloco Checkout button é a call to action principal no rodapé do carrinho, que leva os compradores ao checkout, oferecendo um caminho claro e proeminente do carrinho até o checkout. É um bloco obrigatório.

​
Comportamento

  • O botão resolve uma URL de checkout localizada e correta para o mercado, para que os compradores cheguem ao checkout do mercado certo. Se isso não puder ser resolvido, ele recorre ao link padrão /checkout.
  • Com Go to cart page instead of checkout ativado, o botão passa a apontar para /cart.
  • O clique navega via JavaScript, para que o tratamento de carrinho do próprio tema não possa interceptá-lo, mas ainda respeita intenções de nova aba (Cmd/Ctrl + clique, clique do botão do meio).
  • O clique emite o evento checkout do SDK, que você pode assinar.

​
Configurações

​
Posicionamento e limites

  • Região: parte inferior.
  • Máximo: 1 por estado do carrinho.
  • Estado: apenas carrinho cheio.
  • Bloqueado e adicionado por padrão. O Checkout button não pode ser removido nem ocultado, apenas reposicionado dentro do rodapé.

​
Template personalizado

Suporta um template personalizado pela sua aba Code, que substitui a marcação nativa deste bloco pelo seu JSX. Estas são as props que ele recebe.
Um botão de checkout personalizado perde o rastreamento de checkout. O botão nativo anexa um handler de clique que emite o evento checkout do SDK e registra a conversão para o analytics do carrinho. Esse handler não é passado para templates personalizados, então navegar apenas pelo href pula ambos.Se você precisar do evento, emita-o você mesmo em um onClick antes da navegação. O relatório de atribuição ainda não pode ser recuperado dessa forma, então prefira reestilizar o botão nativo com as configurações de design ou CSS personalizado, a menos que você realmente precise de uma marcação diferente.
Renderize href como está, sem definir um valor padrão. Um <a> sem href fica inerte, que é o comportamento correto no editor.

​
Design

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. O que são configurações de design? Saiba mais aqui: Configurações de design.