Cart - Add an 'Agree to terms and conditions' checkbox

Highlighted
New Member
1 0 0

Hello TyW,

Thanks for sharing such magical things to all of us.

I actually am not an expert on editing code, and please do me a favor.

I am using the theme Narrative with a drawer cart, and follow the instruction of the sectioned theme, yet the checkbox and sentence do not appear.

What information should I provide to let you figure it out?

Thank again.

0 Likes
Highlighted
Tourist
6 0 0

Hello. I'm not an expert but reading all of the replies in here, I was able to do it on my Narrative theme.

I followed the steps posted here but I did some modifications to make it work on my theme.

I repeat, I"M NOT AN EXPERT I JUST DID THIS ON MY OWN haha! It may or may not work for you.

So here it is...

 

First, I put these codes on my custom.js and NOT in the theme.js:

 

  $(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 sales to check out.");
        return false;
      }
    });
  });

 

 

Second, my cart is a drawer, so I also put these codes on my cart-drawer.liquid. Not just on my cart-template.liquid.

NOTE: THESE CODES ARE MODIFIED. NOT THE ONE ORIGINALLY POSTED AT THE TUTORIAL.

I added attribute to the <a> tag. So my T&C will open as a POPUP.

If you want to open it in a NEW TAB instead, just change the target="popup" to target="blank" and remove the following words up to false;.

I also added a style property inside the <a> tag with the color that I want for the link. You can remove it or change it whatever you like.

 

<p style="text-align: center"; clear: both; margin: 10px 0;">
<input style="float:none; vertical-align: middle;" type="checkbox" id="agree" required="required" />
<label style="display:inline; float:none" for="agree">
I agree with the <a href="/pages/terms-conditions" target="popup" onclick="window.open('http://alibaby.ph/pages/terms-conditions','popup','width=600,height=600'); return false;" style="color: #ff8da0">terms and conditions</a>.
</label>
</p>

 

 

These are the results:

popup.png

 

cart.png

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

BONUS:

I tried adding the same codes on my customers/register.liquid and voila! IT WORKED! LOL.

I added some style to make it centered.

This is how my liquid file looked like.

 

<!-- /templates/customers/register.liquid -->
<div class="page-width customers-register">
  <div class="grid">
    <div class="grid__item medium-up--four-fifths medium-up--push-one-tenth">
      <div class="customers-register__container">
        <h1 class="customer-form__title h2" style="text-align: center">{{ 'customer.register.title' | t }}</h1>

        {% form 'create_customer' %}
        {{ form.errors | default_errors }}

        <div class="grid">
          <div class="grid__item medium-up--one-half">
            <label for="FirstName" class="label--hidden">{{ 'customer.register.first_name' | t }}</label>
            <input type="text" name="customer[first_name]" id="FirstName" placeholder="{{ 'customer.register.first_name' | t }}" {% if form.first_name %}value="{{ form.first_name }}"{% endif %} autocapitalize="words" autofocus>
          </div>

          <div class="grid__item medium-up--one-half">
            <label for="LastName" class="label--hidden">{{ 'customer.register.last_name' | t }}</label>
            <input type="text" name="customer[last_name]" id="LastName" placeholder="{{ 'customer.register.last_name' | t }}" {% if form.last_name %}value="{{ form.last_name }}"{% endif %} autocapitalize="words">
          </div>
        </div>

        <label for="Email" class="label--hidden">{{ 'customer.register.email' | t }}</label>
        <input type="email" name="customer[email]" id="Email" class="{% if form.errors contains 'email' %} input--error{% endif %}" placeholder="{{ 'customer.register.email' | t }}" {% if form.email %} value="{{ form.email }}"{% endif %} autocorrect="off" autocapitalize="off">

        <label for="CreatePassword" class="label--hidden">{{ 'customer.register.password' | t }}</label>
        <input type="password" name="customer[password]" id="CreatePassword" class="{% if form.errors contains 'password' %} input--error{% endif %}" placeholder="{{ 'customer.register.password' | t }}">

		<p style="text-align: center"; clear: both; margin: 10px 0;">
			<input style="float:none; vertical-align: middle;" type="checkbox" id="agree" required="required" />
			<label style="display:inline; float:none" for="agree">
			I agree with the <a href="/pages/terms-conditions" target="popup" onclick="window.open('http://alibaby.ph/pages/terms-conditions','popup','width=600,height=600'); return false;" style="color: #ff8da0">terms and conditions</a>.
			</label>
		</p>    
        
        <p style="text-align: center">
          <input type="submit" value="{{ 'customer.register.submit' | t }}" class="btn">
          <a href="{{ shop.url }}" class="btn btn--clear">{{ 'customer.register.cancel' | t }}</a>                                                      
        </p>
      {%endform%}
      </div>
    </div>
  </div>
