Request consent on subscription and signup forms

Request consent on subscription and signup forms

Disclaimer: If you are doing this tweak to be compliant with the GDPR, we encourage you to seek legal advice and review the GDPR yourself, as it’s ultimately your responsibility to ensure you are compliant with the GDPR. This post should not be taken as legal advice and simply implementing this tweak is not enough to achieve compliance. More info.

If you have installed/developed a theme before 25th May 2018, you may want to adjust your theme to better request consent and acceptance of your terms and privacy policy. We have compiled these changed into this tweak document for you.

Please note: these tweaks are based off Skeletal; file names, directories and line numbers might be different for your theme depending on the work that has been done to it.

templates/footers/template.html

You are going to be placing in two modals in the footer template which are going to be used throughout the different pages for these tweaks. These modals will be for your Terms & Conditions and Privacy Policy.

Above your required scripts (line 241) place the following modals:

<div class="modal fade" id="termsModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title">Terms & Conditions</h4>
            </div>
            <div class="modal-body">[%content_zone id:'terms'/%]</div>
            <div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div>
        </div>
    </div>
</div>
<div class="modal fade" id="privacyModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title">Privacy Policy</h4>
            </div>
            <div class="modal-body">[%show_content id:'2'%][%param *body%][@content_description1@][%/param%][%/show_content%]</div>
            <div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div>
        </div>
    </div>
</div>

The Terms & Conditions body comes from a content zone terms while the Privacy Policy body comes from the description of an information page with an ID of 2. This is the default Privacy Policy page a Neto site comes with, if you have deleted this page or use a different page for your Privacy Policy, you can use the different pages ID instead.

Update the footer subscribe form to the following, you will want to replace everything in-between [%if [@config:show_newsletter_subscribe@]%]...[%/if%] (line 30):

<p>Subscribe to our newsletter and we'll keep you up to date on our products and services.</p>
<form method="post" action="[%URL type:'page' id:'subscribe' https:'1'%][%END URL%]" aria-label="Newsletter subscribe form">
    <input type="hidden" name="list_id" value="1">
    <input type="hidden" name="opt_in" value="y">
    <input name="inp-submit" type="hidden" value="y" />
    <input name="inp-opt_in" type="hidden" value="y" />
    <input name="inp-email" class="form-control" type="email" value="[%nohtml%][@inp-email@][%/nohtml%]" placeholder="Email Address" required aria-label="Email Address"/>
    <div class="checkbox">
        <label>
            <input type="checkbox" value="y" class="terms_box" required/>
            I have read and agree to
            <a href="#" data-toggle="modal" data-target="#termsModal">Terms & Conditions</a> and
            <a href="#" data-toggle="modal" data-target="#privacyModal">Privacy Policy</a>.
        </label>
    </div>
    <input class="btn btn-default" type="submit" value="Subscribe" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>"/>
</form>

Account register forms

templates/customer/login.template.html

At the end of register form there will be a checkbox input with name regoptin. This needs to be an opt-in input and we also need a Terms & Conditions checkbox. At line 149, update it so it has two divs with classes of form-group:

<div class="form-group">
    <div class="checkbox">
        <label>
            <input name="regoptin" type="checkbox" value="Y" data-message="You can unsubscribe at any time."/>
            Subscribe to our newsletter and we'll keep you up to date on our products and services.
        </label>
    </div>
</div>
<div class="form-group">
    <div class="checkbox">
        <label>
            <input type="checkbox" value="y" class="terms_box" required/>
            I have read and agree to
            <a href="#" data-toggle="modal" data-target="#termsModal">Terms & Conditions</a> and
            <a href="#" data-toggle="modal" data-target="#privacyModal">Privacy Policy</a>.
        </label>
    </div>
</div>

templates/customer/register/template.html

The register template is the exact same as the login template, you will want to make the same change to this template as well.

Wholesale register form

templates/customer/wholesaleregister/template.html

This change requires some [%set%] logic as sites do not start with a content zone called wholesale_terms. In-between the closing [%extra_customer_fields%] (line 235) and the register button (line 252), replace the code with the following:

<div class="row-padded">
    <div class="checkbox">
        <label>
            <input name="regoptin" type="checkbox" value="Y" data-message="You can unsubscribe at any time."/>
            Subscribe to our newsletter and we'll keep you up to date on our products and services.
        </label>
    </div>
    [%set [@wholesale_terms@] %][%content_zone id:'wholesale_terms' /%][%/set%]
    <div class="checkbox">
        <label>
            <input type="checkbox" name="agree" value="y" class="terms_box" required/>
            I have read and agree to
            <a href="#" data-toggle="modal" data-target="#termsModal">Terms & Conditions</a>[%if [@wholesale_terms@] ne ''%], our <a href="#" data-toggle="modal" data-target="#tradeModal">Terms of Trade</a>[%/if%] and
            <a href="#" data-toggle="modal" data-target="#privacyModal">Privacy Policy</a>.
        </label>
    </div>
    [%if [@wholesale_terms@] ne ''%]
    <div class="modal fade" id="tradeModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title">Terms of Trade</h4>
                </div>
                <div class="modal-body">[%content_zone id:'wholesale_terms'/%]</div>
                <div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div>
            </div>
        </div>
    </div>
    [%/if%]
