A space to discuss online store customization, theme development, and Liquid templating.
We are using a Shopify App which limits the quantity of a particular product. If user tried to increase or decrease the qty of specific product then we are resetting the qyt using Shopify AJAX API's and after refresh it shows updated qty in Networks tab -> cart.js. However, when we move to checkout then the product qty at checkout don't match to the product qty in cart.js.
Note - This gets resolved if we refresh the page after resetting the qty but we don't want to refresh/reload the page and the product qty in cart.js should match the product qty at checkout.
Any help or further information on this topic is is appreciated.
You need to update cart.js via update.js.
If this method works for you, then experiment with fetching data and updating cart through update.js.
fetch('https://"shopify_store_url"/cart/update.json')
.then((response) => response.json())
.then((cartData) => {
// updating
}
Thanks for your input on this.
Currently we are using change.js to update/reset qty. Do you think using update.js will make the difference and if so then are you also aware on any specific reason for this?
It doesn't really make a difference what you use. In my experience, I've encountered this. You reset the item quantity figure, but you don't update your cart. You have a section of code in your theme code where when you add/remove items, the fetch is triggered and gets the right data. Your mistake is that you are preventing the user from adding items by removing all the items they added with your script, but you are not triggering a change to your cart. Apparently, your script is blocking the execution of the cart "recalculation" script. You can test this by inserting test code to change the cart, if the cart changes, the script will reload the page. If it does, your script is blocking the execution of the main script.
@romartiny thanks for those details. This is really helpful.
I just want to summarise it to make sure I am getting it correctly-
1. After updating qty via our script which currently use AJAX API /cart/change.js, we need to update the cart as well so that the cart "recalculation" script gets executed which will update the qty correctly on cart.
2. For updating the cart you are recommending using below API -
fetch('https://"shopify_store_url"/cart/update.json') .then((response) => response.json()) .then((cartData) => { // updating }.
Since we are using AJAX API's, can you please help to point me to the documentation of this API in Shopify docs?
1. Your script should work like this. First remove products from the list, and then recalculate in cart.js.
2. There is no documentation. Each cart has its own documentation, but I don't think you will find anything about it there.
It would be better for you to attach a link to your store.