Hi, I am using cart/add.js to add a product to cart. During the milli seconds it takes for product to get added and cart to refresh, if user does any change to cart it behaves quite randomly. For e.g. if the code is adding 1 quantity of product A and cart has Product B and user increments quantity of Product B, then 2 quantity of Product A will get added.
Is there a way to make the cart uneditable during those miliseconds or any other solution? I am doing this for my app so cannot change theme files or do any theme specific changes.
Depends on the cart and theme, but it’s usually enough to simply add a loading class to the cart container, and then use CSS to handle it. Something like pointer-events: none; and simple UX loading animations.
If you need more “security” you can set element.disabled = false on necessary elements like inputs and buttons. Just remember to revert when the promise is handled