JavaScript for loop door winkelwagenitems A/B test

Voor een van de experimenten die ik bouwde, moest ik door alle artikelen in de winkelwagen lopen om te zien of de bezoeker een bepaald artikel aan de winkelwagen had toegevoegd. Als dat het geval was, moest ik een bericht laten zien dat het inclusief gratis verzending was.

Ik loop er even doorheen.

Voorbereiding

Om de volledige code te schrijven, beginnen we eerst met de voorbereiding die we moeten doen voordat we de for-lus in JavaScript uitvoeren.

Producten selecteren

Om alle producten uit de winkelwagen te selecteren, gebruiken we de JavaScript querySelectorAll. De querySelectorAll wordt gebruikt om alle geselecteerde artikelen te krijgen. Het is heel algemeen.

In dit geval wil ik alle titels van de producten in de winkelwagen.

let productTitles = document.querySelectorAll(".voeg-css-selector-toe");

Ik neem aan dat je enige kennis hebt van HTML/CSS. Kopieer deze code naar je eigen codeerprogramma en vervang .voeg-css-selector-toe door de selector van je producttitels.

Hieronder heb ik een voorbeeld getoond van hoe je de selector van de producttitels op Amazon krijgt.

Vergeet niet de selector aan te passen. Als je het gewoon kopieert en plakt, zal het alleen gericht zijn op de specifieke div waarvan je de selector hebt gekopieerd.

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

We hebben nu alle producttitels geselecteerd.

Maak een array van geselecteerde producten

Om de verzamelde informatie te gebruiken, maken we een array van alle geselecteerde producttitels in de winkelwagen.

let arrayProductTitles = Array.from(productTitles);

Zo simpel is het.

Stel een ‘false variable’ in

Om later in dit artikel het if else statement te kunnen maken, moeten we een false variabele instellen.

let cartContains = false;

Als je alle code samenvoegt, krijg je het volgende overzicht:

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

Vervolgens duiken we in de for loop.

Gebruik de for loop om te controleren of een titel een woord bevat.

Voorbereidingen zijn getroffen, tijd om in de for-lus te duiken.

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

We moeten alle titels kunnen doorlopen. Dat doen we met behulp van een telling.

if (arrayProductTitles[i].includes = 'jouw-woord-hier') {
     cartContains = true;
     break;
}

Binnen de for loop stellen we een if-statement in. Dit if statement werkt als volgt: Als een van de producttitels het woord ‘uw-woord-hier’ bevat, doe dan het volgende. Natuurlijk moet u ‘jouw-woord-hier’ vervangen door het woord dat u wilt controleren.

Als een van de producttitels het woord bevat dat u wilt controleren, verandert dat de variabele die we in de voorbereidingen hebben ingesteld. We zullen deze variabele gebruiken om wat code uit te voeren.

Zorg ervoor dat ‘break;’ in het if statement blijft staan!

De volledige code van het tweede deel van dit artikel:

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

Opmerking: De ‘jouw-woord-hier’ selector is hoofdlettergevoelig!

De code tot nu toe:

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

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

If else using product titles in cart

Tot nu toe hebben we het volgende gedaan:

Selecteer alle producttitels op de winkelwagenpagina
Een array maken van alle producttitels
Variabele false instellen
Schrijf een for loop om alle producttitels te controleren
Een if-instructie maken die de variabele false in true verandert

We zullen ons nu concentreren op het if statement dat de code voor het Google Optimize experiment uitvoert.

if (cartContains === true){

}

We schrijven nu de if-instructie. Roep de variabele op die je tijdens de voorbereidende stap hebt aangemaakt. We willen controleren of deze variabele gelijk is aan true. De if-instructie in de for-lus verandert de variabele van onwaar in waar als een van de producttitels van de winkelwagenpagina het gegeven woord bevat.

Dit if statement geeft ons de mogelijkheid om iets op de pagina te veranderen op basis van de inhoud van de winkelwagen op de winkelwagenpagina.

Volledige code

Hieronder vindt u de volledige code waarmee je dit experiment kunt uitvoeren in client-side A/B testing tools.

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

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

if (cartContains === true){

}

Conclusie

Deze code heb ik gebruikt om een funnel (meerdere pagina’s) experiment op te zetten binnen Google Optimize. Als de winkelwagen een voorbeeld van een product bevatte, heb ik een banner toegevoegd die de gebruikers vertelt dat ze gratis verzending krijgen bij hun volgende bestelling. Het hoofddoel voor dit experiment was het conversiepercentage. De doelgroep had een specifiek product in zijn winkelwagentje.

Als je de for loop meerdere keren wilt uitvoeren, is het misschien slim om er een functie van te maken.
Deze code zal elke keer dat een pagina wordt geladen (of ververst) worden uitgevoerd. Je zou een trigger kunnen toevoegen om de code opnieuw uit te voeren wanneer de winkelwagen wordt aangepast, voor het geval ze het artikel waarop je je richt hebben verwijderd.