</div>

This updates the wholesale register form so the subscribe to newsletter is opt-in and so the user has to agree to your sites Terms & Conditions, Privacy Policy and your Terms of Trade if you have one. The Terms of Trade modal body comes from a content zone wholesale_terms, which isn't part of a Neto site by default but you can easily create it, ensuring its name is wholesale_terms.

Edit account page

templates/customer/edit_account/template.html

In the Contact Information section, add the following code after the email address form-group (line 285):

<div class="form-group">
    <label>
        <input type='checkbox' id="subscribe_newsletter" [%if [@opt_in_newsletter@]%]checked[%/if%]>
        <input type="hidden" name="opt_in" value="[@opt_in_newsletter@]">
        Subscribe To Newsletter
    </label>
</div>

Then add the following javascript before the closing script tag (line 195):

$('#subscribe_newsletter').change(function() {
    $('input[name="opt_in"]').val(this.checked ? 'y' : 'n');
});

Product page notify me form

We need to add some simple validation for the notify me form, as currently clicking the 'Save My Details' button will close the modal and then send the details.

js/custom.js

$('#_jstl__buying_options').on('click', '.js-notifymodal-in-stock', function(e){
    e.preventDefault();
    // Get values
    var sku = $(this).attr('data-sku');
    var $wrapper = $('#notifymodal .checkbox');
    var $terms = $('#notifymodal .terms_box');
    var $helpText = $('#notifymodal .checkbox .help-block');
    // Validate form
    if(!$.isChecked($terms)){
        $wrapper.addClass('has-error');
        $helpText.removeClass('hidden');
        return false;
    }else{
        $wrapper.removeClass('has-error');
        $helpText.addClass('hidden');
        // Dismiss modal
        $('#notifymodal').modal('hide');
        // Send information
        $.addNotifyBackInStock(sku, '');
        $terms.attr('checked', false);
        return true;
    }
});

This watches the js-notifymodal-in-stock button and ensure the #notifymodal .terms_box input is checked. If it isn't, then it will display an error.

Please note: The notify me form needs to be in a modal with the #notifymodal ID, which itself needs to be in the buying_options template for this to work.

templates/products/includes/buying_options.template.html

After the closing form-group div for the email address input (line 210), add the following code:

<div class="checkbox">
    <label>
        <input type="checkbox" value="y" class="terms_box" required/>
        I have read and agree to
        <a href="#" data-toggle="modal" data-target="#termsModal">Terms & Conditions</a> and
        <a href="#" data-toggle="modal" data-target="#privacyModal">Privacy Policy</a>.
    </label>
    <span class="help-block hidden">Please tick this box to proceed.</span>
</div>

Then change the 'Save My Details' button (line 214) to the following:

<input class="btn btn-success js-notifymodal-in-stock" data-sku="[@sku@]" type="button" value="Save My Details">

Legacy checkout

Please note: if you are using Managed Checkout then you do not need to worry about this change, your checkout has already been updated.

templates/cart/onepage.template.html

Because the checkout uses a different footer, we will need to add in the modals into this template. In-between [%if [@config:checkout_req_agree_terms@] eq '1'%]...[%/if%] replace the code with the following:

<div class="modal fade" id="termsModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title">Terms & Conditions</h4>
            </div>
            <div class="modal-body">[%content_zone id:'terms'/%]</div>
            <div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div>
        </div>
    </div>
</div>
<div class="modal fade" id="privacyModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title">Privacy Policy</h4>
            </div>
            <div class="modal-body">[%show_content id:'2'%][%param *body%][@content_description1@][%/param%][%/show_content%]</div>
            <div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div>
        </div>
    </div>
</div>
<p>
    <input type="hidden" name="agreement" value="y">
    <input type="checkbox" name="agree" value="y" class="terms_box" [%if [@agree@]%]checked[%/if%] required/>
    I have read and agree to
    <a href="#" data-toggle="modal" data-target="#termsModal">Terms & Conditions</a> and
    <a href="#" data-toggle="modal" data-target="#privacyModal">Privacy Policy</a>.
</p>


And you're done! For developers who use Github, you can view the Pull Requests of these changes to Skeletal for a diff comparison:


Was this article useful?

Be notified when this page is updated. Optional.