E-plantShoppingBranch

src/CartItem.jsx

@@ -9,29 +9,37 @@ const CartItem = ({ onContinueShopping }) => {
 
   // Calculate total amount for all products in the cart
   const calculateTotalAmount = () => {
-
-  };
+  return cart.reduce((total, item) => total + calculateTotalCost(item), 0).toFixed(2);
+};
 
-  const handleContinueShopping = (e) => {
-
-  };
+const handleContinueShopping = (e) => {
+  e.preventDefault();
+  onContinueShopping();
+};
 
+ const handleIncrement = (item) => {
+  dispatch(updateQuantity({ ...item, quantity: item.quantity + 1 }));
+};
 
 
-  const handleIncrement = (item) => {
-  };
+ const handleDecrement = (item) => {
+  if (item.quantity > 1) {
+    dispatch(updateQuantity({ ...item, quantity: item.quantity - 1 }));
+  }
+};
 
-  const handleDecrement = (item) => {
-
-  };
 
-  const handleRemove = (item) => {
+   const handleRemove = (item) => {
+    dispatch(removeItem(item));
   };
 
   // Calculate total cost based on quantity for an item
-  const calculateTotalCost = (item) => {
+   const calculateTotalCost = (item) => {
+    const cost = parseFloat(item.cost.substring(1)); // Remove '$' and convert to number
+    return (cost * item.quantity).toFixed(2); // Return subtotal as a string with 2 decimal places
   };
 
+
   return (
     <div className="cart-container">
       <h2 style={{ color: 'black' }}>Total Cart Amount: ${calculateTotalAmount()}</h2>

src/CartSlice.jsx

@@ -7,16 +7,31 @@ export const CartSlice = createSlice({
   },
   reducers: {
     addItem: (state, action) => {
-
+  const { name, image, cost } = action.payload; // Destructure product details from the action payload
+  // Check if the item already exists in the cart by comparing names
+  const existingItem = state.items.find(item => item.name === name);
+  if (existingItem) {
+    // If item already exists in the cart, increase its quantity
+    existingItem.quantity++;
+  } else {
+    // If item does not exist, add it to the cart with quantity 1
+    state.items.push({ name, image, cost, quantity: 1 });
+  }
+}
     },
-    removeItem: (state, action) => {
+    removeItem: (state, action) => { state.items = state.items.filter(item => item.name !== action.payload);
     },
     updateQuantity: (state, action) => {
-
+const { name, quantity } = action.payload; // Destructure the product name and new quantity from the action payload
+// Find the item in the cart that matches the given name
+const itemToUpdate = state.items.find(item => item.name === name);
+if (itemToUpdate) {
+  itemToUpdate.quantity = quantity; // If the item is found, update its quantity to the new value
+}
 
     },
   },
-});
+);
 
 export const { addItem, removeItem, updateQuantity } = CartSlice.actions;
 

src/ProductList.jsx

@@ -1,10 +1,12 @@
 import React, { useState, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { addItem } from './CartSlice';
 import './ProductList.css'
 import CartItem from './CartItem';
 function ProductList({ onHomeClick }) {
     const [showCart, setShowCart] = useState(false);
     const [showPlants, setShowPlants] = useState(false); // State to control the visibility of the About Us page
-
+    const [addedToCart, setAddedToCart] = useState({});
     const plantsArray = [
         {
             category: "Air Purifying Plants",
@@ -13,37 +15,37 @@ function ProductList({ onHomeClick }) {
                     name: "Snake Plant",
                     image: "https://cdn.pixabay.com/photo/2021/01/22/06/04/snake-plant-5939187_1280.jpg",
                     description: "Produces oxygen at night, improving air quality.",
-                    cost: "$15"
+                    cost: 15
                 },
                 {
                     name: "Spider Plant",
                     image: "https://cdn.pixabay.com/photo/2018/07/11/06/47/chlorophytum-3530413_1280.jpg",
                     description: "Filters formaldehyde and xylene from the air.",
-                    cost: "$12"
+                    cost: 12
                 },
                 {
                     name: "Peace Lily",
                     image: "https://cdn.pixabay.com/photo/2019/06/12/14/14/peace-lilies-4269365_1280.jpg",
                     description: "Removes mold spores and purifies the air.",
-                    cost: "$18"
+                    cost: 18
                 },
                 {
                     name: "Boston Fern",
                     image: "https://cdn.pixabay.com/photo/2020/04/30/19/52/boston-fern-5114414_1280.jpg",
                     description: "Adds humidity to the air and removes toxins.",
-                    cost: "$20"
+                    cost: 20
                 },
                 {
                     name: "Rubber Plant",
                     image: "https://cdn.pixabay.com/photo/2020/02/15/11/49/flower-4850729_1280.jpg",
                     description: "Easy to care for and effective at removing toxins.",
-                    cost: "$17"
+                    cost: 17
                 },
                 {
                     name: "Aloe Vera",
                     image: "https://cdn.pixabay.com/photo/2018/04/02/07/42/leaf-3283175_1280.jpg",
                     description: "Purifies the air and has healing properties for skin.",
-                    cost: "$14"
+                    cost: 14
                 }
             ]
         },
@@ -54,37 +56,37 @@ function ProductList({ onHomeClick }) {
                     name: "Lavender",
                     image: "https://images.unsplash.com/photo-1611909023032-2d6b3134ecba?q=80&w=1074&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
                     description: "Calming scent, used in aromatherapy.",
-                    cost: "$20"
+                    cost: 20
                 },
                 {
                     name: "Jasmine",
                     image: "https://images.unsplash.com/photo-1592729645009-b96d1e63d14b?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
                     description: "Sweet fragrance, promotes relaxation.",
-                    cost: "$18"
+                    cost: 18
                 },
                 {
                     name: "Rosemary",
                     image: "https://cdn.pixabay.com/photo/2019/10/11/07/12/rosemary-4541241_1280.jpg",
                     description: "Invigorating scent, often used in cooking.",
-                    cost: "$15"
+                    cost: 15
                 },
                 {
                     name: "Mint",
                     image: "https://cdn.pixabay.com/photo/2016/01/07/18/16/mint-1126282_1280.jpg",
                     description: "Refreshing aroma, used in teas and cooking.",
-                    cost: "$12"
+                    cost: 12
                 },
                 {
                     name: "Lemon Balm",
                     image: "https://cdn.pixabay.com/photo/2019/09/16/07/41/balm-4480134_1280.jpg",
                     description: "Citrusy scent, relieves stress and promotes sleep.",
-                    cost: "$14"
+                    cost: 14
                 },
                 {
                     name: "Hyacinth",
                     image: "https://cdn.pixabay.com/photo/2019/04/07/20/20/hyacinth-4110726_1280.jpg",
                     description: "Hyacinth is a beautiful flowering plant known for its fragrant.",
-                    cost: "$22"
+                    cost: 22
                 }
             ]
         },
@@ -95,37 +97,37 @@ function ProductList({ onHomeClick }) {
                     name: "oregano",
                     image: "https://cdn.pixabay.com/photo/2015/05/30/21/20/oregano-790702_1280.jpg",
                     description: "The oregano plants contains compounds that can deter certain insects.",
-                    cost: "$10"
+                    cost: 10
                 },
                 {
                     name: "Marigold",
                     image: "https://cdn.pixabay.com/photo/2022/02/22/05/45/marigold-7028063_1280.jpg",
                     description: "Natural insect repellent, also adds color to the garden.",
-                    cost: "$8"
+                    cost: 8
                 },
                 {
                     name: "Geraniums",
                     image: "https://cdn.pixabay.com/photo/2012/04/26/21/51/flowerpot-43270_1280.jpg",
                     description: "Known for their insect-repelling properties while adding a pleasant scent.",
-                    cost: "$20"
+                    cost: 20
                 },
                 {
                     name: "Basil",
                     image: "https://cdn.pixabay.com/photo/2016/07/24/20/48/tulsi-1539181_1280.jpg",
                     description: "Repels flies and mosquitoes, also used in cooking.",
-                    cost: "$9"
+                    cost: 9
                 },
                 {
                     name: "Lavender",
                     image: "https://images.unsplash.com/photo-1611909023032-2d6b3134ecba?q=80&w=1074&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
                     description: "Calming scent, used in aromatherapy.",
-                    cost: "$20"
+                    cost: 20
                 },
                 {
                     name: "Catnip",
                     image: "https://cdn.pixabay.com/photo/2015/07/02/21/55/cat-829681_1280.jpg",
                     description: "Repels mosquitoes and attracts cats.",
-                    cost: "$13"
+                    cost: 13
                 }
             ]
         },
