Adding cart attribute causes cart.js to start looping

convincify_team
New Member
2 0 0
For a bit of context, we are testing the addition of upsells to our cart page.  To see how many orders contain upsell items that are added to the cart, we are pushing a cart attribute when a user clicks to add one of these items to the cart so we can pull reports of orders that contain this custom attribute.  Our code is basically a copy/paste from the following documentation: https://shopify.dev/docs/themes/ajax-api/reference/cart#post-cart-update-js (specifically the Update cart attributes portion).

However, we noticed that intermittently, the cart.js object appears to start looping (around 3:30 in the video below) when we push an update via JavaScript, and subsequently never ends up resolving itself unless the user takes another action.   We had to take the code out of production but made a recording walking through our code and observations: https://www.loom.com/share/0e9eca27989348e78ab122451c036d52.
 
A few items I can proactively answer which your team might have:

- This code is run on the cart page
- Issue is product and location independent
- Does not consistently happen on every click on upsell items.  Sometimes the update goes through without issues, other times it starts looping
- Can confirm the onclick event is not being invoked multiple times (see the section of the video where I discuss the console log addition)
- We do not necessarily need to use the cart attribute path for tagging these orders, but if we use something else, we would still like to understand why this behavior is occurring, so we do not repeat it in the future.



While not the same issue, seems others are noticing some recent oddities around similar updates as well: https://community.shopify.com/c/Shopify-APIs-SDKs/Cart-API-Update-not-working-reliably/m-p/991838#M6...

0 Likes
_JCC_
Shopify Staff
Shopify Staff
158 21 27

@convincify_team,

Thanks for providing so much detail and sharing the screen recording. I think the approach you're using makes total sense. I've done some simple testing mimicking the behaviour you're attempting (without using the Fera Upsell app), and I'm not experiencing the issue.  I'd be interested in tracking down the initiator of these requests.

When watching the video you shared, it appears that these are repeated GET requests to /cart.js. When debugging the issue, did you have a look at the stack trace on the Initiator column found in the Network tab of the Chrome developer tools? I was thinking the stack trace displayed when hovering over the initiator column could provide some clues to the client side code that's initiating these requests.

Look forward to hearing back from you.

Regards,

John

 

John C | Developer Support @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

0 Likes
convincify_team
New Member
2 0 0

@_JCC_ 

Thanks for the response and glad the video was helpful, know replicating/troubleshooting code issues can be a bit tough without being in the same room.

Made a follow-up video here where I inspect the network call initiators and showcase how to replicate this issue in production (GTM code is not live, but show how I was running console JS to trigger it): https://www.loom.com/share/97b82c0c1e3b42f796197d5cd66a876b

However, if this still lacks some of the network call information you were looking for, let me know.

Corey

0 Likes
_JCC_
Shopify Staff
Shopify Staff
158 21 27
 
Thanks for posting the follow-up video.
 
All the client side requests will get routed through shop_events_listener.js but it's not really the initiator of that GET request. In the video you'll notice further down in the stack trace a reference to  @VM670:1. If you click the link it should take you to the file. The file is likely minified but Chrome often provides a pretty print button to make the code more readable. I believe this to be the source of these requests.
 
After your excellent suggestion for testing without the Google Tag manager I was able to reproduce the behaviour, and I believe an APP is causing the repeated GET requests. I will follow-up with my findings and I think the next best step might be to involve the APP developer.
 
Regards,
John

John C | Developer Support @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

0 Likes