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
<script>
window.dataLayer = window.dataLayer || [];
let rmkt_items = [];
let rmkt_value = 0;
{%- if collection and template != "product" and template != "search" -%}
{%- for product in collection.products -%}
{%- for variant in product.variants -%}
var item = {
'id': 'shopify_US_{{ product.id }}_{{ variant.id }}',
'google_business_vertical': 'retail'
};
{%- endfor-%}
rmkt_items.push(item);
rmkt_value += (parseFloat({{ product.price | money_without_currency | json }} ));
{%- endfor -%}
window.dataLayer.push({
'event': 'view_item_list',
'value': rmkt_value.toFixed(2),
'items': rmkt_items
});
{%- endif -%}
{%- if product -%}
rmkt_value = (parseFloat({{ product.selected_or_first_available_variant.price | money_without_currency | json }} ));
window.dataLayer.push({
'event': 'view_item',
'value': rmkt_value.toFixed(2),
'items': [{
'id': 'shopify_US_{{ product.id }}_{{ product.selected_or_first_available_variant.id }}',
'google_business_vertical': 'retail'
}]
});
console.log(dataLayer[0])
{%- endif -%}
{% if template == 'search' %}
{% for item in search.results %}
{% if item.object_type == 'product' %}
rmkt_value += (parseFloat({{ item.price }} / 100 ));
var item = {
'id': 'shopify_US_{{ item.id }}_{{ item.first_available_variant.id }}',
'google_business_vertical': 'retail'
};
rmkt_items.push(item);
{% endif %}
{% endfor %}
window.dataLayer.push({
'event': 'view_search_results',
'value': rmkt_value,
'items': rmkt_items
});
{% endif %}
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");
}
</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");
}
