Cart - Add an 'Agree to terms and conditions' checkbox

Highlighted
Tourist
4 0 6

Hello, this tutorial is really helpful and I manage to add a required checkbox on my cart page.

However, the "required" field doesn't prevent the customer to proceed with checkout through the additional checkout buttons (Google Pay, Apple Pay etc). Is there any way to block the user to compile required fields before heading to the quick checkout experience?

 

Thanks in advance

 

EDIT: I was able, in the meantime, to disable the buttons until the checkbox is selected:

 

theme.js

$("#additional-buttons-c").addClass("div-disabled");
$(document).ready(function() {
  $('body').on('click', '[name="agree"]', function() {
    if ($('#agree').is(':checked')) {
      $("#additional-buttons-c").removeClass("div-disabled");
    }
    else {
      $("#additional-buttons-c").addClass("div-disabled");
    }
  });
});

theme.scss.liquid:

.div-disabled {
    pointer-events: none;
    opacity: 0.4;
}

cart template:

{%- if additional_checkout_buttons -%}
<div id="additional-buttons-c" class="additional-checkout-buttons">{{ content_for_additional_checkout_buttons }}</div>
{%- endif -%}
Highlighted
Excursionist
20 0 0

Hi , Would you mind letting me know how you find the link of URL of your terms and conditions page? Thanks in advance 

0 Likes
Highlighted
Tourist
6 0 0

Hey thanks for the update Gab,

 

any chance you could send a screenshot of what it would look like incorporated into your code?

 

Thanks in Advance


@gab33 wrote:

Hello, this tutorial is really helpful and I manage to add a required checkbox on my cart page.

However, the "required" field doesn't prevent the customer to proceed with checkout through the additional checkout buttons (Google Pay, Apple Pay etc). Is there any way to block the user to compile required fields before heading to the quick checkout experience?

 

Thanks in advance

 

EDIT: I was able, in the meantime, to disable the buttons until the checkbox is selected:

 

theme.js

$("#additional-buttons-c").addClass("div-disabled");
$(document).ready(function() {
  $('body').on('click', '[name="agree"]', function() {
    if ($('#agree').is(':checked')) {
      $("#additional-buttons-c").removeClass("div-disabled");
    }
    else {
      $("#additional-buttons-c").addClass("div-disabled");
    }
  });
});

theme.scss.liquid:

.div-disabled {
    pointer-events: none;
    opacity: 0.4;
}

cart template:

{%- if additional_checkout_buttons -%}
<div id="additional-buttons-c" class="additional-checkout-buttons">{{ content_for_additional_checkout_buttons }}</div>
{%- endif -%}

 

0 Likes
Highlighted
Tourist
4 0 6

The complete code is already pasted above.

Best regards

0 Likes
Highlighted
New Member
1 0 0

Hi,

 

thanks for the tutorial. This really worked fine for me!

But I need more than 1 check box.

Can you give me code for second checkbox?

 

Thank  you!!

0 Likes
Highlighted
New Member
1 0 1

Tip: It's not possible to add the checkbox to the checkout pages. It can be added only to the cart page that exists at http://www.your-shop-URL.com/cart.

And this is exactly the kind of restrictions that make me move to another solution as soon as I can, because -aside of the fact that I don't feel free to do what I want with my shop- the checkbox is a mandatory thing in some countries, and having it in the cart before payment pages is a very bad choice as it hurts conversions.

Highlighted
Tourist
8 0 1

It's a shame that shopify don't offer the possibility to add this checkbox........

Highlighted
Tourist
8 0 1

Thanks for the tutorial. I'm using Debut and the button now shows on my site, but it can be bypassed by either not simply marking the box or clicking "buy now" button. Moreover, now when you click "Buy now" button, the button fades away before taking you to checkout, resulting in a longer waiting time before reaching the checkout page.

Any solution?

P.S I'm using the latest debut version, which is probably updated compared to the one of this tutorial.


0 Likes
Highlighted
Excursionist
13 0 3

hi there,

could you find a solution for the error in the "required" portion,i am still unable to find the perfect solution for this. Easily can be bypassed without giving tick mark in the check box.

Can you help me?

 

0 Likes
Highlighted
Excursionist
13 0 3

@gab33 

hi there,

could you find a solution for the error in the "required" portion,i am still unable to find the perfect solution for this. Easily can be bypassed without giving tick mark in the check box.

Can you help me?