How do I set the removefromcart event?

Many CMSs have built-in functionality that empties shopping carts during a new session or after a fixed period of time. This results in scenarios such as the following:

Visitors see a personalization with shopping cart items from their Activate profile that are no longer in their website shopping cart.
The cart value is still present in Activate, which means that “still x for free shipping” calculations are incorrect.

The solution for this is to send removefromcart events, as would happen if the user manually emptied the shopping cart. To automate this, we wrote the script below that reads the cart product set and removes each item.

Set up

Activate product set settings

Go to your product sets in Activate and search for “cart”. The set you are looking for is normally called “Added to cart (no fallback)” and will also contain an ID. Note this ID for later addition in the script.

Remove 1.png

Next, go to the merchant settings and add the above product set to the dataLayer:

Remove 2.png

Element with number of cart items on website

The script should only fire when the cart on the website is empty, so you need to retrieve the current number in the cart via an HTML element. This varies from website to website and depending on the structure you need to apply extra Javascript. When you right click on the number that shows the number of items on your website, you can press ‘Inspect’ and this will show you the HTML structure.

The idea is that cartAmount will eventually contain 0 (or another number), without any extra formatting or decimals.

Example 1: Number without formatting

Remove 3.png

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

We need to provide a unique selector so that you only get this element back, you can test this in the console until you get the desired result. The element only contains the number 0, so you only need to change the first line.

Example 2: Decimal number with euro sign

Remove 10.png

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

In this example, there is a concrete class, .woocommerce-Price-amount, but within this class both the euro token and the amount are in decimal digits. So we need to remove the euro sign (line 5) and by converting it to an integer we simply get “0”.

Create Audience for Personalization

This step is only necessary if you execute the script via an Activate personalization, if you use GTM / your own website for this, this is not necessary.

Remove 4.png

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++)="i++)" {="{" if="if" (newdl[i].event="=" sqzl_productset="sqzl_productset" &&="&&" newdl[i].product_set_id="=" setid="setId" newdl[i].product_set_data.length="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; 99="99" i++)="i++)" {="{" sqproducts.push({="sqProducts.push({" id="id" :=":" sqids[i].id,="sqIds[i].id," quantity="quantity" })="})" }="}" sqevent.event="RemoveFromCart" ;=";" sqevent.products="sqProducts;" window._sqzl.push(sqevent);="window._sqzl.push(sqEvent);"></sqids.length;></newdl.length;>

Required changes

Change the number 7 in line 1 to the previously searched ID of the product set.

Change lines 2 to 6 to the previously customized query selector and the possible extra Javascript code to obtain an integer.

Fire script

You can host this script on your own site, fire it via a custom HTML tag in GTM or also via Activate. In that case, set a custom HTML personalization that you also immediately hide using this CSS:

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

Please note: you must select a query selector that is present on the page, otherwise the script will not fire. It is also always advisable to test that the personalization does not change your layout, despite the above CSS.

Verification

It is important to test this script thoroughly, checking all scenarios. Some tips:

It is possible that the data layer with product set fills up a little bit delayed, this should not be later than 1 to 2 minutes after the add to cart event
To avoid having to wait for your CMS to automatically empty your cart, you can do this: fire the script with a delay (in Activate using a trigger) and in the extra time, edit the HTML element yourself to simulate the situation:
In your Activate profile you can check whether it was successful, the cart value should not be visible:

Articles in this section