Shopping cart implementation ideas

[pappuchai]

Use case is to display Product Cards across the website and each card has Quantity (+/-) to add / remove / update quantity. Want to achieve this without any redirect and reload stuff on the page

1. Update shopping cart quantity as per the user action
2. Stay on the same page and do not reload the full page content (via shouldRevalidate)

Assuming this card is displayed in Route1, Route2 and Route3 , writing the action function in all the routes to achieve the above doesn't make sense to me. Any suggestions on how to handle Product Card Actions at a common place and still achieve "do not reload the full page content (via shouldRevalidate)"

[pappuchai]

The method followed for the time being is

1. Create a route cart.ts with only action function, all the cards across the pages/routes will submit to cart to update in the backend DB.
2. [Optional] in respective routes from where the product card is displayed, implement shouldRevalidate depending on the requirement

If the page/route has a chance of getting the same product card repeated, it is better not to implement shouldRevalidate. Product1 appearing in "Best Selling" section may also appear in "Recommendations" also. So on updateQty of Product 1, new quantity must be changed in the second card - let remix loader handle data consistency

If the page/route has no chance of the Product card repeated, Implemented shouldRevalidate and avoided full page data reload.