JavaScript for loop through Cart items Google Optimize

For one of the experiments I built, I needed to loop through all the cart items to see if the visitor added a particular item to the cart. If this was the case, I needed to show a message that it included free shipping.

I’ll walk you through it.

Preparations for loop

In order to write the full code, we’ll first start with the preparation we need to do before running the for loop in JavaScript.

Select products

To select all the products from the cart, we’ll use the JavaScript querySelectorAll. The querySelectorAll is used to get all the items selected. It’s very general.

In this case, I would like to get all the titles of the products in the cart.

let productTitles = document.querySelectorAll(".add-css-selector-here");

I assume you’ve got some knowledge of HTML/CSS. Copy this code to your own coding tool and replace .add-css-selector-here with the selector of your product titles.

Down below, I’ve shown an example of how to get the selector of the product titles on Amazon.

Don’t forget to adjust the selector. If you just copy and paste it, it will only target the specific div you’ve copied the selector from.

let productTitles = document.querySelectorAll("span.a-truncate-full.a-offscreen");

We’ve now selected all product titles.

Create an array of selected products

In order to use the collected information, we’ll create an array of all the selected product titles in the cart.

let arrayProductTitles = Array.from(productTitles);

Just as simple as that.

Set false variable

In order to be able to create the if else statement later on in this article, we’ll need to set a false variable.

let cartContains = false;

Combining all the code together gives you the following overview:

let productTitles = document.querySelectorAll(".add-css-selector-here");
let arrayProductTitles = Array.from(productTitles);
let cartContains = false;

Next up, we’ll dive into the for loop

For loop to check if any title contains the word

Preparations are set, time to dive into the for loop.

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

We need to be able to go through all the titles. We’ll do so using a count.

if (arrayProductTitles[i].includes = 'your-word-here') {
     cartContains = true;
     break;
}

Within the for loop, we’ll set an if statement. This if statement works like this: If one of the product titles contains the word ‘your-word-here’, do the following. Of course, you’ll need to replace ‘your-word-here’ with the word you would like to check.

If one of the product titles contains the word you would like to match, it will change the variable we’ve set in the preparations. We’ll use this variable to run some code.

Make sure to keep ‘break;’ in the if statement!

The full code of the second part of this article:

for (var i = 0; i < arrayProductTitles.length; i++) {
  if (arrayProductTitles[i].includes = 'your-word-here') {
       cartContains = true;
       break;
  }
}

Note: The ‘your-word-here’ selector is case-sensitive!

The code thus far:

let productTitles = document.querySelectorAll(".add-css-selector-here");
let arrayProductTitles = Array.from(productTitles);
let cartContains = false;

for (var i = 0; i < arrayProductTitles.length; i++) {
  if (arrayProductTitles[i].includes = 'your-word-here') {
       cartContains = true;
       break;
  }
}

If else using product titles in cart

So far, we’ve done the following:

Select all product titles on the cart page
Create an array from all product titles
Set false variable
Write for loop to check all product titles
Create if statement that changes the false variable to true

We’ll now focus on the if statement that runs will the code for the Google Optimize experiment.

if (cartContains === true){

}

We’ll now write the if statement. Call for the variable you’ve created during the preparation step. We would like to check if this variable equals true. The if statement in the for loop changed the variable from being false to true if one of the product titles from the cart page contained the given word.

Using this if statement gives us the opportunity to change something on the page based on the contents of the cart on the cart page.

Full code

Down below, you can find the full code which can be used to run experiments with Google Optimize.

let productTitles = document.querySelectorAll(".add-css-selector-here");
let arrayProductTitles = Array.from(productTitles);
let cartContains = false;

for (var i = 0; i < arrayProductTitles.length; i++) {
  if (arrayProductTitles[i].includes = 'your-word-here') {
       cartContains = true;
       break;
  }
}

if (cartContains === true){

}

Conclusion

This code has been used by me to set up a funnel (multiple pages) experiment within Google Optimize. If the cart contained an example of a product, I’ve added a banner telling the users they’ll get free shipping with their next order. The focus metric for this experiment was the conversion rate. The target audience had a specific product in their shopping cart.

In case you would like to run the for loop multiple times, it might be smart to create a function out of it.
This code will run every time a page is loaded (or refreshed). You might want to add a trigger to re-run the code when the shopping car is adjusted in case they removed the item you’re targeting for.