@@ -136,37 +138,37 @@ function ProductList({ onHomeClick }) {
                     name: "Aloe Vera",
                     image: "https://cdn.pixabay.com/photo/2018/04/02/07/42/leaf-3283175_1280.jpg",
                     description: "Soothing gel used for skin ailments.",
-                    cost: "$14"
+                    cost: 14
                 },
                 {
                     name: "Echinacea",
                     image: "https://cdn.pixabay.com/photo/2014/12/05/03/53/echinacea-557477_1280.jpg",
                     description: "Boosts immune system, helps fight colds.",
-                    cost: "$16"
+                    cost: 16
                 },
                 {
                     name: "Peppermint",
                     image: "https://cdn.pixabay.com/photo/2017/07/12/12/23/peppermint-2496773_1280.jpg",
                     description: "Relieves digestive issues and headaches.",
-                    cost: "$13"
+                    cost: 13
                 },
                 {
                     name: "Lemon Balm",
                     image: "https://cdn.pixabay.com/photo/2019/09/16/07/41/balm-4480134_1280.jpg",
                     description: "Calms nerves and promotes relaxation.",
-                    cost: "$14"
+                    cost: 14
                 },
                 {
                     name: "Chamomile",
                     image: "https://cdn.pixabay.com/photo/2016/08/19/19/48/flowers-1606041_1280.jpg",
                     description: "Soothes anxiety and promotes sleep.",
-                    cost: "$15"
+                    cost: 15
                 },
                 {
                     name: "Calendula",
                     image: "https://cdn.pixabay.com/photo/2019/07/15/18/28/flowers-4340127_1280.jpg",
                     description: "Heals wounds and soothes skin irritations.",
-                    cost: "$12"
+                    cost: 12
                 }
             ]
         },
