How to block dynamic checkout cart buttons with a terms and conditions button in cart

How to block dynamic checkout cart buttons with a terms and conditions button in cart

CFTechsupport
Visitor
1 0 1

I have customized code in my dawn theme to add a terms and conditions checkbox. However, my Shoppay and Google pay buttons are bypassing this mandatory checkbox.

 

The code is in Edit code> Templates> cart-termsbox.liquid for anyone that can help:

 

<p class="cart-attribute__field">
  <input type="hidden" name="attributes[{{ block.settings.internal_label }}]" value="No" form="cart">
  <input id="termsbox_id" {% if block.settings.mandatory %}class="required" required {% endif %} type="checkbox" name="attributes[{{ block.settings.internal_label }}]" value="Yes" form="cart">
  <label for="termsbox_id" style="cursor: pointer;">
  {{ block.settings.prelink_text }}
  <a href="{{ block.settings.terms_page.url }}" target="_blank">{{ block.settings.link_text }}</a>
  {{ block.settings.postlink_text }}
  </label>
</p>
 
<style>
#termsbox_id {
transform: scale({{ block.settings.checkbox_scale }});
}
 
{% if block.settings.mandatory %}
#dynamic-checkout-cart, [name="checkout",][type="submit"] {
{% if cart.attributes[block.settings.internal_label] != "No" %}
pointer-events: auto;
opacity: 1.0;
{% else %}
pointer-events: none;
opacity: 0.5;
{% endif %}
}
{% endif %}
</style>
 
 
<script>
document.getElementById('termsbox_id').addEventListener('change', (event) => {
  if (event.currentTarget.checked) {
 
  document.getElementById("termsbox_id").value = "Agreed at " + (new Date()).toLocaleString();
  {% if block.settings.mandatory %}
  document.querySelector('[name="checkout"][type="submit"]').style.pointerEvents = 'auto';
    document.querySelector('[name="checkout"][type="submit"]').style.opacity = 1.0;
 
  document.getElementById('dynamic-checkout-cart').style.pointerEvents = 'auto';
    document.getElementById('dynamic-checkout-cart').style.opacity = 1.0;
    {% endif %}
  } else {
  {% if block.settings.mandatory %}
  document.querySelector('[name="checkout"][type="submit"]').style.pointerEvents = 'none';
    document.querySelector('[name="checkout"][type="submit"]').style.opacity = 0.5;
 
  document.getElementById('dynamic-checkout-cart').style.pointerEvents = 'none';
    document.getElementById('dynamic-checkout-cart').style.opacity = 0.5;
    {% endif %}
  }
})
</script>
Reply 1 (1)

ThePrimeWeb
Shopify Partner
2138 615 493

Hey @CFTechsupport,

Maybe put the buy now buttons in display none on page load and then through a JS click event, check if the box is ticked and switch them to display: block?

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!