1. Home
  2. Cookbook
  3. Campaigns
  4. Free delivery weblayer

Free delivery weblayer

This weblayer aims to highlight the information about free delivery, if such service is offered. The weblayer shows one version when a threshold is reached, and another version if the threshold is not yet reached, showing the remaining value needed to reach the threshold. For this weblayer, some JavaScript knowledge is required to parse correct information from the web page about the current cart value.

  • replace the JS code of medium rectangle template with the one below
var self = this;
var minimalCartValue = parseInt('[[minimalCartValue]]');
var maximalCartValue = parseInt('[[maximalCartValue]]');
var deliveryPayedHtml = '[[deliveryPayed]]';
var deliveryFreeHtml = '[[deliveryFree]]';
var showDelay = parseInt('[[ bannerShowDelayInMilliseconds ]]' || '0', 10);
setTimeout(function () {
    requestAnimationFrame(function () {
        var show = showBanner();
        if (show) {
            self.sdk.track('banner', getEventProperties('show', false));
            document.body.insertAdjacentHTML('beforeend', self.html);
            var banner = self.banner = document.querySelector('.exponea-popup-banner');
            banner.insertAdjacentHTML('afterbegin', ''); 
            var btnClose = banner.querySelector('.exponea-close'); 
            if (show == "deliveryPayed") { $('.exponea-text').append(deliveryPayedHtml); 
            var price = Math.round(calculatedeliveryValue() * 100) / 100; insertPriceTobanner(price); 
     } 
     if (show == "deliveryFree") { 
         $('.exponea-text').text(deliveryFreeHtml); 
     } self.sdk.trackLink(banner, 'banner', getEventProperties('click')); requestAnimationFrame(function () { document.querySelector('.exponea-popup-banner').className += ' exponea-animate'; }); btnClose.onclick = function (e) { removeBanner(); self.sdk.track('banner', getEventProperties('close')); e.preventDefault(); if (e.stopPropagation) { e.stopPropagation(); } else { e.cancelBubble = true; } return false; } } }); }, showDelay); function cartValue() { return parseFloat($('[href="/Basket"]').text().split(" ")[0].replace(',', '.')) } function calculatedeliveryValue() { var actualValue = cartValue(); var leftValue = maximalCartValue - actualValue; return leftValue; } function showBanner() { var cartVal = cartValue(); if (cartVal > minimalCartValue && cartVal < maximalCartValue) { return "deliveryPayed"; } if (cartVal > maximalCartValue) { return "deliveryFree" } return false; } function insertPriceTobanner(price) { $('[name=exp-cart]').text(price); } function getEventProperties(action, interactive) { return { action: action, banner_id: self.data.banner_id, banner_name: self.data.banner_name, banner_type: self.data.banner_type, variant_id: self.data.variant_id, variant_name: self.data.variant_name, interaction: interactive !== false ? true : false, location: window.location.href, path: window.location.pathname }; } function removeBanner() { if (self.banner) { self.banner.parentNode.removeChild(self.banner); } } return { remove: removeBanner };
  • Then replace the content of the function “cartValue” with code that will parse the current cart value from the web page.
  • Afterwards, create a custom control group that will have identical code, except the code below has to be either deleted or commented (using /* */). This is important for homogeneous groups and correct evaluation.
document.body.insertAdjacentHTML('beforeend', self.html);
            var banner = self.banner = document.querySelector('.exponea-popup-banner');
            banner.insertAdjacentHTML('afterbegin', '
'); var btnClose = banner.querySelector('.exponea-close'); if (show == "deliveryPayed") { $('.exponea-text').append(deliveryPayedHtml); var price = Math.round(calculatedeliveryValue() * 100) / 100; insertPriceTobanner(price); } if (show == "deliveryFree") { $('.exponea-text').text(deliveryFreeHtml); } self.sdk.trackLink(banner, 'banner', getEventProperties('click')); requestAnimationFrame(function () { document.querySelector('.exponea-popup-banner').className += ' exponea-animate'; }); btnClose.onclick = function (e) { removeBanner(); self.sdk.track('banner', getEventProperties('close')); e.preventDefault(); if (e.stopPropagation) { e.stopPropagation(); } else { e.cancelBubble = true; } return false; } }

Afterwards, you can manipulate the weblayer setting parameters below:

    • Minimal cart value – if cart value is above this number, banner is displayed
    • Maximal cart value – if cart value is above this number, text similar┬áto “Delivery for free” is displayed
    • Delivery payed – Text to display, if customer doesn’t have free delivery. This text must contain code – <span name=”exp-cart”></span>
    • Delivery free – Text for free delivery

 

Updated on November 6, 2017

Was this article helpful?

Related Articles