Shopify Tutorial: Making Sure a User Agrees to the Terms & Conditions Using jQuery

In this 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.

You can see an example of this here. You’ll need to add a product to the cart first, though.

1. Adding the checkbox in cart.liquid

In Template 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. In my case, I’ve placed the checkbox and its label directly above the checkout button. Here is what my cart page looks like:

2. Wrap your checkout buttons with a div with a unique ID

The next thing you want to do is wrap the buttons for checking out (this includes the regular checkout buttons as well as any other buttons added by Paypal or Google Checkout) with a special div so that we can target all checkout buttons in our Javascript code. This step is very theme-dependent, so if you’re unsure about anything please make a post on the forums.

As an example, your theme’s cart template might look like this:

<input type="submit" name="update" value="Update Cart" id="update-cart" class="btn update" />
<input id="checkout" class="btn checkout" type="submit" name="checkout"value="Check Out" />
{% if additional_checkout_buttons %}
<div class="additional-checkout-buttons">
	<p style="margin:20px 0;">- or -</p>
	{{ content_for_additional_checkout_buttons }}
</div>
{% endif %}

What you want to do now is wrap is in a new div, and give it a class called “submit-cart” (shown in red below). This class name is used for the jQuery script that we’re going to add in the next step.

<div class="submit-cart">
<input type="submit" name="update" value="Update Cart" id="update-cart" class="btn update" />
<input id="checkout" class="btn checkout" type="submit" name="checkout"value="Check Out" />
{% if additional_checkout_buttons %}
<div class="additional-checkout-buttons">
	<p style="margin:20px 0;">- or -</p>
	{{ content_for_additional_checkout_buttons }}
</div>
{% endif %}
</div>

3. Insert the jQuery code

The last step is to add the jQuery code that checks to see if the checkbox has been checked or not. In your Template Editor, create a new snippet, and name it “terms-and-conditions”.

Next, copy the code from this gist, paste it inside the “terms-and-conditions” snippet, and hit save.

Finally, in “theme.liquid”, place the code below right before the closing </body> tag.

{% include 'terms-and-conditions' %}

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. This code will work even if you have additional buttons for checking out (Paypal, Google Checkout).

DENIED!!!

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.

Hope that helped, ’til next time!

UPDATED: June 18th 2012 to make it easier to implement.

120 comments

Leave a Reply: