AJAX Pitfall in Shopify

AJAX and Shopify may not mix well

March 7, 2017
javascript shopify web

Opening Image

I’ve been working on implementing a ‘gifting modal’ for a Shopify site, one that would allow for the storage of the giftee’s name and a personalized note for each item, the number of ‘gifts’ being based on the quantity field given before hitting ‘Add to Cart’. I’m storing the gift fields as properties on the added items.

The mechanism for overriding the default functionality, at least at first, seemed simple: put a listener on add to cart, put up a simple modal, then send one big POST to /cart/add.json when it’s all ready. This is, however, not the case, as /cart/add.json can’t take multiple types of item (including differing properties) in one POST.

“No biggie; I can just loop through the items and do a POST for each one” is what I thought at first. This led to irregular results when checking the cart afterward, with many of the items not showing up at all, and any successful additions were inconsistent between reattempts. Stange, as the requests all came up 200 OK.

After some quick JSON.stringifying, I found something odd: many of the results shared the same ID. If you know anything about how database tables are generally structured, this should seem a bit odd.

This should, however, seem less odd when considering that sites like Shopify or Amazon might prefer availability over consistency, and that I was submitting all of these requests asynchronously.

The simple solution was this: async: false in the options for $.ajax(url, opts).

While it may be slightly slower, for the amount of gifts that a person would add at one time, it did not seem any slower than the rest of the Shopify site.