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:

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);

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.