Skip to content

Ugrade cart #459

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
LokinCLTD wants to merge 2 commits into
base: main
Choose a base branch
from
+122 −18
Open

Ugrade cart #459

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1849ea2
Add new features and respositivy
LokinCLTD Dec 2, 2025
a75233b
Implemented cart item count, add, remove e delete item from the cart
LokinCLTD Dec 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 45 additions & 9 deletions src/CartItem.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,73 @@
/* eslint-disable no-unused-vars */
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { removeItem, updateQuantity } from './CartSlice';
import './CartItem.css';

// eslint-disable-next-line react/prop-types
const CartItem = ({ onContinueShopping }) => {
const cart = useSelector(state => state.cart.items);
const dispatch = useDispatch();

// Calculate total amount for all products in the cart
const calculateTotalAmount = () => {

let total = 0;
cart.forEach(item => {
const quantity = item.quantity || 1; // Default to 1 if quantity is undefined
const costString = item.cost || '$0'; // Default to '$0' if cost is undefined
const costNumber = parseFloat(costString.replace(/[^0-9.]/g,'')); // Remove '$' and convert to number
const subtotal = costNumber * quantity;
total += subtotal;
});
return total.toFixed(2); // Return total amount rounded to 2 decimal places
};

// Handle continue shopping button click
const handleContinueShopping = (e) => {
if (onContinueShopping) {
onContinueShopping(e);
}

};
// Handle checkout button click
const checkoutShopping = (e) => {
alert('Functionality to be added in future updates.');
};



// Increment item quantity
const handleIncrement = (item) => {
dispatch(updateQuantity({
name: item.name,
quantity: (item.quantity || 1) + 1
}));
};

// Decrement item quantity
const handleDecrement = (item) => {

if (item.quantity > 1) {
dispatch(updateQuantity({
name: item.name,
quantity: (item.quantity || 1) - 1
}));
} else {
dispatch(removeItem(item.name));
}
};

// Remove item from cart
const handleRemove = (item) => {
dispatch(removeItem(item.name));
};

// Calculate total cost based on quantity for an item
const calculateTotalCost = (item) => {
const quantity = item.quantity || 1; // Default to 1 if quantity is undefined
const costString = item.cost || '$0'; // Default to '$0' if cost is undefined
const costNumber = parseFloat(costString.replace(/[^0-9.]/g,'')); // Remove '$' and convert to number
const totalCost = costNumber * quantity;
return (costNumber * quantity).toFixed(2); // Return total cost rounded to 2 decimal places
};
const calculateTotalQuantity = () => {
// eslint-disable-next-line no-undef
return CartItems ? CartItems.rerduce((total, item) => total + item.quantity, 0) : 0;
}

return (
<div className="cart-container">
Expand All @@ -57,12 +94,11 @@ const CartItem = ({ onContinueShopping }) => {
<div className="continue_shopping_btn">
<button className="get-started-button" onClick={(e) => handleContinueShopping(e)}>Continue Shopping</button>
<br />
<button className="get-started-button1">Checkout</button>
<button className="get-started-button1" onClick={checkoutShopping}>Checkout</button>
</div>
</div>
);
};

export default CartItem;


22 changes: 18 additions & 4 deletions src/CartSlice.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,31 @@ export const CartSlice = createSlice({
},
reducers: {
addItem: (state, action) => {

const { name, image, cost } = action.payload; // Destructure product details from action payload
const existingItem = state.items.find((item) => item.name === name); // Check if the item already exists in the cart
if (existingItem) {
existingItem.quantity += 1; // If it exists, increment the quantity
} else {
state.items.push({ name, image, cost, quantity: 1 }); // If not, add the new item with quantity 1
}
},
removeItem: (state, action) => {
// eslint-disable-next-line no-unused-vars
const itemName = action.payload; // Get the name of the item to be removed from action payload
state.items = state.items.filter((item) => item.name !== itemName); // Remove item by filtering it out
},
updateQuantity: (state, action) => {


},
const { name, quantity } = action.payload; // Destructure name and new quantity from action payload
const itemToUpdate = state.items.find(item => item.name === name); // Find the item to update
if (itemToUpdate) {
itemToUpdate.quantity = quantity; // Update the quantity if the item exists
}

}
},
});

// eslint-disable-next-line react-refresh/only-export-components
export const { addItem, removeItem, updateQuantity } = CartSlice.actions;

