Sync winkelwagen in CMS met Squeezely

Bij veel CMS’en is er ingebouwde functionaliteit die winkelwagens leegmaakt bij een nieuwe sessie of na een vast tijdsbestek. Dit resulteert in onder meer onderstaande scenario’s:

Bezoekers zien een personalisatie met winkelwagen items uit hun Spotler Activate profiel die niet meer in hun website winkelwagen zitten.
De cart value is nog aanwezig in Spotler Activate waardoor “nog x voor gratis verzending” berekeningen niet kloppen.

De oplossing hiervoor is om removefromcart events te versturen, zoals zou gebeuren moest de gebruiker manueel de winkelwagen leegmaken. Om dit te automatiseren hebben we onderstaand script geschreven wat de cart product set uitleest en elk item verwijdert.

1 Voorbereiding
2 Script
- 2.1 Benodigde wijzigingen
- 2.2 Script afvuren
3 Verificatie

Voorbereiding

Spotler Activate product set instellingen

Ga naar je product sets in Spotler Activate en zoek op “cart”. De set die je zoekt heet normaal “Added to cart (no fallback)” en zal ook een ID bevatten. Noteer dit ID voor later in het script toe te voegen.

Vervolgens ga je naar de merchant instellingen en voeg je bovenstaande productset toe aan de dataLayer:

Element met aantal winkelwagen items op website ophalen

Het script hoort alleen af te vuren wanneer de winkelwagen op de website leeg is, dus je moet het huidige aantal in de winkelwagen ophalen via een HTML element. Dit verschilt van website tot website en afhankelijk van de structuur moet je extra Javascript toepassen. Wanneer je op je website rechts klikt op het cijfer wat het aantal items toont, kan je op ‘Inspecteren’ drukken en zo zie je de HTML structuur.

Het idee is dat cartAmount uiteindelijk 0 bevat (of een ander cijfer), zonder extra opmaak of decimalen.

Voorbeeld 1: Cijfer zonder opmaak

const cartSpan = document.querySelector("a.open-cart span.text");
let cartAmount;
if (cartSpan) {
    cartAmount = parseInt(cartSpan.innerText);
}

We moeten een unieke selector opgeven waardoor je alleen dit element terugkrijgt, je kan dit uittesten in de console tot je het gewenste resultaat hebt. Het element bevat alleen het cijfer 0, dus je moet alleen de eerste lijn wijzigen.

Voorbeeld 2: Decimaal cijfer met euroteken

const cartSpan = document.querySelector(".woocommerce-Price-amount");
let cartAmount;
if (cartSpan) {
    cartAmount = cartSpan.innerText;
    cartAmount = cartAmount.replace('€', '');
    cartAmount = parseInt(cartAmount);
}

Bij dit voorbeeld is er een concrete klasse, .woocommerce-Price-amount, maar binnen deze klasse staat zowel het eurotoken als het bedrag in decimale cijfers. Zodoende moeten we het euroteken verwijderen (lijn 5) en door het naar een integer om te zetten krijgen we gewoon “0”.

Audience voor personalisatie aanmaken

Deze stap is alleen nodig als je het script via een Spotler Activate personalisatie uitvoert, als je GTM / je eigen website hiervoor gebruikt hoeft dit niet.

Script

const setId = 7;
const cartSpan = document.querySelector("a.open-cart span.text");

let cartAmount;
if (cartSpan) {
    cartAmount = parseInt(cartSpan.innerText);
}

if (cartAmount == 0 && window.dataLayer && window.dataLayer.length > 0) {
    let newDL = window.dataLayer;
    let sqEvent = {};
    let sqProducts = [];
    let sqIds = [];
    let cartSet = false;

    for (let i = 0; i < newDL.length; i++) {
        if (newDL[i].event == "sqzl_productset" && newDL[i].product_set_id == setId && newDL[i].product_set_data.length > 0) {
            sqIds = newDL[i].product_set_data;
            cartSet = true;
            break;
        }
    }
    if (cartSet) {
        for (let i = 0; i < sqIds.length; i++) {
            sqProducts.push({
                "id": sqIds[i].id,
                "quantity": 99
            })
        }
        sqEvent.event = "RemoveFromCart";
        sqEvent.products = sqProducts;
        window._sqzl.push(sqEvent);
    }
}

Benodigde wijzigingen

Wijzig in lijn 1 het cijfer 7 naar het eerder opgezochte ID van de productset.
Wijzig lijnen 2 tot en met 6 naar de eerder op maat gemaakte queryselector en de mogelijk extra Javascript code om een integer te verkrijgen.

Script afvuren

Je kan dit script op je eigen site hosten, via een custom HTML tag in GTM afvuren of ook via Spotler Activate. In dat geval stel je een custom HTML personalisatie in die je ook meteen verbergt door middel van deze CSS:

Let wel op: je moet een queryselector selecteren die aanwezig is op de pagina, anders vuurt het script niet af. Het is ook altijd aan te raden te testen of de personalisatie je layout niet wijzigt, ondanks bovenstaande CSS.

Verificatie

Het is belangrijk om dit script grondig te testen waarbij je alle scenario’s naloopt. Enkele tips:

Het kan zijn dat de datalayer met productset iets vertraagd opvult, dit zou niet later dan 1 a 2 minuten na het add to cart event mogen zijn
Om te vermijden dat je moet wachten tot je CMS je cart automatisch leegmaakt kan je dit doen: het script vertraagd afvuren (in Spotler Activate dmv een trigger) en in de extra tijd, zelf het HTML element bewerken om de situatie na te bootsen:
In je Spotler Activate profiel kan je controleren of het succesvol was, de cart value zou niet zichtbaar mogen zijn: