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