</div>

 

 

And this is the actual result:

register.png 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

THAT'S ALL! I HOPE THIS COMMENT HELPED YOU ON YOUR NARRATIVE THEME AS WELL! YOU CAN PRIVATE MESSAGE ME IF YOU HAVE QUESTIONS! THANKS!

0 Likes
Highlighted
New Member
1 0 0

Ok so people are not very good at explaining on how to do this for people who are not familiar with programming. I struggled and finally completed this, although half-way.

Did this on Debut theme, the "Accept to terms and conditions" warning shows up only after "Add to cart" is selected. If i select "Buy now" nothing happens as it bypasses the Cart directly to the Checkout so i had to disable Buy now button. Would appreciate if anyone could offer a solution so that the Terms and conditions checkbox appears in the window where customer must enter billing and shipping information (After clicking "Add to cart" or "Buy now"). I suppose it's called Contact_information / page.contact.liquid.

1. Go to "Online store"-> Select your live theme -> Actions -> Edit code

2. Select Assets folder, find theme.js

3. Go to the very end and paste 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 of sales to check out."); return false;
}
});
});

You can translate text "You must agree with the terms and conditions of sales to check out." to whatever language your shop is directly in the code.

4. Click Save, then go Sections->find Cart-template.liquid

5. Look for this code using Ctrl+F and search for cart.general.checkout

<div class="cart__shipping rte">{{ taxes_shipping_checkout }}</div>
<div class="cart__buttons-container">
<div class="cart__submit-controls">
{%- unless section.settings.cart_ajax_enable -%}
<input type="submit" name="update"
class="cart__submit btn btn--secondary"
value="{{ 'cart.general.update' | t }}">
{%- endunless -%}
<input type="submit" name="checkout"
class="cart__submit btn btn--small-wide"
value="{{ 'cart.general.checkout' | t }}">
</div>

6. Directly before the line <input type="submit" name="checkout" paste this code:

<p style="float: none; text-align: right; clear: both; margin: 10px 0;">
<input style="float:none; vertical-align: middle;" type="checkbox" id="agree" required="required" />
<label style="display:inline; float:none" for="agree">
I agree with the<a href="/policies/terms-of-service"> terms and conditions</a>.
</label>
</p>

So your final code looks like this:

<div class="cart__shipping rte">{{ taxes_shipping_checkout }}</div>
<div class="cart__buttons-container">
<div class="cart__submit-controls">
{%- unless section.settings.cart_ajax_enable -%}
<input type="submit" name="update"
class="cart__submit btn btn--secondary"
value="{{ 'cart.general.update' | t }}">
{%- endunless -%}
<p style="float: none; text-align: right; clear: both; margin: 10px 0;">
<input style="float:none; vertical-align: middle;" type="checkbox" id="agree" required="required" />
<label style="display:inline; float:none" for="agree">
I agree with the<a href="/policies/terms-of-service"> terms and conditions</a>.
</label>
</p>
<input type="submit" name="checkout"
class="cart__submit btn btn--small-wide"
value="{{ 'cart.general.checkout' | t }}">
</div>

7. Click Save, go check your shop if it works.

8. To disable "Buy now" button go to Online store -> Customize

9. At the top left of the website preview (where Home Page is written by default) select "Product pages"

10. In the Sections click Product Pages and disable "Show dynamic checkout button"

0 Likes
Highlighted
Tourist
3 0 1

Any updates as to how to make this checkbox required? I can bypass it by clicking the checkout button.

0 Likes
Highlighted
Tourist
6 0 0

are you able to do this? here is how if you are still interested

this is popup

I agree with the <a href="/pages/terms-conditions" target="popup" onclick="window.open('http://alibaby.ph/pages/terms-conditions','popup','width=600,height=600'); return false;">terms and conditions</a>.

 

this is for new tab if you want

I agree with the <a href="/pages/terms-conditions" target="_blank">terms and conditions</a>.

 

0 Likes
Highlighted
Tourist
14 0 1
Thanks Alibabyph

But unfortunately it does not work...
0 Likes
Highlighted
Tourist
3 0 1

I got it to work. Now I need to know how to make the error message inline instead of a popup. Like if they don't click the box, I want the error message to point to the box.

1 Like
Highlighted
New Member
1 0 0

I'm looking for this as well, all i get is the native browser pop-up. But i want the error message appear in red underneath the checkbox, so it's in context.

0 Likes