Age Confirm Checkbox

Add a "I confirm I am 18 years of age or older" checkbox, which must be ticked before being able to add to cart on the product page.

Wireframe

Preparation Checklist

Before you start this tweak, it's a good idea to run through our preparation checklist below:

Read through the Getting Started to get a better sense of how the control panel, Database and Front End store interact.
Learn our recommended Simple Workflow. This makes the implementation process as easy as possible.
Create a new Staging Theme for this tweak. This allows you to preview any changes before they are visible to live customers.
The code snippet in this tweak doc uses Bootstrap 3, you may need to alter this code depending on what version of Bootstrap your theme is using. You can find out what version your theme is using here.

Coding Instructions

Step 1: Create a new template

Navigate to the product includes folder /httpdocs/assets/themes/[THEME-NAME]/templates/products/includes and create a new file named age_confirm.template.html.

Step 2: Add the code to the template

Paste the following code into the newly created age confirm template:

[%site_value id:'footer_javascript'%]
<script>
    $(document).ready(function(){
        $('#age_confirm').change(function(){
            if($(this).is(":checked")){
                $('.addtocart').attr("disabled", false);
                $('.multi-add').attr("disabled", false);
            }
            else{
                $('.addtocart').attr("disabled", true);
                $('.multi-add').attr("disabled", true);
            }
        });
    });
</script>
[%/site_value%]

<div class="row">
    <div class="col-xs-12">
        <div class="checkbox">
            <label><input type="checkbox" id="age_confirm"> I confirm that I am 18 years of age</label>
        </div>
    </div>
</div>

Notes On The Above Code

This code affects all types of "Add To Cart" buttons, including those for items with variations (but no specifics), and also kits. For variation products and kits, it is assumed that at least one of the products that is included must require the customer to be a minimum age of 18 in order to purchase it.

A unique include file will be created because the checkbox is affecting multiple types of products, and therefore must be added in a number of different places.

Step 3. Add the age confirm include to all "add to cart" buttons for the "buying_options" template

1) Open products/template.html and paste [%load_template file:'products/includes/age_confirm.template.html'/%] directly above [%load_ajax_template id:'_buying_options' type:'item' template:'buying_options' preload:'1' tmpl_sku:'[@current_sku@]' tmpl_preview:'y'/%]

2) Open products/includes/buying_options.template.html, and add the disabled attribute to all buttons with class addtocart.

Notes On The Above Code

The "I confirm I am 18" checkbox will be unticked by default, therefore the disabled attribute ensures that the customer must tick the checkbox before being able to add to cart.

Step 4. Add the age confirm include to the "add to cart" button for the "child_products" template

1) Open products/includes/child_products.template.html and paste [%load_template file:'products/includes/age_confirm.template.html'/%] directly above the div with the id multiitemadd.

2) Add the disabled attribute to the button with class multi-add.

Step 5. Add the age confirm include to the "add to cart" button for the "components" template

1) Open products/includes/components.template.html and paste [%load_template file:'products/includes/age_confirm.template.html'/%] directly below the div with class component.

2) Add the disabled attribute to all buttons with class addtocart.