How to make cart non editable while adding product via cart/add.js?

Hydrogen and Storefront APIs
1

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.

Thank you

2

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 :yum:

1 Like
3

Thank you. But the whoe change is that I saw 3 different types of elements in 3 different themes… how do we make a generic solution

4

You can’t make a good generic solution as that would require a lot of heavy javascript. Also the different themes has different events available.

5

Got it, Is there a good place to find all the different events like cart::refresh etc?

6

In the respective theme’s documentation

1 Like