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.
$(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;
}
});
});
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!!!
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.
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?
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!
Hello. I’m not an expert but reading all of the replies in here, I was able to do it on my Narrative theme.
I followed the steps posted here but I did some modifications to make it work on my theme.
I repeat, I"M NOT AN EXPERT I JUST DID THIS ON MY OWN haha! It may or may not work for you.
So here it is…
First, I put these codes on my custom.js and NOT in the theme.js:
$(document).ready(function() {
$('body').on('click', '[name="checkout"], [name="goto_pp"], [name="goto_gc"]', function() {
if ($('#agree').is(':checked')) {
$(this).submit();
}
else {
alert("You must agree with the terms and conditions of sales to check out.");
return false;
}
});
});
Second, my cart is a drawer, so I also put these codes on my cart-drawer.liquid. Not just on my cart-template.liquid.
NOTE: THESE CODES ARE MODIFIED. NOT THE ONE ORIGINALLY POSTED AT THE TUTORIAL.
Ok so people are not very good at explaining on how to do this for people who are not familiar with programming. I struggled and finally completed this, although half-way.
Did this on Debut theme, the “Accept to terms and conditions” warning shows up only after “Add to cart” is selected. If i select “Buy now” nothing happens as it bypasses the Cart directly to the Checkout so i had to disable Buy now button. Would appreciate if anyone could offer a solution so that the Terms and conditions checkbox appears in the window where customer must enter billing and shipping information (After clicking “Add to cart” or “Buy now”). I suppose it’s called Contact_information / page.contact.liquid.
Go to “Online store”-> Select your live theme → Actions → Edit code
Select Assets folder, find theme.js
Go to the very end and paste the code:
$(document).ready(function() {
$(‘body’).on(‘click’, ‘[name=“checkout”], [name=“goto_pp”], [name=“goto_gc”]’, function() {
if ($(‘#agree’).is(‘:checked’)) { $(this).submit(); }
else {
alert(“You must agree with the terms and conditions of sales to check out.”); return false;
}
});
});
You can translate text “You must agree with the terms and conditions of sales to check out.” to whatever language your shop is directly in the code.
Click Save, then go Sections->find Cart-template.liquid
Look for this code using Ctrl+F and search for cart.general.checkout
I got it to work. Now I need to know how to make the error message inline instead of a popup. Like if they don’t click the box, I want the error message to point to the box.
I’m looking for this as well, all i get is the native browser pop-up. But i want the error message appear in red underneath the checkbox, so it’s in context.
I tried adding “//” in front of it, and it def didn’t work.
I would say the code has changed a bit from 2019.
