Commerce Cloud Developer Documentation Tweak Documents Generic 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.

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 4, 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.

Step 1: Open the footer template

Navigate to the folder /httpdocs/assets/themes/[THEME-NAME]/templates/footers/template.html.

Step 2: Add the modal code into the template

Paste the following code into the footer template above your required scripts (line 241). This code is for the Terms & Conditions and Privacy Policy 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 Maropost Commerce Cloud 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.

Step 3: Update the footer subscribe form

Replace everything inbetween [%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 login/register forms

Step 1: Open the customer login/registration templates

Open the following templates:

Login template /httpdocs/assets/themes/[THEME-NAME]/templates/customer/login.template.html
Registration template /httpdocs/assets/themes/[THEME-NAME]/templates/customer/register/template.html

Step 2: Update the login/registration templates

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>

Wholesale register form

Step 1: Open the wholesale registration template

Navigate to the wholesale registration template /httpdocs/assets/themes/[THEME-NAME]/templates/customer/wholesaleregister/template.html.

Step 2: Update the code

This change requires some [%set%] logic as sites do not start with a content zone called wholesale_terms. Inbetween 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 Maropost Commerce Cloud site by default but you can easily create it, ensuring its name is wholesale_terms.

Edit account page

Step 1: Open the edit account template

Navigate to the edit account template /httpdocs/assets/themes/[THEME-NAME]/templates/customer/edit_account/template.html.

Step 2: Update the code

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>

Step 3: Add javascript logic

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.

Step 1: Open the javascript file

Navigate to the javascript template /httpdocs/assets/themes/[THEME-NAME]/js/custom.js.

Step 2: Add javascript logic

$('#_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.

Step 3: Open the product buying options template

Navigate to the product buying options template /httpdocs/assets/themes/[THEME-NAME]/templates/products/includes/buying_options.template.html

Step 4: Update the code

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">

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

Request a quote

Request consent on subscription and signup forms

Preparation Checklist

Footer subscribe form

Account login/register forms

Wholesale register form

Edit account page

Product page notify me form

Was this article useful?