How to add a condition’s checkbox to cart on Reach Shopify theme
I’ve written an article to let you know how to add an “Agree to terms and conditions” checkbox to Shopify cart page. With Reach theme, you have 3 place to show cart: cart page, cart drawer and popup after add a product to cart. So the previous article is not working on cart drawer and cart popup.
This article will guide you add a condition’s checkbox to cart for Reach theme.
- From your Shopify admin, go to Online Store > Themes.
- Find the Reach theme, and then click Actions > Edit code.
- In the Snippets directory, find to cart.liquid file and click it to open.
- Find to the line
<noscript>, paste the following code above this code:123456<div class="cart-totals"><div class="cart-agree-checkbox"><input type="checkbox" id="{% if cart_mini %}agree-mini{%else%}agree{%endif%}" class="agree" /><label for="{% if cart_mini %}agree-mini{%else%}agree{%endif%}" style="font-size: 15px;">I agree with the terms and conditions.</label></div></div>
- Click Save and you can close this file.
- In the Assets directory, find to a reach.js file and click it to open.
- Find to the line
this.handlerHelpers.onResponse(cartResponse);paste the following code below this code:123456789101112//Coded by HuraApps.Com - [email protected]/******************************/setTimeout(function(){$('section.cart').find('form').submit(function(e){if($(this).find('input.agree').is(':checked')){}else{e.preventDefault();alert('You must agree with the terms and conditions of sales to check out.');}});}, 1000);/******************************/
- After that, go to the end and paste the following code:12345678910//Coded by HuraApps.Com - [email protected]$(document).ready(function(){$('section.cart').find('form').submit(function(e){if($(this).find('input.agree').is(':checked')){}else{e.preventDefault();alert('You must agree with the terms and conditions of sales to check out.');}});});
- Click Save and you are done.
Happy coding!
