Why do I have to trigger a click event twice to get the proper dataLayer to fire?
Question
Context
I am attempting to push events to the data layer on a Shopify site. I'm utilizing a liquid file that combines liquid and JS code to extract appropriate data from the site to push to the data layer. All of the events are firing properly with the exception of the "Remove from Cart" event.
Issue Description
The initial issue was that the "Remove from Cart" event data layer push never fired because the cart page reloaded to show the updated cart prior to the push.
With the code below, I am now able to get the "Remove from Cart" event to fire, BUT it only fires on the 2nd click of the remove icon.
Question
How do I get the "Remove from Cart" event push to fire on the initial click of the remove icon prior to the cart reload?
JS/Liquid Helper File
Removed unnecessary code for brevity.
if(!window.jQuery){
var jqueryScript = document.createElement('script');
jqueryScript.setAttribute('src','https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js');
document.head.appendChild(jqueryScript);
}
__DL__jQueryinterval = setInterval(function(){
// wait for jQuery to load & run script after jQuery has loaded
if(window.jQuery){
/**********************
* DYNAMIC DEPENDENCIES
***********************/
__DL__ = {
dynamicCart: true, // if cart is dynamic (meaning no refresh on cart add) set to true
debug: true, // if true, console messages will be displayed
cart: true,
removeCart: true
};
customBindings = {
cartTriggers: [],
viewCart: [],
removeCartTrigger: [],
};
/* DO NOT EDIT */
defaultBindings = {
//removeCartTrigger: ['[href*="/cart/change"]'],
removeCartTrigger: ['.tests'],
};
// stitch bindings
objectArray = customBindings;
outputObject = __DL__;
applyBindings = function(objectArray, outputObject){
for (var x in objectArray) {
var key = x;
var objs = objectArray[x];
values = [];
if(objs.length > 0){
values.push(objs);
if(key in outputObject){
values.push(outputObject[key]);
outputObject[key] = values.join(", ");
}else{
outputObject[key] = values.join(", ");
}
}
}
};
applyBindings(customBindings, __DL__);
applyBindings(defaultBindings, __DL__);
/**********************
* DATALAYER SECTIONS
***********************/
/** DATALAYER: Cart View
* Fire anytime a user views their cart (non-dynamic) */
{% if template contains 'cart' %}
var cart = {
'products':[{% for line_item in cart.items %}{
'id' : {{line_item.product_id | json}},
'sku' : {{line_item.sku | json}},
'variant' : {{line_item.variant_id | json}},
'name' : {{line_item.title | json}},
'price' : {{line_item.price | money_without_currency | remove: "," | json}},
'quantity' : {{line_item.quantity | json}}
},{% endfor %}],
'pageType' : 'Cart',
'event' : 'Cart'
};
dataLayer.push(cart);
if(__DL__.debug){
console.log("Cart"+" :"+JSON.stringify(cart, null, " "));
}
__DL__.cart = cart.products;
$(__DL__.removeCartTrigger).on('click', function (event) {
setTimeout(function(){
//const goTo = $(this).attr("data-href"); // store anchor href
// remove from cart
jQuery.getJSON("/cart", function (response) {
// get Json response
__DL__.removeCart = response;
var removeFromCart = {
'products': __DL__.removeCart.items.map(function (line_item) {
return {
'id' : line_item.product_id,
'sku' : line_item.sku,
'variant' : line_item.variant_id,
'name' : line_item.title,
'price' : (line_item.price/100),
'quantity' : line_item.quantity
}
}),
'pageType' : 'Remove from Cart',
'event' : 'Remove from Cart'
};
__DL__.removeCart = removeFromCart;
var cartIDs = [];
var removeIDs = [];
var removeCart = [];
// remove from cart logic
for(var i=__DL__.cart.length-1;i>=0;i--){var x=parseFloat(__DL__.cart[i].variant);cartIDs.push(x)}for(var i=__DL__.removeCart.products.length-1;i>=0;i--){var x=parseFloat(__DL__.removeCart.products[i].variant);removeIDs.push(x)}function arr_diff(b,c){var a=[],diff=[];for(var i=0;i<b.length;i++){a[b[i]]=true}for(var i=0;i<c.length;i++){if(a[c[i]]){delete a[c[i]]}else{a[c[i]]=true}}for(var k in a){diff.push(k)}return diff};var x=arr_diff(cartIDs,removeIDs)[0];for(var i=__DL__.cart.length-1;i>=0;i--){if(__DL__.cart[i].variant==x){removeCart.push(__DL__.cart[i])}}
dataLayer.push(removeCart);
if (__DL__.debug) {
console.log("Item Removed from Cart"+" :"+JSON.stringify(removeCart, null, " "));
}
});
}, 2000);
});
{% endif %}
/**********************
* DATALAYER EVENT BINDINGS
***********************/
/** DATALAYER:
* Add to Cart / Dynamic Cart View
* Fire all pages trigger after all additional dataLayers have loaded. */
$(document).ready(function() {
/** DATALAYER: Cart */
// stage cart data
function mapJSONcartData(){
jQuery.getJSON('/cart.js', function (response) {
// get Json response
__DL__.cart = response;
var cart = {
'products': __DL__.cart.items.map(function (line_item) {
return {
'id' : line_item.id,
'sku' : line_item.sku,
'variant' : line_item.variant_id,
'name' : line_item.title,
'price' : (line_item.price/100),
'quantity' : line_item.quantity
}
}),
'pageType' : 'Cart',
'event' : 'Cart'
};
if(cart.products.length > 0){
dataLayer.push(cart);
if (__DL__.debug) {
console.log("Cart"+" :"+JSON.stringify(cart, null, " "));
}
}
});
}
viewcartfire = 0;
// view cart
$(__DL__.viewCart).on('click', function (event) {
if(viewcartfire !== 1){
viewcartfire = 1;
// if dynamic cart is TRUE
if (__DL__.dynamicCart) {
cartCheck = setInterval(function () {
// begin check interval
if ($(__DL__.cartVisableSelector).length > 0) {
// check visible selectors
clearInterval(cartCheck);
mapJSONcartData();
$(__DL__.removeCartTrigger).on('click', function (event) {
// remove from cart
var link = $(this).attr("href");
jQuery.getJSON(link, function (response) {
// get Json response
__DL__.removeCart = response;
var removeFromCart = {
'products': __DL__.removeCart.items.map(function (line_item) {
return {
'id' : line_item.id,
'sku' : line_item.sku,
'variant' : line_item.variant_id,
'name' : line_item.title,
'price' : (line_item.price/100),
'quantity' : line_item.quantity
}
}),
'pageType' : 'Remove from Cart',
'event' : 'Remove from Cart'
};
dataLayer.push(removeFromCart);
if (__DL__.debug) {
console.log("Cart"+" :"+JSON.stringify(removeFromCart, null, " "));
}
});
});
}
}, 500);
}
}
});
// add to cart
jQuery.getJSON('/cart.js', function (response) {
// get Json response
__DL__.cart = response;
var cart = {
'products': __DL__.cart.items.map(function (line_item) {
return {
'id' : line_item.id,
'sku' : line_item.sku,
'variant' : line_item.variant_id,
'name' : line_item.title,
'price' : (line_item.price/100),
'quantity' : line_item.quantity
}
})
}
__DL__.cart = cart;
collection_cartIDs = [];
collection_matchIDs = [];
collection_addtocart = [];
for (var i = __DL__.cart.products.length - 1; i >= 0; i--) {
var x = parseFloat(__DL__.cart.products[i].variant);
collection_cartIDs.push(x);
}
});
function __DL__addtocart(){
dataLayer.push(product, {
'pageType' : 'Add to Cart',
'event' : 'Add to Cart'
});
if (__DL__.debug) {
console.log("Add to Cart"+" :"+JSON.stringify(product, null, " "));
}
// if dynamic cart is TRUE
if (__DL__.dynamicCart) {
console.log("dynamic");
var cartCheck = setInterval(function () {
// begin check interval
if ($(__DL__.cartVisableSelector).length > 0) {
// check visible selectors
clearInterval(cartCheck);
mapJSONcartData();
$(__DL__.removeCartTrigger).on('click', function (event) {
// remove from cart
var link = $(this).attr("href");
jQuery.getJSON(link, function (response) {
// get Json response
__DL__.removeCart = response;
var removeFromCart = {
'products': __DL__.removeCart.items.map(function (line_item) {
return {
'id' : line_item.id,
'sku' : line_item.sku,
'variant' : line_item.variant_id,
'name' : line_item.title,
'price' : (line_item.price/100),
'quantity' : line_item.quantity
}
}),
'pageType' : 'Remove from Cart',
'event' : 'Remove from Cart'
};
dataLayer.push(removeFromCart);
if (__DL__.debug) {
console.log("Cart"+" :"+JSON.stringify(removeFromCart, null, " "));
}
});
});
}
}, 500);
}
}
$(document).on('click', __DL__.cartTriggers, function() {
__DL__addtocart();
});
}); // document ready
}
}, 500);
Remove from Cart Link
<a href="#" data-href="/cart/change?line=1&quantity=0" class="tests cart-item__remove icon-fallback">
<i class="icon icon--close" aria-hidden="true"> </i>
<span class="icon-fallback__text">Remove</span>
</a>
Initial Data Layer Push (1st Remove from Cart Link Click)
{
event: "Cart",
gtm: {uniqueEventId: XXX, start: XXXXXXX},
logState: "Logged Out",
firstLog: false,
customerEmail: null,
timestamp: 1626795802651,
currency: "USD",
pageType: "Cart",
products: [
{
id: XXXX,
sku: "XXX",
variant: XXX,
name: "XXXX",
price: 20,
quantity: 1
}
],
necessaryTags: true,
performanceTags: true,
functionalTags: true,
targettingTags: true
}
Second Data Layer Push (2nd Remove from Cart Link Click)
{
event: "Remove from Cart",
gtm: {uniqueEventId: XXX, start: XXXXXX},
logState: "Logged Out",
firstLog: false,
timestamp: 1626796193806,
currency: "USD",
pageType: "Remove from Cart",
products: [
{
id: XXXX,
sku: "XXX",
variant: XXX,
name: "XXXX",
price: 20,
quantity: 1
}
],
necessaryTags: true,
performanceTags: false,
functionalTags: false,
targettingTags: false
}
I appreciate your help in advance!
1 answers
solution1
0 ACCPTED 2021-07-28 21:27:53
It turns out that there's a 3rd Party Shopify app that's hijacking the cart form submit event and forcing a reload of the cart page. While this doesn't solve my problem, it does answer the question in this post.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Why do I have to click twice for an event to fire in react?
Why do I need to click twice to fire up this jQuery event?
Have to fire click event twice to trigger full screen mode on ipad
EventListener and onClick - why do I have to click twice to trigger?
Why do I have to click button twice before event fires?
Why do I have to click twice for an event in react js
I have to click a button twice for an event handler to fire javascript
I have to click twice to get JQuery click function to fire
On element click Trigger event fire twice for input checkbox
Why do I have to click my event handler target twice before the DOM is updated?
Related Tags