Add required checkbox to accept Terms & Conditions

Hi @remi

Katrine from Plak support here

In order to add the checkbox (agree with terms and conditions) please follow these steps :

• From your Shopify dashboard, click Online Store > Actions > Edit code.
• Open the file vendor.js
• At the bottom of the file, paste the following 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;
}
});
});

• Click Save
• Now open the file cart-template.liquid and find this code

<div class="cart__submit-controls">

• Add this code just below it

<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="/pages/terms-and-conditions">terms and conditions</a>.
</label>
</p>

• Click Save

Replace /pages/terms-and-conditions  with the URL of your terms and conditions page.

Note: You will need to create a terms and conditions page if it doesn't already exist.

Kind regards,
Katrine

Hi Katrine, thanks a lot! Always very happy with your support 😀 👍 

Hi, this checkbox is working well,

can it be done for the BUY IT NOW button too?

Thank you

Hi @ilyeszoltan

Some modifications are required in order to make this feature works in product page, and here is how to do it :

• From your Shopify store, click Online store > Actions > Edit code 
• Open the file vendor.js
• Add this code the the very bottom

 $(document).ready(function() {
$('body').on('click', '.notification-addtocart', function() {
if ($('#agree').is(':checked')) {
$(this).submit();
}
else {
alert("You must agree with the terms and conditions of sales to check out.");
return false;
}
});
});

• Click Save
• Open the files prod-template1.liquid and prod-template2.liquid
• Replace all this code

 <div class="flexBox">
{% if section.settings.show_quantity_selector %}
<div class="product-form__item product-form__item--quantity">
<label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity-{{ section.id }}" name="quantity" value="1" min="1" class="product-form__input" pattern="[0-9]*" data-quantity-input>
</div>
{% endif %}
<div class="product-form__item product-form__item--submit{% if section.settings.enable_payment_button %} product-form__item--payment-button{% endif %}{% if product.has_only_default_variant %} product-form__item--no-variants{% endif %}">
<div id="wrap-to-reach"> </div> 
<button id="wrap-to-add" type="submit" name="add"
{% unless current_variant.available %} aria-disabled="true"{% endunless %}
aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}"
class="{% if section.settings.show_shaky_addtocart %} anim-addtocart {% endif %} btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}"
data-add-to-cart>
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
<span data-add-to-cart-text>
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>
<span class="hide" data-loader>
{% include 'icon-spinner' %}
</span>
</button>
</div>
</div>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}

• With this one

<div class="notification-addtocart">
<div class="flexBox">
{% if section.settings.show_quantity_selector %}
<div class="product-form__item product-form__item--quantity">
<label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity-{{ section.id }}" name="quantity" value="1" min="1" class="product-form__input" pattern="[0-9]*" data-quantity-input>
</div>
{% endif %}
<div class="product-form__item product-form__item--submit{% if section.settings.enable_payment_button %} product-form__item--payment-button{% endif %}{% if product.has_only_default_variant %} product-form__item--no-variants{% endif %}">
<div id="wrap-to-reach"> </div>
<button id="wrap-to-add" type="submit" name="add"
{% unless current_variant.available %} aria-disabled="true"{% endunless %}
aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}"
class="{% if section.settings.show_shaky_addtocart %} anim-addtocart {% endif %} btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}"
data-add-to-cart>
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
<span data-add-to-cart-text>
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>
<span class="hide" data-loader>
{% include 'icon-spinner' %}
</span>
</button>
</div>
</div>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
<p style="float: none; text-align: left; clear: both; margin: 0px 0;">
<input style="float:none; vertical-align: middle;" type="checkbox" id="agree" />
<label style="display:inline; float:none" for="agree">
<a href="/pages/terms-and-conditions-page" target="_blank">I agree with the terms and conditions</a>.
</label>
</p>
</div>

• Click Save

Kind regards,
Katrine

Thank you very much for your help.