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

[HoppahDaphne]

Hi @gab33 

Your function to disable the pay buttons like Google and Apple pay is extremely helpful, so thank you!

However, I do have a small issue. I copied your code exactly into my template (I am using the theme Debut), but the pay buttons stay greyed out and unclickable even after selecting the checkbox. 

What am I doing wrong?

Cart-template.liquid:

<input type="submit" name="checkout"
class="cart__submit btn btn--small-wide"
value="{{ 'cart.general.checkout' | t }}">
</div>
<p style="float: none; text-align: right; clear: both; margin: 10px 0;">
<input style="float:none; vertical-align: middle;" type="checkbox" id="agree" />
<label style="display:inline; float:none" for="agree">
Ik ga akkoord met de <a href="/policies/terms-of-service"><strong>algemene voorwaarden</strong></a>.
</label>
</p>

<div class="cart__error-message-wrapper hide" role="alert" data-cart-error-message-wrapper>
<span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
{% include 'icon-error' %}
<span class="cart__error-message" data-cart-error-message></span>
</div>

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

</div>
</div>
</div>
</div>

theme.scss.liquid:

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

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.init);

$(document).ready(function() {
$('body').on('click', '[name="checkout"], [name="goto_pp"], [name="goto_gc"]', function() {
if ($('#agree').is(':checked')) {
$(this).submit();
}
else {
alert("Om de bestelling te kunnen plaatsen dien je akkoord te gaan met de algemene voorwaarden");
return false;
}
});
});

[goddessswag]

Hello -thank you doe this!   So I am using Brooklyn theme.  I completed your steps, "however"  since your post of 2019 - perhaps the code changed a little?

this code doesn't appear to be the same anymore    I tried adding "//" in front of it, and it def didn't work.

theme.checkoutIndicator();

I WAS able to add a check box at checkout - it says: I agree with the terms and conditions.  BUT - it still allows users to click on CHECKOUT without clicking the box

If you can update this line of code, that would be awesome!!!

[goddessswag]

Hi There.  This wasn't my original post.  My input here is from the last few weeks   I would say the code has changed a bit from 2019.

Hmmmm  I am not sure what else to tell you.  I wish I had something.  I would try and add the // again and make sure you save it.

I somehow got mine to work.  Maybe you can post a new thread?   Best of luck.  Sorry I can't help further.

This is what my code section looks like:

theme.checkoutIndicator = function() {
// Add a loading indicator on the cart checkout button (/cart and drawer)
theme.cache.$body.on('click', '.cart__checkout', function() {
$(this).addClass('btn--loading');
});
};

[developertmc]

Thanks for this post, it's very helpful.

How do I make the checkbox optional and how do I get that data on the product order?

I need to know if the customer checked or did not check the checkbox.

[goddessswag]

Hello - not sure if you are asking me or@gab33 ?   This is not my original post.

I would ask @gab33 

Wish I could assist but I don't know the answers to your questions.  I am not a developer or a guru.  I used the code for my brooklyn theme and it worked.

https://goddessswag.com  if you want to see my checkout set up.

[StatementCph]

I am currently using Parallax as theme.

Apparently with my theme it's very difficult to add this option on my checkout page. I tried to code it accordingly to the forum suggestions, but it didn't work. Can someone help me with it?

[Wyrock]

For me, I am in the Debut theme, and I had to insert the line of code for the checkbox below the submit to cart button. It was very finicky! Good luck!

[Andrea_Rausch]

Hello,

I have the same issue. Were you able to fix it?

Thank you

[Memoair]

Thank you! Made my day! Was about to have a mental breakdown.. hehe

[Natb]

I can see that the checkbox has been added to the "cart page" in the editor:

However, when the cart icon is clicked on the home page and the "quick view" is used it does not appear and can be bypassed:

I am using the Narrative theme, hoping someone can help me with a fix.  Thanks!