Total Cart Amount: ${calculateTotalAmount()}
-
- {cart.map(item => (
-
- 
-
+ {/* Cart total */}
+
);
-};
+}
export default CartItem;
-
-
diff --git a/src/CartSlice.jsx b/src/CartSlice.jsx
index 32b8761ed..be5567b73 100644
--- a/src/CartSlice.jsx
+++ b/src/CartSlice.jsx
@@ -7,13 +7,30 @@ export const CartSlice = createSlice({
},
reducers: {
addItem: (state, action) => {
-
+ // Check if the item already exists in the cart.
+ const itemIndex = state.items.findIndex(
+ (item) => item.name === action.payload.name
+ );
+ if (itemIndex !== -1) {
+ // If found, increment its quantity.
+ state.items[itemIndex].quantity += 1;
+ } else {
+ // If not, add the new item with a quantity of 1.
+ state.items.push({ ...action.payload, quantity: 1 });
+ }
},
removeItem: (state, action) => {
+ // Remove the item from the cart based on its name.
+ state.items = state.items.filter((item) => item.name !== action.payload);
},
updateQuantity: (state, action) => {
-
-
+ // Extract the name and new quantity from the payload.
+ const { name, quantity } = action.payload;
+ // Find the item and update its quantity if it exists.
+ const item = state.items.find((item) => item.name === name);
+ if (item) {
+ item.quantity = quantity;
+ }
},
},
});
diff --git a/src/ProductList.css b/src/ProductList.css
index 52f9c7a84..d0b3903ba 100644
--- a/src/ProductList.css
+++ b/src/ProductList.css
@@ -1,252 +1,217 @@
-/* Reset some default styles */
+/* RESET */
body, h1, ul {
- margin: 0;
- padding: 0;
+ margin: 0;
+ padding: 0;
}
-/* Set a background color */
+/* BASIC BODY STYLES */
body {
- font-family: Arial, sans-serif;
- background-color: #f0f0f0;
+ font-family: Arial, sans-serif;
+ background-color: #f0f0f0;
}
-/* Navbar */
+/* NAVBAR */
.navbar {
- background-color: #4CAF50;
- color: #fff!important;
- padding: 15px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- font-size: 20px;
+ background-color: #4CAF50;
+ color: #fff!important;
+ padding: 15px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-size: 20px;
}
-
.navbar .ul {
- display: flex;
- justify-content: space-between;
- align-items: center;
- width: 1100px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 1100px;
}
-
.navbar li {
- margin-right: 30px;
+ margin-right: 30px;
}
-
.navbar .ul div a {
- color: white;
- font-size: 30px;
- text-decoration: none;
-
+ color: white;
+ font-size: 30px;
+ text-decoration: none;
}
-/* Product Grid */
-.product-grid {
- display:flex;
- flex-direction: column;
- width: 100vw;
- align-items: center;
- justify-content: center;
+/* TAG / LOGO AREA */
+.tag_home_link {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin-left: 50px;
+ color: white;
+ text-decoration: none;
+ font-size: 20px;
}
-.product-list {
- display: flex;
- flex-wrap: wrap;
- gap: 50px;
- /* background-color: pink; */
- /* justify-content: space-between; */
- padding: 20px;
- width: 100%;
- align-items: center;
- justify-content: center;
+.tag_home_link h3 {
+ font-size: 30px;
}
-
-/* Product Card */
-.product-card {
- flex: 0 0 calc(33.33% - 20px); /* Adjust width for 3 cards per row with 20px gap */
- max-width: calc(26.33% - 20px); /* Adjust max-width for 3 cards per row with 20px gap */
- margin-bottom: 20px;
- padding: 20px;
- background-color: #fff;
- border: 1px solid #ccc;
- border-radius: 5px;
- text-align: center;
- position: relative;
-
- gap: 20px;
+.tag a {
+ text-decoration: none;
}
-
-/* Pseudo-classes - Hover effect on product button */
-.product-card:hover {
- transform: scale(1.05);
- transition: transform 0.3s ease-in-out;
- z-index: 1;
+.tag {
+ width: 400px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.tag img {
+ height: 70px;
+ width: 70px;
+ border-radius: 70%;
+}
+.luxury {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 650px;
+ font-size: 19px;
}
-.product-title {
- font-weight: bold;
- margin-bottom: 10px;
+/* CART ICON */
+.cart {
+ color: white;
+ display: flex;
+}
+.cart_quantity_count {
+ margin-top: 16px;
+ margin-left: 27px;
+ position: absolute;
+ font-size: 29px;
}
-.product-price {
- color: #e74c3c;
- font-size: 1.2rem;
- margin-bottom: 10px;
+/* PLANT HEADING */
+.plant_heading {
+ text-align: center;
+ margin: 20px;
+ border: 1px solid rgb(5, 4, 4);
+ border-left: none;
+ border-right: none;
+ font-size: 24px;
}
-.product-image {
- max-width: 100%;
- height: 200px; /* Adjust height for better consistency */
+/* PRODUCT GRID WRAPPER */
+.product-grid {
+ display: flex;
+ flex-direction: column;
+ width: 100vw;
+ align-items: center;
+ justify-content: center;
}
-.product-button {
- background-color: #e74c3c;
- color: #fff;
- border: none;
- padding: 10px 20px;
- cursor: pointer;
- transition: background-color 0.3s ease-in-out;
- margin-top: 10px;
+/* PRODUCT LIST ROW */
+.product-list {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 50px;
+ padding: 20px;
+ width: 100%;
+ align-items: center;
+ justify-content: center;
}
-.product-button:hover {
- background-color: #c0392b;
+/* PRODUCT CARD */
+.product-card {
+ flex: 0 0 calc(33.33% - 20px); /* 3 cards per row */
+ max-width: calc(33.33% - 20px);
+ margin-bottom: 20px;
+ padding: 20px;
+ background-color: #fff;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ text-align: center;
+ position: relative; /* for the SALE badge */
+ transition: transform 0.3s ease-in-out;
+}
+
+/* HOVER EFFECT */
+.product-card:hover {
+ transform: scale(1.05);
+ z-index: 1;
}
-/* Pseudo-elements - Sale badge */
+/* SALE BADGE */
.product-card::before {
- content: "SALE";
- background-color: #e74c3c;
- color: #fff;
- position: absolute;
- top: 0;
- right: 0;
- padding: 5px 10px;
- border-radius: 0 0 0 5px;
-}
-.tag_home_link{
- display: flex;
- /* background-color: red; */
- flex-direction: column;
- align-items: center;
- justify-content: center;
- margin-left: 50px;
- color: white;
- text-decoration: none;
- font-size: 20px;
+ content: "SALE";
+ background-color: #e74c3c;
+ color: #fff;
+ position: absolute;
+ top: 0;
+ right: 0;
+ padding: 5px 10px;
+ border-radius: 0 0 0 5px;
}
-.tag_home_link h3{
- font-size: 30px;
+
+/* PRODUCT IMAGE / TEXT */
+.product-image {
+ max-width: 100%;
+ height: 200px;
+ object-fit: cover;
+ margin-bottom: 10px;
}
-.tag a{
- text-decoration: none;
+.product-title {
+ font-weight: bold;
+ margin-bottom: 5px;
}
-.tag {
- width: 400px;
- display: flex;
- align-items: center;
- justify-content: center;
+.product-description {
+ margin-bottom: 10px;
+ color: #666;
}
-
-.tag img {
- height: 70px;
- width: 70px;
- border-radius: 70%;
-
+.product-price {
+ color: #e74c3c;
+ font-size: 1.2rem;
+ margin-bottom: 10px;
}
-.luxury {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 650px;
- font-size: 19px;
-}
-.cart{
- color: white;
- display: flex;
+/* ADD TO CART BUTTON */
+.product-button {
+ background-color: #4CAF50;
+ color: white;
+ border: none;
+ padding: 10px 20px;
+ cursor: pointer;
+ transition: background-color 0.3s ease-in-out;
+ margin-top: 10px;
}
-.cart_quantity_count{
- margin-top: 16px;
- /* background-color: red; */
- margin-left: 27px;
- position: absolute;
- font-size: 29px;
-
+.product-button:hover {
+ background-color: #45a049;
}
-.plantname_heading{
- display: flex;
- align-items: center;
- justify-content: center;
- /* background-color: yellow; */
+/* When product is already added */
+.product-button.added-to-cart {
+ background-color: grey;
}
-.plant_heading{
- width: 400px;
- text-align: center;
- margin: 20px;
- border: 1px solid rgb(5, 4, 4);
- border-left: none;
- border-right: none;
-
+/* MEDIA QUERIES */
+@media (max-width: 1200px) {
+ .product-card {
+ flex: 1 1 calc(33.33% - 20px);
+ max-width: calc(33.33% - 20px);
+ }
}
-/* Add Media Query for responsiveness */
+
@media (max-width: 768px) {
- .product-card {
- flex: 1 1 calc(50% - 20px); /* Adjust width for 2 cards per row with 20px gap on smaller screens */
- max-width: calc(50% - 20px); /* Adjust max-width for 2 cards per row with 20px gap on smaller screens */
- }
-}
-/* ProductList.css */
+ .product-card {
+ flex: 1 1 calc(50% - 20px); /* 2 cards per row on small screens */
+ max-width: calc(50% - 20px);
+ }
-.product-button {
- background-color: #4CAF50; /* Green */
- border: none;
- color: white;
- padding: 10px 20px;
- text-align: center;
- text-decoration: none;
- display: inline-block;
- font-size: 16px;
- margin: 4px 2px;
- transition-duration: 0.4s;
- cursor: pointer;
+ .navbar {
+ flex-direction: column;
+ align-items: center;
}
-
- .product-button:hover {
- background-color: #45a049;
+ .tag {
+ margin-bottom: 20px;
+ text-align: center;
}
-
- .product-button.added-to-cart {
- background-color: grey; /* Grey when product is added */
+ .ul {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
}
- @media (max-width: 1200px) {
- .product-card {
- flex: 1 1 calc(33.33% - 20px); /* Adjust width for 3 cards per row with 20px gap on medium screens */
- max-width: calc(33.33% - 20px); /* Adjust max-width for 3 cards per row with 20px gap on medium screens */
- }
+ .ul div {
+ text-align: center;
}
-
- @media (max-width: 768px) {
- .product-card {
- flex: 1 1 calc(50% - 20px); /* Adjust width for 2 cards per row with 20px gap on small screens */
- max-width: calc(50% - 20px); /* Adjust max-width for 2 cards per row with 20px gap on small screens */
- }
- .navbar {
- flex-direction: column; /* Change flex direction to stack items vertically */
- align-items: center; /* Align items to the center of the container */
- }
-
- .tag {
- margin-bottom: 20px; /* Add margin bottom for spacing */
- text-align: center; /* Align text to the center */
- }
-
- .ul {
- display: flex; /* Set display to flex */
- flex-direction: column; /* Change flex direction to stack items vertically */
- gap: 10px; /* Add gap between items */
- }
-
- .ul div {
- text-align: center; /* Align text to the center */
- }
- }
\ No newline at end of file
+}
diff --git a/src/ProductList.jsx b/src/ProductList.jsx
index 964b15d49..c5c0ca600 100644
--- a/src/ProductList.jsx
+++ b/src/ProductList.jsx
@@ -1,281 +1,356 @@
-import React, { useState,useEffect } from 'react';
-import './ProductList.css'
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { addItem } from './CartSlice';
+import './ProductList.css';
import CartItem from './CartItem';
+
function ProductList() {
- const [showCart, setShowCart] = useState(false);
- const [showPlants, setShowPlants] = useState(false); // State to control the visibility of the About Us page
+ const dispatch = useDispatch();
+ const [showCart, setShowCart] = useState(false);
+ const [showPlants, setShowPlants] = useState(false);
+ const [addedToCart, setAddedToCart] = useState({});
- const plantsArray = [
+ const plantsArray = [
+ {
+ category: "Air Purifying Plants",
+ plants: [
+ {
+ 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"
+ },
+ {
+ 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"
+ },
+ {
+ 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"
+ },
+ {
+ 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"
+ },
+ {
+ 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"
+ },
+ {
+ 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"
+ }
+ ]
+ },
+ {
+ category: "Aromatic Fragrant Plants",
+ plants: [
+ {
+ 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"
+ },
+ {
+ 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"
+ },
+ {
+ 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"
+ },
+ {
+ 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"
+ },
+ {
+ 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"
+ },
+ {
+ 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"
+ }
+ ]
+ },
+ {
+ category: "Insect Repellent Plants",
+ plants: [
+ {
+ name: "oregano",
+ image: "https://cdn.pixabay.com/photo/2015/05/30/21/20/oregano-790702_1280.jpg",
+ description: "The oregano plant contains compounds that can deter certain insects.",
+ 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"
+ },
+ {
+ 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"
+ },
+ {
+ 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"
+ },
+ {
+ 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"
+ },
+ {
+ 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"
+ }
+ ]
+ },
+ {
+ category: "Medicinal Plants",
+ plants: [
+ {
+ 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"
+ },
{
- category: "Air Purifying Plants",
- plants: [
- {
- 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"
- },
- {
- 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"
- },
- {
- 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"
- },
- {
- 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"
- },
- {
- 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"
- },
- {
- 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"
- }
- ]
+ 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"
},
{
- category: "Aromatic Fragrant Plants",
- plants: [
- {
- 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"
- },
- {
- 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"
- },
- {
- 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"
- },
- {
- 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"
- },
- {
- 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"
- },
- {
- 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"
- }
- ]
+ 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"
},
{
- category: "Insect Repellent Plants",
- plants: [
- {
- 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"
- },
- {
- 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"
- },
- {
- 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"
- },
- {
- 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"
- },
- {
- 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"
- },
- {
- 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"
- }
- ]
+ 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"
},
{
- category: "Medicinal Plants",
- plants: [
- {
- 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"
- },
- {
- 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"
- },
- {
- 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"
- },
- {
- 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"
- },
- {
- 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"
- },
- {
- 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"
- }
- ]
+ 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"
},
{
- category: "Low Maintenance Plants",
- plants: [
- {
- 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"
- },
- {
- 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"
- },
- {
- 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"
- },
- {
- 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"
- },
- {
- 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"
- },
- {
- 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"
- }
- ]
+ 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"
}
- ];
- const styleObj={
+ ]
+ },
+ {
+ category: "Low Maintenance Plants",
+ plants: [
+ {
+ 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"
+ },
+ {
+ 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"
+ },
+ {
+ 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"
+ },
+ {
+ 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"
+ },
+ {
+ 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"
+ },
+ {
+ 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"
+ }
+ ]
+ }
+ ];
+
+ /** NAVIGATION HANDLERS **/
+ const handleCartClick = (e) => {
+ e.preventDefault();
+ setShowCart(true);
+ };
+ const handlePlantsClick = (e) => {
+ e.preventDefault();
+ setShowCart(false);
+ };
+ const handleContinueShopping = (e) => {
+ e.preventDefault();
+ setShowCart(false);
+ };
+
+ /** ADD TO CART **/
+ const handleAddToCart = (plant) => {
+ dispatch(addItem(plant));
+ setAddedToCart((prevState) => ({
+ ...prevState,
+ [plant.name]: true
+ }));
+ };
+
+ /** INLINE STYLES FOR NAVBAR **/
+ const styleObj = {
backgroundColor: '#4CAF50',
color: '#fff!important',
padding: '15px',
display: 'flex',
justifyContent: 'space-between',
- alignIems: 'center',
- fontSize: '20px',
- }
- const styleObjUl={
+ alignItems: 'center',
+ fontSize: '20px'
+ };
+ const styleObjUl = {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
- width: '1100px',
- }
- const styleA={
+ width: '1100px'
+ };
+ const styleA = {
color: 'white',
fontSize: '30px',
- textDecoration: 'none',
- }
- const handleCartClick = (e) => {
- e.preventDefault();
- setShowCart(true); // Set showCart to true when cart icon is clicked
-};
-const handlePlantsClick = (e) => {
- e.preventDefault();
- setShowPlants(true); // Set showAboutUs to true when "About Us" link is clicked
- setShowCart(false); // Hide the cart when navigating to About Us
-};
-
- const handleContinueShopping = (e) => {
- e.preventDefault();
- setShowCart(false);
+ textDecoration: 'none'
};
- return (
- Total Cart Amount: ${calculateTotalAmount()}
+ + {/* Map through each cart item */} + {cartItems.map((item) => ( +
+ {/* Product image */}
+
+
+ {/* Product details */}
+
-
-
+
+
+
- ))}
- {item.name}
{item.cost}
+
+ {/* Quantity controls */}
-
+
{item.quantity}
-
+
+
+
+ {/* Item subtotal */}
+
+ Total: ${calculateItemSubtotal(item)}
- Total: ${calculateTotalCost(item)}
-
+
+ {/* Remove button */}
+
-
-
- +
+ ))}
+
+ {/* Cart actions: Continue Shopping & Checkout */}
+ - +
+
+
-
-
-
+
+ return (
+
-
+ {/* NAVBAR */}
+
+
- {!showCart? (
-
-)}
+ ) : (
+
- );
+ );
}
-export default ProductList;
+export default ProductList;
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index 4d190ae43..33627fe9e 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -4,5 +4,6 @@ import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
base: "/shoppingreact",
+ base: "/e-plantShopping",
plugins: [react()],
})
+
+ {/* SHOW CART OR PRODUCTS */}
+ {!showCart ? (
+
+
+
+
+ Plants
+
+
+
+
+
+ + +
+ +
+ {plantsArray.map((categoryObj, catIndex) => (
+
- ) : (
-
+
+ ))}
{categoryObj.category}
+
+ {categoryObj.plants.map((plant, plantIndex) => (
+
+
+ 
+
+ ))}
+ {plant.name}
+{plant.description}
+{plant.cost}
+
+