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:

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.

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

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:

{{cssPrefix}} {
    display: none !important;
}

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: