I am using theme app extensions and currently have an App Block that recently changed to an iFrame.
With this change, I used to have a listener in the script.
document.body.addEventListener('click', test(), false);
Although now since my code is in the iFrame, I have added this piece of code on the app block, and inside test() function I have:
console.log('CLICKED ON DOCUMENT');
iframe.postMessage('CLICKED', '*');
I noticed that anything I try, that event listener does NOT work on the app block. It only runs once. First is when I refresh the page, Second time when it’s inserted via Chrome Console CMD Line. After that, nothing in test(); logs, or happens. Is it prevented for these event listeners in the app block?
[MY END GOAL]
I mainly need to check for a “Add to cart” functionality and I can’t target “Add to Cart” buttons since many of the stores I work with have custom buttons, with custom ids/classes. I tried something like this below, but no execution.
Shopify.onItemAdded = function(line_item) {
console.log('Item added to the cart');
iframe.postMessage('TEST', '*');
}
Any help on why that event listener only executes once / has any other alternative methods I can use to determine items added to cart, please let me know!