Total Cart Amount: ${calculateTotalAmount()}
-
- {cart.map(item => (
+
);
};
export default CartItem;
-
-
diff --git a/src/CartSlice.jsx b/src/CartSlice.jsx
index 32b8761ed0..b05963687f 100644
--- a/src/CartSlice.jsx
+++ b/src/CartSlice.jsx
@@ -7,13 +7,26 @@ export const CartSlice = createSlice({
},
reducers: {
addItem: (state, action) => {
-
- },
+ const { name, image, cost } = action.payload;
+ const existingItem = state.items.find(item => item.name === name);
+ if (existingItem) {
+ existingItem.quantity++;
+ } else {
+ state.items.push({ name, image, cost, quantity: 1 });
+ }
+ alert('Item added to cart');
+ },
+
removeItem: (state, action) => {
+ state.items = state.items.filter(item => item.name !== action.payload);
},
- updateQuantity: (state, action) => {
-
+ updateQuantity: (state, action) => {
+ const {name, quantity} = action.payload;
+ const itemToUpdate = state.items.find(item => item.name === name);
+ if(itemToUpdate){
+ itemToUpdate.quantity = quantity;
+ };
},
},
});
diff --git a/src/ProductList.jsx b/src/ProductList.jsx
index 7682c04fc4..ea995af3bb 100644
--- a/src/ProductList.jsx
+++ b/src/ProductList.jsx
@@ -1,9 +1,15 @@
import React, { useState, useEffect } from 'react';
import './ProductList.css'
import CartItem from './CartItem';
+import { addItem } from './CartSlice';
+import { useDispatch, useSelector } from 'react-redux';
+
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 dispatch = useDispatch();
+ const cartItems = useSelector((state) => state.cart.items);
const plantsArray = [
{
@@ -212,6 +218,7 @@ function ProductList({ onHomeClick }) {
]
}
];
+
const styleObj = {
backgroundColor: '#4CAF50',
color: '#fff!important',
@@ -233,6 +240,7 @@ function ProductList({ onHomeClick }) {
textDecoration: 'none',
}
+
const handleHomeClick = (e) => {
e.preventDefault();
onHomeClick();
@@ -252,6 +260,25 @@ function ProductList({ onHomeClick }) {
e.preventDefault();
setShowCart(false);
};
+
+ const handleAddToCart = (product) => {
+ dispatch(addItem(product));
+
+ setAddedToCart((prevState) => ({
+ ...prevState,
+ [product.name]: true,
+ }));
+ };
+
+ const calculateTotalQuantity = () => {
+ return cartItems ? cartItems.reduce((total, item) => total + item.quantity, 0) : 0;
+ };
+
+ const calculateTotalItems = () => {
+ return cartItems.reduce((total, item) => total + item.quantity, 0);
+ };
+
+
return (
+ Total Cart Amount: ${calculateTotalAmount()} +
+ +
+ {cart.map((item) => (
+
))}
-
+
{item.name}
- {item.cost}
+ Price: {item.cost}
+
-
+
{item.quantity}
-
+
- Total: ${calculateTotalCost(item)}
-
+
+
+ Subtotal: ${calculateSubtotal(item)}
+
+
+
-
-
- + +
- + +
@@ -269,12 +296,64 @@ function ProductList({ onHomeClick }) {
-
+
handleCartClick(e)}>
+
+
+ {calculateTotalItems() > 0 && (
+ {calculateTotalItems()}
+ )}
+
+
+ {plantsArray.map((category, index) => (
+
) : (
diff --git a/vite.config.js b/vite.config.js
index 4d190ae430..beeaed5cdc 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -3,6 +3,6 @@ import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
- base: "/shoppingreact",
+ base: "/e-plantShopping",
plugins: [react()],
})
+
+
+
+ ))}
+ {category.category}
+
+
+ {category.plants.map((plant, plantIndex) => (
+
+
+ 
+
+ ))}
+ {plant.name}
+ {plant.description}
+ {plant.cost}
+
+
+