Hi All!
How do I adjust the below script to add/update the product details in the Data Layer every time a user makes adjustments to their cart?
Background
I am using a Shopify theme called “Motion” which I recently updated to version 10.1.0.
This theme’s developers have included custom JavaScript event listeners and triggers for when a cart is updated and when a product is added to the cart: https://archetypethemes.co/blogs/motion/javascript-events-for-developers
Before I updated the theme, I had the working one below; however, the bottom section no longer grabs and pushes the cart info to the Data Layer. I’m not certain how to fix it using these custom events and triggers.
Original Script
Bottom Section Related to Capturing Data from Cart and Pushing to DataLayer- How to fix this?
const open = window.XMLHttpRequest.prototype.open;
function openReplacement() {
this.addEventListener("load", function () {
if (
[
"/cart/add.js",
"/cart/update.js",
].includes(this._url)
) {
addToDataLayer(this.response);
}
});
return open.apply(this, arguments);
}
window.XMLHttpRequest.prototype.open = openReplacement;
function addToDataLayer(data) {
var data = JSON.parse(data);
dataLayer.push({
'event': 'add_to_cart',
'value': data.final_price / 100,
'items': [{
'id': 'shopify_US_{{ product.id }}_{{ product.selected_or_first_available_variant.id }}',
'google_business_vertical': 'retail'
}]
})
console.log(data);
console.log("added Add to Cart event to dataLayer");
}