Visão geral

Este tutorial mostra como adicionar uma caixa de seleção abaixo do botão de checkout que exige que os clientes concordem com os termos e condições da sua loja. Quando desmarcada, os botões de checkout e de pagamento expresso ficam desativados. Esta é uma ótima maneira de garantir conformidade legal, definir expectativas claras e adicionar profissionalismo à experiência do seu carrinho.

O que esta personalização faz

Adiciona uma caixa de seleção de termos e condições abaixo do botão de checkout
Impede que os clientes finalizem a compra até que concordem
Bloqueia o botão de checkout padrão. Na Versão 1 do módulo de pagamentos expressos, também deixa os botões expressos acinzentados — veja a nota abaixo se você estiver na Versão 2
Suporta texto e link totalmente personalizáveis

Esta personalização requer conhecimentos básicos de HTML, JavaScript e CSS. É mais indicada para donos de loja ou desenvolvedores com conhecimento iniciante de programação.

A parte dos botões expressos funciona apenas na Versão 1. O script procura por #upcart-additional-checkout-buttons e o CSS estiliza .upcart-express-pay-button — ambos pertencem ao módulo de pagamentos expressos da Versão 1. A Versão 2 renderiza #upcart-express-payments e clona os próprios botões da Shopify, que não carregam nenhum desses seletores, então o checkout expresso permanece clicável mesmo quando a caixa está desmarcada. O botão de checkout padrão é bloqueado em ambas as versões.

Passo 1: Adicione o HTML personalizado

Vá em Upcart > Cart Editor > Settings > Custom HTML
Cole o seguinte em Above announcements/rewards:

<script>  
  function TermsCheckboxUpdate() {  
    var checkbox =  
      window.upcartDocumentOrShadowRoot.querySelector("#agree");  
    var termsWarning =  
      window.upcartDocumentOrShadowRoot.querySelector(".upcartTermsWarning");  
    var checkoutButton =  
      window.upcartDocumentOrShadowRoot.querySelector(".upcart-checkout-button");  
    var cartElement =  
      window.upcartDocumentOrShadowRoot.querySelector(".upcart-cart");  
    var expressButtons =  
      window.upcartDocumentOrShadowRoot.querySelector(  
        "#upcart-additional-checkout-buttons"  
      );  
  
    if (checkbox.checked) {  
      termsWarning.style.display = "none";  
  
      if (checkoutButton) {  
        checkoutButton.classList.remove("upcartDisableCheckoutButton");  
      }  
  
      if (cartElement) {  
        cartElement.classList.remove("style_upcartDisableExpressButton");  
      }  
  
      if (expressButtons) {  
        expressButtons.classList.remove("upcartDisableExpressButton");  
      }  
    } else {  
      termsWarning.style.display = "block";  
  
      if (checkoutButton) {  
        checkoutButton.classList.add("upcartDisableCheckoutButton");  
      }  
  
      if (cartElement) {  
        cartElement.classList.add("style_upcartDisableExpressButton");  
      }  
  
      if (expressButtons) {  
        expressButtons.classList.add("upcartDisableExpressButton");  
      }  
    }  
  }  
  
  window.upcartSubscribeCartLoaded(() => {  
    var checkbox =  
      window.upcartDocumentOrShadowRoot.querySelector("#agree");  
  
    if (checkbox) {  
      checkbox.setAttribute("onclick", "TermsCheckboxUpdate()");  
    }  
  
    TermsCheckboxUpdate();  
  });  
</script>

Nota sobre legado: os callbacks window.upcartOnCartLoaded ainda funcionam, mas estão obsoletos e registram avisos no console. Use upcartSubscribeCartLoaded para todos os novos scripts.

Cole o seguinte em Below checkout button. Atualize o link e o texto para corresponder aos termos da sua loja:

<div class="upcartTermsWrapper">  
  <div class="upcartTermsCheckboxWrapper">  
    <input id="agree" type="checkbox" />  
    I accept the  
    <a  
      class="upcartTermsAnchor"  
      href="https://yourstore.com/terms"  
      target="_blank"  
    >  
      Terms & Conditions  
    </a>.  
  </div>  
  
  <div class="upcartTermsWarning">  
    Please accept the Terms & Conditions above before continuing.  
  </div>  
</div>

Passo 2: Adicione o CSS personalizado

Vá em Upcart > Cart Editor > Settings > Custom CSS
Cole o seguinte para controlar o estilo:

.upcartDisableCheckoutButton {  
  pointer-events: none !important;  
  background-color: grey !important;  
  opacity: 0.5 !important;  
}  
  
.upcartDisableExpressButton {  
  pointer-events: none !important;  
}  
  
.upcartTermsWarning {  
  text-align: center;  
  width: 100%;  
  color: red;  
  font-size: 14px;  
  font-weight: bold;  
}  
  
.upcartTermsAnchor {  
  text-decoration: underline !important;  
  color: #0000EE;  
  font-weight: bold;  
  font-size: 14px !important;  
  padding: 0 !important;  
}  
  
.upcartTermsWrapper {  
  width: 100%;  
}  
  
.upcartTermsCheckboxWrapper {  
  font-size: 14px;  
  text-align: center;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  gap: 5px;  
}  
  
.upcart-cart.style_upcartDisableExpressButton  
  .upcart-express-pay-button {  
  background-color: grey !important;  
  opacity: 0.5 !important;  
}

Você pode alterar as cores para combinar com a sua marca atualizando os valores de color, background-color e opacity.

Resultado final

Quando os clientes abrem o carrinho:

Os botões de checkout e expressos ficam desativados até que a caixa de seleção seja marcada
Uma mensagem de aviso em vermelho aparece se eles tentarem prosseguir sem concordar
Assim que a caixa é marcada, todos os botões ficam ativos

Precisa de ajuda?

Para implementações avançadas ou requisitos mais complexos, recomendamos trabalhar com um Shopify Expert. A equipe de suporte do Upcart não presta assistência na escrita ou na solução de problemas de código personalizado. Ver Shopify Experts

Primeiros passos

Módulos do carrinho

Configurações do carrinho

Botão de carrinho fixo

Multicart

Personalizações

Análises

Integrações e compatibilidade

Faturamento e conta

Solução de problemas

Adicione uma caixa de seleção obrigatória de termos e condições ao seu carrinho

Visão geral

O que esta personalização faz

Passo 1: Adicione o HTML personalizado

Passo 2: Adicione o CSS personalizado

Resultado final

Precisa de ajuda?

​Visão geral

​O que esta personalização faz

​Passo 1: Adicione o HTML personalizado

​Passo 2: Adicione o CSS personalizado

​Resultado final

​Precisa de ajuda?

Visão geral

O que esta personalização faz

Passo 1: Adicione o HTML personalizado

Passo 2: Adicione o CSS personalizado

Resultado final

Precisa de ajuda?