Implement dynamic price calculation based on quantity

JiyaGupta-cs · Feb 21, 2024 · 6c6c9b6 · 6c6c9b6
1 parent ff5fb3d
commit 6c6c9b6
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 18 deletions.
diff --git a/src/Components/CartItems/CartItems.css b/src/Components/CartItems/CartItems.css
@@ -49,6 +49,7 @@
     border: 2px solid #ebebeb;
     background: #fff;
     text-align: center;
+    color: rgb(5, 5, 5);
 }
 
 .cartitems-down{

diff --git a/src/Components/CartItems/CartItems.jsx b/src/Components/CartItems/CartItems.jsx
@@ -2,10 +2,15 @@ import React, { useContext } from "react";
 import "./CartItems.css";
 import { ShopContext } from "../../Context/ShopContext";
 import remove_icon from "../Assets/cart_cross_icon.png";
-
 const CartItems = () => {
-  const { all_product, cartItems, removeFromCart, getTotalCartAmount,theme } =
+  const { cartItems, removeFromCart, getTotalCartAmount, theme } =
     useContext(ShopContext);
+
+  // Function to calculate the total price for each item considering the quantity
+  const calculateTotalPrice = (item) => {
+    return item.new_price * item.quantity;
+  };
+
   return (
     <div className="cartitems">
       <div className={`cartitems-format-main ci_${theme}`}>
@@ -18,21 +23,21 @@ const CartItems = () => {
         <p>Remove</p>
       </div>
       <hr />
-      {cartItems.map((e) => {
+      {cartItems.map((item) => {
         return (
-          <div>
+          <div key={item.id}>
             <div className="cartitems-format cartitems-format-main">
-              <img src={e.image} alt="" className="carticon-product-icon" />
-              <p>{e.name}</p>
-              <p className="text-Align">${e.new_price}</p>
-              <p className="text-Align">{e?.size}</p>
-              <button className="cartitems-quantity">{e?.Quantity}</button>
-              <p className="text-Align">${e.new_price}</p>
+              <img src={item.image} alt="" className="carticon-product-icon" />
+              <p>{item.name}</p>
+              <p className="text-Align">${item.new_price}</p>
+              <p className="text-Align">{item.size}</p>
+              <button className="cartitems-quantity">{item.quantity}</button>
+              <p className="text-Align">${calculateTotalPrice(item)}</p> {/* Display total price for each item */}
               <img
                 className="cartitems-remove-icon"
                 src={remove_icon}
                 onClick={() => {
-                  removeFromCart(e.id);
+                  removeFromCart(item.id);
                 }}
                 alt=""
               />

diff --git a/src/Context/ShopContext.jsx b/src/Context/ShopContext.jsx
@@ -7,20 +7,36 @@ const ShopContextProvider = (props) => {
   const [cartItems, setcartItems] = useState([]);
   const [theme,setTheme]=useState("dark");
   const addToCart = (itemId, size, quantity) => {
-    const cartProduct = all_product.find((product) => product.id === itemId);
-    cartProduct.size = size;
-    cartProduct.Quantity = quantity;
-    console.log(cartProduct);
-    setcartItems([...cartItems, cartProduct]);
+    const existingCartItemIndex = cartItems.findIndex(item => item.id === itemId && item.size === size);
+
+    if (existingCartItemIndex !== -1) {
+      const updatedCartItems = cartItems.map((item, index) => {
+        if (index === existingCartItemIndex) {
+          return {
+            ...item,
+            quantity: item.quantity + quantity
+          };
+        }
+        return item;
+      });
+      setcartItems(updatedCartItems);
+    } else {
+      const cartProduct = all_product.find((product) => product.id === itemId);
+      cartProduct.size = size;
+      cartProduct.quantity = quantity;
+      setcartItems([...cartItems, cartProduct]);
+    }
   };
+
   const removeFromCart = (itemId) => {
     setcartItems(cartItems.filter((product) => product.id !== itemId));
   };
 
   const getTotalCartAmount = () => {
-    const total = 0;
-    return cartItems.map((product) => total + product.new_price)[0] || 0;
+    return cartItems.reduce((total, product) => total + (product.new_price * product.quantity), 0);
   };
+
+
 
   const getTotalCartItems = () => {
     return cartItems.length;