Merge pull request #148 from kaali001/bugfix-cartPage

fix: Cart Functionality: Added Quantity Modification and Item Removal issue:#50
dvjsharma · Jul 24, 2024 · dc795ff · dc795ff
2 parents ac1bce0 + 15c0dd1
commit dc795ff
Show file tree

Hide file tree

Showing 5 changed files with 262 additions and 101 deletions.
diff --git a/client/src/assets/empty_cart.svg b/client/src/assets/empty_cart.svg
diff --git a/client/src/components/Cart-Card/index.jsx b/client/src/components/Cart-Card/index.jsx
@@ -1,50 +1,56 @@
-const Cartcard = (props) => {
+import React from "react";
+
+const Cartcard = ({ productId, productImage, shoename, shoeSize, quantity, price, onIncrease, onDecrease, onRemove }) => {
     return (
         <>
-            <div
-                className="justify-between mb-6 rounded-lg bg-white p-6 shadow-md sm:flex sm:justify-start"
-
-            >
+            <div className="justify-between mb-6 rounded-lg bg-white p-6 shadow-md sm:flex sm:justify-start">
                 <img
-                    src={props.productImage}
+                    src={productImage}
                     alt="product-image"
                     className="w-full rounded-lg sm:w-40"
                 />
                 <div className="sm:ml-4 sm:flex sm:w-full sm:justify-between">
                     <div className="mt-5 sm:mt-0">
                         <h2 className="text-lg font-bold text-gray-900">
-                            {props.shoename}
+                            {shoename}
                         </h2>
                         <p className="mt-1 text-xs text-gray-700">
-                            {props.shoeSize}
+                            Size: {shoeSize}
                         </p>
                     </div>
                     <div className="mt-4 flex justify-between sm:space-y-6 sm:mt-0 sm:block sm:space-x-6">
                         <div className="flex items-center border-gray-100">
-                            <span className="cursor-pointer rounded-l bg-gray-100 py-1 px-3.5 duration-100 hover:bg-blue-500 hover:text-blue-50">
+                            <span
+                                className="cursor-pointer rounded-l bg-gray-100 py-1 px-3.5 duration-100 hover:bg-blue-500 hover:text-blue-50"
+                                onClick={() => onDecrease(productId)}
+                            >
                                 {" "}
                                 -{" "}
                             </span>
                             <input
                                 className="h-8 w-8 border bg-white text-center text-xs outline-none"
                                 type="number"
-                                defaultValue={props.quantity}
-                                min="1"
+                                value={quantity}
+                                readOnly
                             />
-                            <span className="cursor-pointer rounded-r bg-gray-100 py-1 px-3 duration-100 hover:bg-blue-500 hover:text-blue-50">
+                            <span
+                                className="cursor-pointer rounded-r bg-gray-100 py-1 px-3 duration-100 hover:bg-blue-500 hover:text-blue-50"
+                                onClick={() => onIncrease(productId)}
+                            >
                                 {" "}
                                 +{" "}
                             </span>
                         </div>
                         <div className="flex items-center space-x-4">
-                            <p className="text-sm">{props.price}</p>
+                            <p className="text-sm">Price: {price}</p>
                             <svg
                                 xmlns="http://www.w3.org/2000/svg"
                                 fill="none"
                                 viewBox="0 0 24 24"
                                 strokeWidth="1.5"
                                 stroke="currentColor"
                                 className="h-5 w-5 cursor-pointer duration-150 hover:text-red-500"
+                                onClick={() => onRemove(productId)}
                             >
                                 <path
                                     strokeLinecap="round"