Categories
JavaScript

JavaScript for optimizers #8: Changing button icons

Want to test more than just a link? Then, you need to learn JavaScript. Use my method to start changing button icons on your website.

I started a series covering practical step-by-step ways to use JavaScript to set up winning experiments on your website.

Each article in the series covers a different JavaScript method, illustrated by applying best practices to websites as hypothetical cases.

Business case: Changing button icons to increase the conversion rate

Our hypothetical case for this chapter is about changing button icons to increase the conversion rate. An article from Craig Sullivan talks about useless iconography. Our client wants to test if using a well-known icon will increase the conversion rate.

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

“Because we saw that icons should only be used when visitors don’t have to learn them, we expect that changing our icons to well-known icons 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 icons are changed in this experiment
The icons are changed in this experiment

The code used in the experiment

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!

var getShoppingCartButton = document.querySelector(
  ".shopping-cart > div > a > i"
);
var getAddToCartButtons = document.querySelectorAll(
  ".add-to-cart > div > div > div > a > i"
);

let shoppingCartButtonClassList = getShoppingCartButton.classList;
shoppingCartButtonClassList.replace("fa-shopping-bag", "fa-shopping-cart");

for (var i = 0; i < getAddToCartButtons.length; i++) {
  let getAddToCartButtonsClassList = getAddToCartButtons[i].classList;
  getAddToCartButtonsClassList.replace("fa-plus-square", "fa-cart-plus");
}

Breakdown of the code

1. 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.

.classList is a property that returns an array of strings containing the different classes attached to the element. Each class is stored in a different element of the array. This property is usually used in combination with other methods to modify or remove the classes of an element.

The classlist property collects all classes of an element in an array
The classlist property collects all classes of an element in an array

2. Logic

var getShoppingCartButton = document.querySelector(
  ".shopping-cart > div > a > i"
);

In the first line of code, we declare the variable getShoppingCartButton. We assign the shopping cart icon to this variable using the querySelector method. Notice how we dive down three times in the selector to get the element we want.

The selector allows us to find the specific element we need
The selector allows us to find the specific element we need

We start by declaring all our variables.

var getAddToCartButtons = document.querySelectorAll(
  ".add-to-cart > div > div > div > a > i"
);

This line of code is almost the same, but we are selecting an array of elements using the querySelectorAll method. Every time the property is finished selecting and returning an element, it will find the next one and at it to the array. The array is eventually assigned to the variable getAddToCartButtons.

We add all icon matches to the array
We add all icon matches to the array

The second part of the code replaces the icon of a single button.

Shopping cart button with old icon
Shopping cart button with old icon
let shoppingCartButtonClassList = getShoppingCartButton.classList;

In this line of code, we get the array of classes attached to the variable. We assign this array the newly declared shoppingCartButtonClassList variable.

shoppingCartButtonClassList.replace("fa-shopping-bag", "fa-shopping-cart");

Using the replace method, we look and replace the “fa-shopping-bag” string with “fa-shopping-cart”. In this example, I am using Font Awesome. These classes control what icon is shown. By changing the class, we change the icon to a new one.

Shopping cart button with a new icon
Shopping cart button with a new icon

Now the third part of the code starts. This part is where we change multiple button icons at once.

Add-to-cart button with old icons
Add-to-cart button with old icons
for (var i = 0; i < getAddToCartButtons.length; i++) {

In this line of code we start a loop to check all the items collected by our querySelectorAll method.

let getAddToCartButtonsClassList = getAddToCartButtons[i].classList;

We declare a temporary variable called getAddToCartButtonsClassList. We assign the class list of the currently looped item to this variable.

getAddToCartButtonsClassList.replace("fa-plus-square", "fa-cart-plus");

Then we replace the “fa-plus-square” class with the “fa-cart-plus” class. This changes the button on the page.

Add-to-cart button with a new icon
Add-to-cart button with a new icon

It will do this for every saved button in the array. It is eventually looping three times to change all icons.

Finished with changing button icons
Finished with changing button icons
}

Then we close the loop and end our script.

3. Exercise

The best way to learn JavaScript is to try it. 

I want you to alter the code to change the first and third icons of the add-to-cart buttons. Shoot me a message to let me know what you think!

Change the first and third add-to-cart button on the webpage
Change the first and third add-to-cart button on the webpage

Get access to all JavaScript exercise code.