Add Dynamic “Add to Cart” Button with Quantity Controls

[Alexandrbig1]

Priority: High
Difficulty: Intermediate
Type: Frontend (React + Tailwind)

---

Description:
Update the “Add to Cart” functionality to dynamically reflect product quantity and improve user experience.
When a user clicks “Add to Cart”, the product should automatically open the cart menu (linking to the existing cart feature task).
The button text should change dynamically to show quantity controls (+ / –) and update the cart state in real-time.

---

Requirements:

• Replace “Add to Cart” with quantity controls once an item is added:
  • Example: Quantity: 1 [ + ] [ – ]
• On + → increase quantity in cart.
• On – → decrease quantity in cart.
  • If quantity becomes 0, revert back to “Add to Cart”.
• Ensure consistency across:
  • All Products page
  • Garage Sale page
  • Collections pages (/collections/:name)
• Make the quantity control a reusable component (e.g., AddToCartButton.tsx) and import it into all product cards.
• Integrate with Redux (or current cart state logic).

---

Assets:

---

Acceptance Criteria:

• “Add to Cart” updates to quantity controls dynamically.
• Quantity changes reflect instantly in cart menu and global state.
• Works seamlessly across all product listing pages.
• Code is modular and reusable (no repetition between pages).
• Follows project ESLint/Prettier and responsive design rules.

---

Notes:

This task complements the cart menu feature. The cart menu should open automatically when a product is added to the cart.

[Sushil010]

@Alexandrbig1 can you assign this to me?

[Alexandrbig1]

@Sushil010, assigned. Thanks for your interest!

[Alexandrbig1]

@Sushil010, check the design, and also, here is a nice animation that could be added to our button as well (or similar).