Adicione uma caixa de seleção abaixo do botão de checkout e impeça o comprador de prosseguir até que ele a marque. Útil para aceite de termos, verificações de idade e confirmações de produtos sob encomenda.
O evento checkout não pode cancelar o checkout. Ele dispara como uma notificação logo antes de o navegador navegar, então retornar false ou chamar preventDefault não faz nada. A única forma de controlar o checkout é impedir que o botão responda a cliques antes de ser pressionado, que é o que esta página mostra.Trate isto como um obstáculo de UI, não uma garantia legal. Um comprador determinado ainda pode chegar ao checkout diretamente.
- Um bloco Custom code abaixo do botão de checkout renderiza a caixa de seleção.
- Enquanto a caixa está desmarcada, o bloco adiciona uma classe aos botões de checkout e de pagamento expresso do carrinho através do shadow root.
- O Custom CSS faz essa classe desativar os cliques.
Passo 1: adicione o bloco da caixa de seleção
props.cart importa: ela reaplica a classe depois que o carrinho re-renderiza, o que de outra forma a apagaria.
Em Cart settings → Custom CSS:
pointer-events: none é o que realmente bloqueia o clique; a opacidade só mostra ao comprador o porquê.
Na pré-visualização, confirme que:
- O botão de checkout fica esmaecido e não responde a cliques ao carregar.
- Marcar a caixa o habilita; desmarcá-la desativa o botão novamente.
- Os botões de pagamento expresso também estão bloqueados.
- Adicionar ou remover um item não reabilita o botão enquanto a caixa está desmarcada.
Esse último é a falha comum. Se o botão se reabilita sozinho após uma mudança no carrinho, o effect não está reexecutando. Verifique se props.cart está no array de dependências.
A caixa de seleção é um estado só do navegador; ela nunca chega ao pedido. Para registrar o aceite, carimbe-o em cada linha como uma property no momento do adicionar ao carrinho:
Adicione isso ao formulário de produto do seu tema. O Shopify lê properties[...] direto do formulário, então o valor chega ao pedido seja quem for que realize a adição: Aftersell, o tema ou outro app.
Uma property com prefixo _ fica fora da linha visível ao comprador, mas ainda chega à Shopify, então aparece no pedido. Isso registra qual versão dos termos estava no ar, não que o comprador marcou a caixa.
- Mire apenas em classes
cart-external-*. As gêmeas cart-internal-* são o encanamento interno do carrinho, não um ponto de apoio para seu código. Veja Custom CSS.
- Verifique se
shadowRoot existe antes de usá-lo. Ele é undefined até o carrinho inicializar.
- O bloco não renderiza nada até o carrinho carregar, então o botão de checkout nunca fica ativo por um instante antes de o bloqueio ser aplicado.
- Um bloco React que lança um erro não renderiza nada e o resto do carrinho continua, o que aqui significa um botão de checkout sem proteção. Teste na pré-visualização antes de publicar.