@@ -177,37 +179,37 @@ function ProductList({ onHomeClick }) {
                     name: "ZZ Plant",
                     image: "https://images.unsplash.com/photo-1632207691143-643e2a9a9361?q=80&w=464&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
                     description: "Thrives in low light and requires minimal watering.",
-                    cost: "$25"
+                    cost: 25
                 },
                 {
                     name: "Pothos",
                     image: "https://cdn.pixabay.com/photo/2018/11/15/10/32/plants-3816945_1280.jpg",
                     description: "Tolerates neglect and can grow in various conditions.",
-                    cost: "$10"
+                    cost: 10
                 },
                 {
                     name: "Snake Plant",
                     image: "https://cdn.pixabay.com/photo/2021/01/22/06/04/snake-plant-5939187_1280.jpg",
                     description: "Needs infrequent watering and is resilient to most pests.",
-                    cost: "$15"
+                    cost: 15
                 },
                 {
                     name: "Cast Iron Plant",
                     image: "https://cdn.pixabay.com/photo/2017/02/16/18/04/cast-iron-plant-2072008_1280.jpg",
                     description: "Hardy plant that tolerates low light and neglect.",
-                    cost: "$20"
+                    cost: 20
                 },
                 {
                     name: "Succulents",
                     image: "https://cdn.pixabay.com/photo/2016/11/21/16/05/cacti-1846147_1280.jpg",
                     description: "Drought-tolerant plants with unique shapes and colors.",
-                    cost: "$18"
+                    cost: 18
                 },
                 {
                     name: "Aglaonema",
                     image: "https://cdn.pixabay.com/photo/2014/10/10/04/27/aglaonema-482915_1280.jpg",
                     description: "Requires minimal care and adds color to indoor spaces.",
-                    cost: "$22"
+                    cost: 22
                 }
             ]
         }
@@ -218,7 +220,7 @@ function ProductList({ onHomeClick }) {
         padding: '15px',
         display: 'flex',
         justifyContent: 'space-between',
-        alignIems: 'center',
+        alignItems: 'center',
         fontSize: '20px',
     }
     const styleObjUl = {
@@ -252,6 +254,14 @@ function ProductList({ onHomeClick }) {
         e.preventDefault();
         setShowCart(false);
     };
+    const handleAddToCart = (product) => {
+  dispatch(addItem(product)); // Dispatch the action to add the product to the cart (Redux action)
+
+  setAddedToCart((prevState) => ({ // Update the local state to reflect that the product has been added
+    ...prevState, // Spread the previous state to retain existing entries
+    [product.name]: true, // Set the current product's name as a key with value 'true' to mark it as added
+  }));
+};
     return (
         <div>
             <div className="navbar" style={styleObj}>
@@ -274,7 +284,34 @@ function ProductList({ onHomeClick }) {
             </div>
             {!showCart ? (
                 <div className="product-grid">
-
+                    {plantsArray.map((category, index) => ( // Loop through each category in plantsArray
+  <div key={index}> {/* Unique key for each category div */}
+    <h1>
+      <div>{category.category}</div> {/* Display the category name */}
+    </h1>
+    <div className="product-list"> {/* Container for the list of plant cards */}
+      {category.plants.map((plant, plantIndex) => ( // Loop through each plant in the current category
+        <div className="product-card" key={plantIndex}> {/* Unique key for each plant card */}
+          <img 
+            className="product-image" 
+            src={plant.image} // Display the plant image
+            alt={plant.name} // Alt text for accessibility
+          />
+          <div className="product-title">{plant.name}</div> {/* Display plant name */}
+          {/* Display other plant details like description and cost */}
+          <div className="product-description">{plant.description}</div> {/* Display plant description */}
+          <div className="product-cost">${plant.cost}</div> {/* Display plant cost */}
+          <button
+            className="product-button"
+            onClick={() => handleAddToCart(plant)} // Handle adding plant to cart
+          >
+            Add to Cart
+          </button>
+        </div>
+      ))}
+    </div>
+  </div>
+))}
 
                 </div>
             ) : (
@@ -283,5 +320,4 @@ function ProductList({ onHomeClick }) {
         </div>
     );
 }
-
 export default ProductList;