JavaScript for optimizers #16: Adding a site-wide benefits bar

In this article, we are adding a site-wide responsive benefits bar with JavaScript.

Our hypothetical case for this chapter is about adding benefits to a website. UX research from CXL showed that adding benefits underneath the header can be an effective way of communicating your unique selling points (USPs) to a visitor.

Business case: Adding a site-wide benefits bar.

In this hypothetical scenario, we arrive at the following hypothesis:

“Because we saw that research showed that you need to communicate your benefits, we expect that adding a site-wide benefits bar will cause an increase in sales. We’ll measure this using conversion-rate”.

To test this hypothesis, we’re going to apply the changes below:

The code 

Now for the fun part! 

To execute the change, we run the following JavaScript code on the testing page. Try it out for yourself to see it in action!

//variables
var parentElement = document.querySelector("article");
var usps = [
  ["Fast delivery", "fas fa-truck", "/"],
  ["Free shipping", "fa fa-ship", "/"],
  ["4000 likes", "fab fa-facebook-square", "/"]
];

//functions
function createBenefitsheader(usps) {
  var containerElement = document.createElement("div");

  for (var i = 0; i < usps.length; i++) {
    containerElement.appendChild(createUsp(usps[i]));
  }

  containerElement.style.display = "flex";
  containerElement.style.flexWrap = "wrap";
  containerElement.style.justifyContent = "center";
  containerElement.style.padding = "15px";
  containerElement.style.overflow = "hidden";
  containerElement.style.height = "81px";

  parentElement.prepend(containerElement);
}

function createUsp(usps) {
  var anchorElement = document.createElement("a");
  var iconElement = document.createElement("i");
  var textElement = document.createTextNode(usps[0]);

  iconElement.style.paddingRight = "5px";
  anchorElement.style.padding = "15px";
  anchorElement.style.whiteSpace = "nowrap";

  iconElement.setAttribute("class", usps[1]);
  anchorElement.setAttribute("href", usps[2]);
  anchorElement.appendChild(iconElement);
  anchorElement.appendChild(textElement);

  return anchorElement;
}

//function calls
createBenefitsheader(usps);

New syntax

The breakdown starts by going over all the new syntax in the example above. Since this article is part of a series, make sure you check the syntax’s complete documentation in the previous articles.

[[],[],[]] is an array containing arrays. Each array is separated by a comma. This way we can store a bunch of data in one variable.

flexWrap is a CSS property that determines if elements can be forced to the next line.

justifyContent is a CSS property that defines how the browser distributes space between and around content items.

whiteSpace is a CSS property that sets how white space is collapsed and if lines are allowed to soft-wrap.

Logic

//variables

We start by creating a comment section for the variables.

var parentElement = document.querySelector("article");

Then we assign the element where the site-wide bar will be prepended.

var usps = [
  ["Fast delivery", "fas fa-truck", "/"],
  ["Free shipping", "fa fa-ship", "/"],
  ["4000 likes", "fab fa-facebook-square", "/"]
];

After that, we create a data structure of arrays containing the information needed for our benefits. The first item in the array is a string that contains the text that will be displayed. 

[text, iconclass, url]

The second item is a string that contains the name of the class for the icon. This icon will be added with the font-awesome library. Learn how to set up font-awesome here.

[text, iconclass, url]

The third item is also a string that contains the URL of the benefit. I will just point this to the homepage for now. You could link this to the terms of service for example.

[text, iconclass, url]

We do this three times and close the array.

//functions

Then we create a comment section for the functions.

function createBenefitsheader(usps) {

This function will handle the creation of the benefits bar. It takes an array of arrays as the argument.

var containerElement = document.createElement("div");

We start by creating a container element.

for (var i = 0; i < usps.length; i++) {

We need to loop through the length of the array of arrays. This will be 3 times in this example.

containerElement.appendChild(createUsp(usps[i]));

Every loop we call a function that creates a unique selling point with the data structure and appends this to our container element.

}

Then we close the loop.

containerElement.style.display = "flex";

We set the container element to a flex state. This is used to make things responsive.

containerElement.style.flexWrap = "wrap";

This line makes sure the element in the container wraps to the next line.

containerElement.style.justifyContent = "center";

Then we center our the benefits in our container element.

containerElement.style.padding = "15px";

This line creates some extra white space within the container.

containerElement.style.overflow = "hidden";

When a benefit wraps to the next line it will be hidden. This way we don’t have an enormous benefit bar on mobile.

containerElement.style.height = "81px";

The overflow needs a height to work.

parentElement.prepend(containerElement);

Then we prepend our benefits bar on the website.

}

We close the function.

function createUsp(usps) {

This function handles the creation of unique selling points. It takes an array as the argument.

var anchorElement = document.createElement("a");

We start by creating an anchor element.

var iconElement = document.createElement("i");

We also need an Idiomatic Text element. This will be our icon.

var textElement = document.createTextNode(usps[0]);

Then we create a text element with the first item in the array.

iconElement.style.paddingRight = "5px";

We add some padding on the right of the icon to give it some white space.

anchorElement.style.padding = "15px";

Then we add even more padding around the anchor itself. This ensures that the clickable area is big enough.

anchorElement.style.whiteSpace = "nowrap";

This line makes sure that the icon and text stay on the same line.

iconElement.setAttribute("class", usps[1]);

We add the class element to our iconElement variable. Font-awesome will convert this element to an icon. The function will use the second item in the array as the input.

anchorElement.setAttribute("href", usps[2]);

Then we add our link to the anchor element using the third element in the array.

anchorElement.appendChild(iconElement);

We append the icon to our anchor element.

anchorElement.appendChild(textElement);

We append the text to our anchor element.

return anchorElement;

We return the finished anchor element so it can be used in our other function.

}

We close the function and finish the script.