-
Product Quantity Management:
- When the
+/-
button is clicked, the product count increases or decreases accordingly. - This change triggers the
update(id)
function, which updates the individual product quantity in the UI.
- When the
-
Cart Management:
- The
totalCartItemsCalculator()
function continuously updates the total count of items in the cart.
- The
-
State Maintenance:
- The
productsBasket
array is updated with every interaction (adding, updating, or removing items). - If an item's quantity becomes zero, it is automatically removed from the
productsBasket
array. - The updated
productsBasket
is saved tolocalStorage
after every change to ensure data persistence even after a page refresh.
- The
-
Initialization:
- On first load,
productsBasket
is initialized as empty but gets updated as the user interacts with the cart.
- On first load,
-
Product Rendering:
- If the basket is maintained in
localStorage
, products are rendered for checkout; otherwise, a "Back to Home" button is displayed.
- If the basket is maintained in
-
Product Details Retrieval:
- Based on the
productsBasket
stored inlocalStorage
, additional product details likeproductImg
,productPrice
, andproductCount
are retrieved fromdata.js
and rendered.
- Based on the
-
Item Removal:
- The remove button (cross icon) removes the respective product from the cart based on its
id
.
- The remove button (cross icon) removes the respective product from the cart based on its
-
Dynamic UI Updates:
- The UI updates dynamically with every increment or decrement in product quantity, including the recalculated total amounts.
-
Clear Cart:
- Clicking the "Clear Cart" button removes all data from the cart and updates the UI accordingly, clearing the persisted data from
localStorage
.
- Clicking the "Clear Cart" button removes all data from the cart and updates the UI accordingly, clearing the persisted data from
Deployed Here : https://cartalike.netlify.app