Implement Add to Cart Functionality.
-
On click of addToCart item should be added to the cart. Store cart details in Recoil State.
-
Add and Remove items from cart ( - and + ). If the item is present in cart then instead of Add to Cart button show the following.
In the above image, the number between plus and minus buttons is the current quantity in the cart. -
On click of cart button, show the items in the card as follows:
Price is calculated by price per item * quantity in the cart.
The above cart dropdown is shown only if cart button from header is clicked.
- Use Recoil for managing React State
- In the cart dropdown the quantity should be equal to the quantity added to the cart.