✨ Agregando productos al carrito

Klauditha · Nov 26, 2023 · e08bf34 · e08bf34
1 parent e60d3b7
commit e08bf34
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 8 deletions.
diff --git a/src/Components/Card/Card.jsx b/src/Components/Card/Card.jsx
@@ -3,27 +3,36 @@ import { useContext } from "react";
 import { ShoppingCartContext } from "../../Context/Context";
 
 const Card = (data) => {
-
   const context = useContext(ShoppingCartContext);
 
   const showProduct = (productDetail) => {
     context.openProductDetails();
     context.setProductToShow(productDetail);
-  }
+  };
 
+  const addProductsToCart = (productData) => {
+    context.setCount(context.count + 1);
+    context.setCartProducts([...context.cartProducts, productData]);
+    console.log('CART: ', context.cartProducts);
+  };
   return (
-    <div className="bg-white cursor-pointer w-56 h-60 rounded-lg" onClick={() => showProduct(data.data)}>
+    <div
+      className="bg-white cursor-pointer w-56 h-60 rounded-lg"
+      onClick={() => showProduct(data.data)}
+    >
       <figure className="relative mb-2 w-full h-4/5">
         <span className="absolute bottom-0 left-0 bg-white/60 rounded-lg text-black text-xm m-2 px-3 py-0.5">
           {data.data.category.name}
         </span>
         <img
           className="w-full h-full object-cover rounded-lg"
-          src={data.data.images[0] }
+          src={data.data.images[0]}
           alt={data.data.title}
         />
-        <div className="absolute top-0 right-0 flex justify-center items-center bg-white w-6 h-6 rounded-full m-2 p-1"
-        onClick={() => context.setCount(context.count+1)}>
+        <div
+          className="absolute top-0 right-0 flex justify-center items-center bg-white w-6 h-6 rounded-full m-2 p-1"
+          onClick={() => addProductsToCart(data.data)}
+        >
           <PlusIcon className="h-6 w-6 text-black" />
         </div>
       </figure>
@@ -32,7 +41,7 @@ const Card = (data) => {
         <span className="text-lg font-medium">$ {data.data.price}</span>
       </p>
     </div>
-  )
+  );
 };
 
 export default Card;
diff --git a/src/Components/ProductDetail/ProductDetail.jsx b/src/Components/ProductDetail/ProductDetail.jsx
@@ -24,7 +24,7 @@ const ProductDetail = () => {
       <figure className="px-6">
         <img
           className="w-full h-full rounded-lg"
-          src={context.productToShow.images[0]}
+          src={context.productToShow.images}
           alt={context.productToShow.title}
         />
       </figure>

diff --git a/src/Context/Context.jsx b/src/Context/Context.jsx
@@ -14,6 +14,9 @@ export const ShoppingCartProvider = ({ children }) => {
 
   //Product detail: show product details
   const [productToShow, setProductToShow] = useState({});
+
+  // Shopping cart - Add product
+  const [cartProducts, setCartProducts] = useState([]);
   return (
     <ShoppingCartContext.Provider
       value={{
@@ -24,6 +27,8 @@ export const ShoppingCartProvider = ({ children }) => {
         isProductDetailsOpen,
         productToShow,
         setProductToShow,
+        cartProducts,
+        setCartProducts,
       }}
     >
       {children}