HomeEngagementContentDiscoveryOther Resources

# This guide will help you understand

  • Why should you use a free delivery weblayer

  • How to implement and use it



In order to implement the free delivery banner, some JavaScript knowledge is required for parsing the correct information from the web page about the current cart value.

# Why should you use free delivery weblayer

Free delivery is one of the major factors influencing whether the visitor will turn into a customer while shopping online. The aim of the banner is to highlight the information about free delivery if such service is offered.

You probably have a purchase price threshold that needs to be reached in order to offer free shipping. If you base the banner on an actual shopping cart value, it will inspire the customer to increase the order value and eventually buy the products after reaching the threshold.

The weblayer has two versions, one showing the remaining value to reach the threshold and the second one, which is displayed after the threshold is reached.

# Implementation of the free delivery weblayer



If needed, read more about [weblayers](🔗) in the linked article.

After clicking on the button for creating a new weblayer, choose the medium rectangle template as shown in the picture.

1142


In the `Design>Editor` tab, click on the `<>` button on the right side of your screen, click on the settings icon and choose JS, as shown in the picture below.

894


Afterwards, replace the JS code with the one below. 


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 (see the picture below), except the part of the code below has to be either deleted or commented (using /* */). This is important for homogeneous groups and correct evaluation.
<pre class="EnlighterJSRAW" data-enlighter-language="js">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; } }</pre>
1721


You can make use of [contextual personalization](🔗) to serve the best weblayer variants for your customers.
After doing everything as suggested, you can manipulate the weblayer settings parameters listed below and use them to set the two versions of the weblayer:
  • Minimal cart value - if the cart value is above this number, the banner is displayed
  • Maximal cart value - if the cart value is above this number, the customer reached the threshold, therefore a text similar to "Delivery for free" is displayed
  • Delivery paid - Text to display if the customer doesn't dispose of with free delivery. This text must contain code  `<span name="exp-cart"></span>` 
  • Delivery free - Text for free delivery