export default CartSlice.reducer;
64 changes: 59 additions & 5 deletions src/ProductList.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,26 @@
import React, { useState, useEffect } from 'react';
// eslint-disable-next-line no-unused-vars
import React, { useState, useEffect, } from 'react';
// eslint-disable-next-line no-unused-vars
import { useDispatch } from 'react-redux';
import { addItem } from './CartSlice';
import { useSelector } from 'react-redux';
import './ProductList.css'
import CartItem from './CartItem';
// eslint-disable-next-line react/prop-types
function ProductList({ onHomeClick }) {
const dispatch = useDispatch();
// eslint-disable-next-line no-unused-vars
const cart = useSelector(state => state.cart?.items || []);
// eslint-disable-next-line no-unused-vars
const totalItemsCount = cart.reduce((total, item) => { // Calculate total items in cart
return total + (item.quantity || 1);
}, 0);

const [showCart, setShowCart] = useState(false);
// eslint-disable-next-line no-unused-vars
const [showPlants, setShowPlants] = useState(false); // State to control the visibility of the About Us page

// eslint-disable-next-line no-unused-vars
const [addedToCart, setAddedToCart] = useState({})
const plantsArray = [
{
category: "Air Purifying Plants",
Expand Down Expand Up @@ -247,7 +263,13 @@ function ProductList({ onHomeClick }) {
setShowPlants(true); // Set showAboutUs to true when "About Us" link is clicked
setShowCart(false); // Hide the cart when navigating to About Us
};

const handleAddToCart = (product) => {
dispatch(addItem(product)); // Dispatch the addItem action with the selected product
setAddedToCart((prevState) => ({ // Update state to mark the product as added to cart
...prevState, // Preserve previous state
[product.name]: true, // Mark the current product as added to cart
}));
}
const handleContinueShopping = (e) => {
e.preventDefault();
setShowCart(false);
Expand All @@ -269,11 +291,43 @@ function ProductList({ onHomeClick }) {
</div>
<div style={styleObjUl}>
<div> <a href="#" onClick={(e) => handlePlantsClick(e)} style={styleA}>Plants</a></div>
<div> <a href="#" onClick={(e) => handleCartClick(e)} style={styleA}><h1 className='cart'><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" id="IconChangeColor" height="68" width="68"><rect width="156" height="156" fill="none"></rect><circle cx="80" cy="216" r="12"></circle><circle cx="184" cy="216" r="12"></circle><path d="M42.3,72H221.7l-26.4,92.4A15.9,15.9,0,0,1,179.9,176H84.1a15.9,15.9,0,0,1-15.4-11.6L32.5,37.8A8,8,0,0,0,24.8,32H8" fill="none" stroke="#faf9f9" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" id="mainIconPathAttribute"></path></svg></h1></a></div>
</div>
<div> <a href="#" onClick={(e) => handleCartClick(e)} style={styleA}><h1 className='cart'><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" id="IconChangeColor" height="68" width="68"><rect width="156" height="156" fill="none"></rect><circle cx="80" cy="216" r="12"></circle><circle cx="184" cy="216" r="12"></circle><path d="M42.3,72H221.7l-26.4,92.4A15.9,15.9,0,0,1,179.9,176H84.1a15.9,15.9,0,0,1-15.4-11.6L32.5,37.8A8,8,0,0,0,24.8,32H8" fill="none" stroke="#faf9f9" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" id="mainIconPathAttribute"></path></svg></h1>{totalItemsCount> 0 &&( <span className="cart-count"> {totalItemsCount}</span> )} </a></div></div>
</div>
{!showCart ? (
<div className="product-grid">
{plantsArray.map((category, index) => (
<div key={index}>
<h1>
<div>{category.category}</div> {/* Category Title */}
</h1>
<div className="product-list"> {/* Container for products in the category */}
{category.plants.map((plant, plantIndex) => (
<div className="product-card" key={plantIndex}>
<img
className="product-image"
src={plant.image} // Plant Image
alt={plant.name} // Plant Name and other details
/>
<div className="product-title">{plant.name}</div>
<div className="product-description">{plant.description}</div>
<div className="product-cost">{plant.cost}</div>
<button
className="add-to-cart-button"
onClick= {() => handleAddToCart(plant)} // Add to Cart Button
disabled={addedToCart[plant.name]} // Disable button if already added
>
{addedToCart[plant.name] ? 'Added to Cart' : ''}

Add to Cart
</button>


</div>
))}
</div>
</div>
)
)}


</div>
Expand Down