Agree button code on checkout papge
Section folder
1. in "main-cart-footer.liquid" (and "cart-notification.liquid" or "cart-notification-button.liquid") add in line 54 and in "cart-notification.liquid" or "cart-notification-button.liquid" I inserted it in line 24 or bottom of page:
<p style="float: none; text-align: right; clear: both; margin: 10px 0;">
<input style="float:none; vertical-align: middle;" type="checkbox" id="agree" />
<label style="display:inline; float:none" for="agree">
I agree with the <a href="https://www.chuchuextensions.com/policies/terms-of-service">terms and conditions</a>,
</label>
<a href="https://www.chuchuextensions.com/pages/shipping">shipping and delivery policy</a>,
</label>
& <a href="https://www.chuchuextensions.com/pages/return-policy">return policy</a>.
</label>
</p>
Assets folder (***The code will not allow the customer to proceed without checking to the checkbox***)
2. in "cart.js" (and "cart-notification.js") add this at the end of 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, shipping and delivery policy, & return policy of sale to check out.");
return false;
}
});
});
OR simplified policies as below
$(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, conditions, and policies of sale to check out.");
return false;
}
});
});
OR separate the policies as below
$(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 sale to check out.");
alert("You must agree with the shipping and delivery policy of sale to check out.");
alert("You must agree with the return policy of sale to check out.");
return false;
}
});
});
Layout folder (***The code will make sure the code library we are using is loading***)
3. in "theme.liquid" add this line within the head compartment:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>