Shopify Tutorial: Making Sure a User Agrees to the Terms & Conditions Using jQuery
In this short tutorial, I will be walking you through how to prevent users from going to the checkout page unless they have agreed to the Terms and Conditions using jQuery. We’ll be doing this by adding a checkbox to the cart page, which if checked, will allow the user to go the the checkout page. If it’s not checked, an alert box will be shown, and the user will be prevented from going to the checkout page.
1. Download jQuery
You can download jQuery here.
2. Add jQuery to your theme assets
In the Shopify backend, navigate to Assets > Theme Editor. Under Theme Assets, click the Browse button, and navigate to where you saved the jQuery file from Step 1. Double click the file to upload.
3. Load up jQuery in theme.liquid
In Theme Editor, open theme.liquid. In the <head> section, enter the following code.
{{ 'jquery-1.3.2.min.js' |asset_url | script_tag }}
This code will load the jQuery script that you uploaded in the <head> section of all of your store’s pages.
4. Adding the checkbox in cart.liquid
In Theme Editor, open cart.liquid. Enter the following code – this will insert a checkbox and a label to your cart page. Please make sure that the ids of the checkbox and the label are the same (I named mine “agree”).
<input type="checkbox" id="agree"/>
<label for="agree">I agree with the Terms and Conditions</label>
The location of where the above code goes will depend on how you want to style your cart page, but it can really go anywhere within the cart.liquid template. For this example, I’m using the Minimify theme, and I’ve placed the checkbox and its label directly above the checkout button. Here is what my cart page looks like:
For the next step, you’re going to need the id of the checkout button’s <input>. The id will be used in the jQuery code in step 5. In my example, I gave the input an id named “checkout”.
5. Enter the jQuery code
The last step it to add the jQuery code that checks to see if the checkbox has been checked or not. Open theme.liquid again, and enter the following code in the <head> section. The id of the checkout button is labeled in red. Be sure to add a pound sign (#) before the name of your checkout button’s id.
<script type="text/javascript">
$(document).ready(function(){
$("#checkout").click(function(){
if($('#agree').is(':checked')){
$("#checkout").submit();
}
else{
alert("Please agree to the Terms and Conditions");
return false;
}
});
});
</script>
$(“#checkout”).click(function(){}); is a function that runs whenever the input with the id “checkout” is clicked. It then checks if the checkbox with id “agree” is checked or not. If it is checked, then it will proceed to the checkout page. If not, it will show an alert box with the message “Please agree to the Terms and Conditions”, and the user will NOT be taken to the checkout page.
If you are using another Javascript framework such as Prototype in your theme, you may have to use noConflict mode. Shown below is the same code but in noConflict mode.
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("#checkout").click(function(){
if(jQuery('#agree').is(':checked')){
jQuery("#checkout").submit();
}
else{
alert("Please agree to the Terms and Conditions");
return false;
}
});
});
</script>
Once this code is in place, your customers will not be able to proceed to the checkout without having checked the “I agree” checkbox. If they don’t have it checked, they will be shown a Javascript alert box instead of being taken to the checkout page.
Conclusion
This may be a bit bothersome from a buyer’s point-of-view, but from my understanding some places have laws that make it imperative to have an “I agree” checkbox when buying products online. You can download my example theme with the code in action here.
Hope that helped, ’til next time!
Nice write-up Tetsuro!
I had to do this a few weeks ago for a client. Mine was a bit trickier though. This could only be present in the cart if 1 certain item was present, which required a three month recurring charge commitment. It also had to allow for a combination of that item plus other items. So I added a conditional to the class name on the checkbox for jquery to hook that would change depending on IF that one item was in the cart or not.
Thanks for the tutorial Tetsuro. Nice job!
This is beautiful jQuery code. It could not be any better. Lovely. Vert good tutorial. All details in place, very clear. Pretty too. Fun.
Aaaaaahhhhhhh.
Jamie: Cool thanks! Man, that does sound a bit tricky. I guess you just used an if-statement that would output the checkbox only if the {{ item.product.title }} matched that of the specific product eh?
Gavin: Thanks! Would you recommend using noConflict mode for all themes? I typically write jQuery code normally (with the $), but perhaps this is bad practice… I did mention noConflict mode in my write-up though
Caroline: Thanks Caroline! I’m actually not very good with Javascript, so your comment was very reassuring
> Would you recommend using noConflict mode for all themes?
Definitely.
I guess you just used an if-statement that would output the checkbox only if the {{ item.product.title }} matched that of the specific product eh?
Exactly! Not tricky really.
Tetsuro,
Brilliant Jquery – altho I did stuble on the id=”checkout”, eventually figured to put that in my cart.liquid file, right after name=”checkout”.
I presumed it would just work – which it almost did. Had to use the no conflict script, but hey – it’s great.
Thank you for taking the time to write a nice, simple to follow set of rules, for us newbies!!
hi tetsu, great tutorial and thanks for sharing. I installed it on http://www.swingcity.me and it works but it changed the checkout layout. you can see the screenshots here: http://picasaweb.google.de/swingcheese/FreePixs?feat=directlink
it’s not too important but maybe you know a solution.
thank you in advance and best regards from berlin,
philippe
Hey there Philippe, greetings from Ottawa
. I think I know exactly what’s going on here. From what I see from the two screenshots, it looks like the code that you inserted (which I wrote in jQuery) is conflicting with the MooTools script that you are using for the multiple options dropdown.
To fix this, please use the noConflict mode script that I have above, instead of the first script. This should make it so that my script won’t make the MooTools script for multiple options go bonkers.
Let me know how that goes!
hi tetsuro,
yes it works like a charm now! thank you.
Thanks Tetsuro!
Adding in
jQuery.noConflict();
jQuery(‘#checkoutButton’).html(”);
Please enable Javascript to proceed with checkout!
your shoppers have to enable Javascript before actually even being able to submit.
*ups* – long time no HTML post :/
Just drop me a mail for the source
Hi Stefan, hmm I’m not sure if I fully understood your comment. Are you trying to check if the user has Javascript enabled?
Thanks for reading!
Hello Tetsuro:
I am having problems with getting the pop-up to well pop-up if the box is not check. I have uploaded the code I am using and where I placed it. If you could help at all I would appreciate it. Im stuck, big time.
http://i124.photobucket.com/albums/p32/graphicmaniac/themeliquid.jpg
http://i124.photobucket.com/albums/p32/graphicmaniac/cartliquid.jpg
Thanks so much to all of you!
Does anyone have any feedback they can supply to me? I researched over the weekend and am still not getting the checkbox to work. Please help!! I appreciate it very much.
Hi Mandy,
Just took a look at your site’s source code, and it doesn’t look like you’ve inserted the jQuery framework (step 2-3), as well as the Javascript code (step 5). Both of these are required in order for this to work.
Please go over the steps again and let us know how it goes.
Hello,
I can not install this fonction. it doesn’t work.
Perhap’s I miss something.
1st thing I still have the jquery-1.3.2.min.js
It was include in the theme.
I have the Reconfigured templates.. .Perhap’s it’s the reason why…
I did add the checkbox in cart.liquid= OK
I didn’t add this code cause it was still in my theme:”{{ ‘jquery-1.3.2.min.js’ |asset_url | script_tag }}
”
I did replace:
»
by
»
(I add # at checkout)
I had try with the noConflict mode too…
If I put # before checkout nothing happened except a refresh…
If I take of the # in the cart.liquid I’m in the checkout page…
I had try to change the js file name as jqueryalert.js…
Same problem…
Can some one help me?
hey Marco, can you post the URL to your store? Maybe looking at your source code will help me figure out what’s going on.
Cheers,
Tets
Hello, I came across this blog article while searching for help with JavaScript. I have recently switched browsers from Chrome to IE. Now I seem to have a issue with loading JavaScript. Everytime I browse page that needs Javascript, my computer freezes and I get a “runtime error javascript.JSException: Unknown name”. I can’t seem to find out how to fix the problem. Any help is greatly appreciated! Thanks
This is great, but not quite what I am trying to do. I actually need to require a number in a textarea. How do I alter this to require the text field to not be empty and to be a numerical entry?
Yo Kevin. Instead of checking for a checked checkbox, which the answer is either yes or no, you want to look at the value of a text field input.
So looking above at Tetsuro’s example at the top of the page, you need to replace his live 5 with this:
if(jQuery(‘#kevinsNumber’).attr(‘value’) == null){
So that will look at your input with an id=kevinsNumber, and see if it has a value. If it does, then it will continue and submit the form on the next line. If not his code pops a js alert.
If you wanted to make sure the number was at least “3″ or whatever, do this:
if(jQuery(‘#kevinsNumber’).attr(‘value’) >= 3){
Peace out. Hope that helps ya.
~ brent
Cool Tetsuro. A few comments:
Grabbing the submit event would make the func fire on BOTH the click AND ‘enter’ key press.
example: jQuery(“#checkout”).submit(function(){
Also, Kevin, revisiting that input value, I think I would look for the value of the field instead of checking for null. Like this:
FOR EMPTY if(jQuery(’#kevinsNumber’).val()==”){
FOR A VALUE if(jQuery(’#kevinsNumber’).val()>=’3′){
cheers,
~ brent
Great tutorial!
Do you by any chance also have one on how to insert a logo to the Minimify theme?
That would be really helpful too.
Mette
Thanks for a great tutorial!
I do have a problem though. The checkbox is there but not checking it does not cause a pop up. I followed the steps and read the advice above – any clues for me?
I’m completely new at html and would appreciate any help!
My store is http://shop.endomondo.com/
Thanks!
Mette
Btw, I solved the logo thing.
I have followed the instructions, but I am still having an issue. When you click on the go to checkout button, it just refreshes the page, no pop-up or anything. It doesn’t matter whether the boxed is check or not.What should I look for in solving this issue.
Thanks
CJ
Brent: Thanks a bunch for your help and input. Do you think it’s a bad thing if pressing ‘enter’ calls the function as well? Personally I think it’s okay to leave it as is because some people may choose to tab into the submit button and push enter.
Mette: Sorry I couldn’t get back to you sooner, but good to know you got your logo working. It seems like the cart page is working as well. Please let me know if you need any help.
CJ: Strange, it shouldn’t be refreshing anything. Can you post the URL to your store? Thanks.
Hi Tetsuro,
Many thanks for the tutorial. It is working brilliantly with most browsers on our shopify site – except with Opera which happily lets you checkout whether you check the box or not. (I’m currently testing with Opera 9.2). Anything I can add to the script to get Opera to work? (I tried both scripts and both fail with Opera).
Many thanks
Thanks so much for this. I have a lot of liability and need to have customers select this option!
I’m new to all this however, and can’t seem to get it to work. I think adding the # sign is the most confusing part. The Agree box has shown up, but I’m still able to go through the checkout without it checked.
Also, curious, where to add the text for the terms and conditions? That should be a link for another pop-up, yes?
Thanks in advance,
Laura
Thanks for this Tetsuro! I am launching my site next week and I needed this functionality built in. I was able to add it to my site in less than 20 minutes following your step by step guide.
It’s not often I find a useful 2 year old post on anything tech related…
Hey Tetsuro,
Thanks for the tutorial. Is it possible that this won’t work if there are other jQuery scripts running on the cart? For example my store has a jQuery script for a “gift” box that, when checked, generated additional customer input boxes. Will adding another checkbox complicate this? Thanks
Dan
Yep, that shouldn’t be an issue. However, if you’re using noConflict mode for your other scripts, make sure the script from this tutorial is in noConflict mode as well.
David: thanks! I’m glad you found it useful!
Hi Tetsuro,
Great script! This is (almost) exactly what I need.
If I combine some of your script with “Gift wrapping” (by Caroline Schnapp) I might be able to insure that our costumers
1) will add packaging
and
2) wont be able to remove it?
I was thinking about hiding the check box and making it “pre checked” – is this even possible?
Anyways, GREAT tutorial
Easy to understand and very well written.
Our page is http://www.cckis.dk
Thanks
Oi, I figured this one out myself
I works perfectly. So thankfull for this script.
/Christian O
Hi,
I’ve following problem:
I installed everything following the instruction, but now it gives me always an alert box – whatever I do. For example, if i’m adding a product to my cart it also tells me “xxx was added to your shopping cart / with an ok button”.
Any solution here?
Great tutorial, got it installed quickly, with only a minor bug I’m curious about. The script runs when the customer clicks on the “Update Cart” button as well, which isn’t catastrophic, but is confusing. If they check the box, update their cart, the checkbox returns to un-checked. Again, not catastrophic, but confusing. Any thoughts on a fix?
Best,
Andrew
Birgit and Andrew: It sounds like an issue with the jQuery selector. What are your shop’s URLs?
http://www.blackstarchocolates.com Thanks for taking a look!
Hey tetsuro this is great!
I’ve been looking for this scrip for a while, glad i came across to your site.
I do have a small question, how do you remove or change the “this page at http://ABCD.myshopify.com says” on the pop-up screen?
I would rather to have my primary domain name shown, other than the shopify one.
Once again thank you for your time and love your work!
Regards,
Mr.Piggy
Hey Andrew, it looks like all of your products are sold out, so I can’t test out the cart page
Hey Mr. Piggy, I’m actually not too sure which popup you’re referring to. Can you point me to a specific page that’s showing that popup?