Skip to content

Commit

Permalink
addtocart
Browse files Browse the repository at this point in the history
  • Loading branch information
PranshuTyagi2003 committed Oct 18, 2023
1 parent 689975d commit f5a6169
Show file tree
Hide file tree
Showing 13 changed files with 501 additions and 210 deletions.
27 changes: 21 additions & 6 deletions client/src/components/Cart/CartFloat/CartFloat.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@


import { useState } from "react";
import { useState, useEffect } from "react";
import BackBtn from "../../BackBtn/BackBtn";
import { FaTruckFast } from "react-icons/fa6";
import { FcCustomerSupport } from "react-icons/fc";
Expand All @@ -14,6 +14,21 @@ import { useCart } from "../../context/cart";
function CartFloat({ onClose }) {
const [cart, setCart] = useCart();
const [count, setCount] = useState(0);
const [cartItems, setCartItems] = useState([]);

useEffect(() => {
// Fetch cart items from your API
// Replace 'yourApiEndpoint' with the actual API endpoint URL
fetch("yourApiEndpoint")
.then((response) => response.json())
.then((data) => {
// Set the cart items in your component state
setCartItems(data);
})
.catch((error) => {
console.error("Error fetching cart items: ", error);
});
}, []);

const cartAssuredItems = [
{
Expand Down Expand Up @@ -85,7 +100,7 @@ function CartFloat({ onClose }) {
slidesPerView="auto"
scrollbar={{ draggable: true }}
>
{cart.map((product, index) => (
{cartItems.map((product, index) => (
<SwiperSlide key={index} className="flex flex-col ">
<div>
<div className="m-3 flex justify-evenly items-center cursor-pointer bg-white">
Expand All @@ -99,16 +114,16 @@ function CartFloat({ onClose }) {
<div className="flex">
<div className="flex flex-col justify-start items-start leading-5 w-full h-full p-3">
<div className="title text-sm md:text-base font-semibold">
<h2>Iphone 12</h2>
<h2>{product.title}</h2>
</div>
<div className="detail flex flex-wrap justify-start items-center gap-2 text-xs md:text-xs">
<p>Quality: Fair</p>
<p>Storage: 128GB</p>
<p>Quality: {product.quality}</p>
<p>Storage: {product.storage}</p>
{/* Display other product details */}
</div>
<div className="pricePro">
<h2 className="flex font-medium justify-center items-center gap-2">
{product.price}
{/* Display price and other details */}
</h2>
</div>
Expand Down
221 changes: 210 additions & 11 deletions client/src/components/Navigation/Navbar/Navbar.jsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useState } from "react";
import CartFloat from "../../Cart/CartFloat/CartFloat";
// import CartFloat from "../../Cart/CartFloat/CartFloat";
import WishlistPopup from "../../Wishlist/Wishlist";
import Search from "./Search";
import Dropdown from "../Dropdown/Dropdown";
Expand Down Expand Up @@ -129,8 +129,8 @@ function Navbar() {
</ul>
<div className="relative my-0 md:w-1/4 lg:w-1/3 xl:w-1/2 mx-5 hidden md:flex flex-col">
<Search setResults={setDesktopResults} className="sticky top-0" />
<SearchResults results={desktopResults} className="absolute top-10" onClose={closeDesktopSearchResults}/>
</div>
<SearchResults results={desktopResults} className="absolute top-10" onClose={closeDesktopSearchResults} />
</div>
<div className="flex flex-shrink md:flex-none justify-between items-center gap-5 mx-5 md:mx-0 md:gap-10">
<CiShoppingCart
onClick={toggleCart}
Expand All @@ -149,7 +149,7 @@ function Navbar() {
</div>
<div className="relative w-full md:hidden flex h-10 my-1 z-50">
<Search setResults={setMobileResults} className="sticky top-0" />
<SearchResults results={mobileResults} className="absolute top-10" onClose={closeMobileSearchResults}/>
<SearchResults results={mobileResults} className="absolute top-10" onClose={closeMobileSearchResults} />
</div>

{isCartOpen && <CartFloat isOpen={isCartOpen} onClose={toggleCart} />}
Expand All @@ -167,16 +167,215 @@ function Navbar() {
export default Navbar;


function Logo () {
function Logo() {
return (
<div className="z-50">
<Link to="/">
<div className="flex justify-center items-end">
<img src="./images/logo 2.png" alt="" className=" flex items-center w-40 md:w-30 xl:w-40 " />
</div>
</Link>
</div>
<Link to="/">
<div className="flex justify-center items-end">
<img src="./images/logo 2.png" alt="" className=" flex items-center w-40 md:w-30 xl:w-40 " />
</div>
</Link>
</div>
)
}





import { useEffect } from "react";
import BackBtn from "../../BackBtn/BackBtn";
import { FaTruckFast } from "react-icons/fa6";
import { FcCustomerSupport } from "react-icons/fc";
import { HiOutlineDeviceMobile } from "react-icons/hi";
import { BsShieldCheck } from "react-icons/bs";
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css'; // Import Swiper CSS
import { useCart } from "../../context/cart";

// eslint-disable-next-line react/prop-types
function CartFloat({ onClose }) {
const [cart, setCart] = useCart();
const [count, setCount] = useState(0);
const [cartItems, setCartItems] = useState([]);

useEffect(() => {
// Fetch cart items from your API
// Replace 'yourApiEndpoint' with the actual API endpoint URL
fetch("http://localhost:5000/api/user/cart")
.then((response) => response.json())
.then((data) => {
// Set the cart items in your component state
setCartItems(data);
})
.catch((error) => {
console.error("Error fetching cart items: ", error);
});
}, []);

const cartAssuredItems = [
{
icon: <FaTruckFast className="text-5xl md:text-4xl" />,
text: "Free shipping",
},
{
icon: <FcCustomerSupport className="text-5xl md:text-4xl" />,
text: "Exceptional Customer Service",
},
{
icon: <HiOutlineDeviceMobile className="text-5xl md:text-4xl" />,
text: "Free Phone Case and Screen Guard",
},
{
icon: <BsShieldCheck className="text-5xl md:text-4xl" />,
text: "1 Year Warranty",
},
];

const increase = () => {
setCount(count + 1);
};

const decrease = () => {
if (count > 0) {
setCount(count - 1);
}
};

const deleteItem = (index) => {
// Get the item to be deleted
const itemToDelete = cartItems[index];
const id = itemToDelete._id;
// Make an API request to delete the item from the database
fetch(`http://localhost:5000/api/user/cart/${id}`, {
method: 'DELETE',
})
.then((response) => {
if (response.status === 204) {
// Item deleted successfully from the database
// Now, update the cart in the client-side state
const updatedCart = [...cartItems];
updatedCart.splice(index, 1);
setCartItems(updatedCart);
} else {
// Handle any error or failure here
console.error('Failed to delete item from the database');
}
})
.catch((error) => {
console.error('Error deleting item: ', error);
});
};


return (
<div className={`fixed top-0 left-0 w-full h-full justify-end bg-black bg-opacity-50`}>
<div className={`fixed top-0 right-0 h-full w-full md:w-1/3 bg-white z-50 transform transition-transform ease-in-out duration-700`}>
<div className="flex justify-between items-center m-3">
<h2>Your Cart</h2>
<BackBtn func={onClose} className="text-base" />
</div>
<hr className="h-px border-0 bg-gray-500 mx-3" />
<div className="flex justify-center items-center m-4">
{cartAssuredItems.map((items, index) => (
<div key={index} className="flex flex-col justify-center items-center">
{items.icon}
<p className="text-xs md:text-sm text-center">{items.text}</p>
</div>
))}
</div>
<div className="cart-items-container overflow-y-auto max-h-[60vh]">
<div className="flex justify-center items-center m-4">
</div>


<div className="overflow-y-auto h-[40vh]">
<Swiper
className=""
direction="vertical"
slidesPerView="auto"
scrollbar={{ draggable: true }}
>
{cartItems.map((product, index) => (


<SwiperSlide key={index} >
<div className=" ">
<div className="m-3 flex justify-evenly items-center cursor-pointer bg-white">
<div className="flex">
<img
src="./images/iphone 2-1.png"
alt=""
className="w-[100px] h-[100px]"
/>
</div>
<div className="flex">
<div className="flex flex-col justify-start items-start leading-5 w-full h-full p-3">
<div className="title text-sm md:text-base font-semibold">
<h2>{product.title}</h2>
</div>
<div className="detail flex flex-wrap justify-start items-center gap-2 text-xs md:text-xs">
<p>Quality: {product.quality}</p>
<p>Storage: {product.storage}</p>
{/* Display other product details */}
</div>
<div className="pricePro">
<h2 className="flex font-medium justify-center items-center gap-2">
{product.price}
{/* Display price and other details */}
</h2>
</div>
</div>
<div className=" flex flex-col justify-between items-center ">
<BackBtn
className={"text-base"}
func={deleteItem(index)} // Add to cart with quantity logic
/>
{/* Add quantity controls and logic here */}
<div className="flex justify-between items-center w-16 h-2">
<button onClick={decrease}>-</button>
<p>{count}</p>
<button onClick={increase}>+</button>
</div>
</div>
</div>
</div>
</div>
</SwiperSlide>
))}
</Swiper>
</div>
</div>


{/* Checkout section */}
<div className="fixed bottom-0 bg-[#fffafa] mx-5 z-50">
<div className="flex flex-col mx-2 md:mx-5 mb-5">
<p className="text-sm">Proceed to apply coupon and confirm order:</p>
<div className="text-sm my-3">
<div className="flex justify-between items-center">
<p>Price: </p>
<p>₹81,999</p>
</div>
<div className="flex justify-between items-center">
<p>Savings: </p>
<p>0</p>
</div>
</div>
<div className="flex justify-between items-center font-semibold my-2">
<p>Subtotal: </p>
<p>₹91,999</p>
</div>
<div className="flex flex-col justify-center items-center mx-10">
<div className="flex justify-center items-center my-2 gap-2">
<input type="checkbox" name="TandC" id="T_C" defaultChecked required />
<label htmlFor="T_C" className="text-[10px]">I understand and agree to fonelanes <a href="" className="underline">return and Shipping policy</a> and <a href="" className="underline">T & C</a> </label>
</div>
<input type="submit" name="cartSubmit" id="cartSubmit" className="w-full py-2 bg-black text-white rounded-md cursor-pointer active:bg-gray-500 hover:scale-105 ease-linear duration-200" />
</div>
</div>
</div>
</div>
</div>
);
}
35 changes: 33 additions & 2 deletions client/src/pages/ProductPage/ProductPage.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ function ProductPage() {
// window.scrollTo(0, 0);
// }, []); // Empty dependency array ensures it only runs once when mounted



return (
<>
<Scroll />
Expand Down Expand Up @@ -130,7 +132,7 @@ function ProductSection() {
},
});
setData(res.data.data.attributes);
console.log(res.data.data.attributes.baseprice);
// console.log(res.data.data.attributes.baseprice);
} catch (error) {
console.error(error);
}
Expand Down Expand Up @@ -283,6 +285,35 @@ function ProductSection() {
setSelectedImage(image);
};

// const handleAddToCart = async () => {
// // Create an object with product details
// const productDetails = {
// title: data.title,
// price: dynamicPricing(),
// Condition: selectedQuality,
// Storage: selectedSpec,
// Color: selectedColor,
// };

const handleAddToCart = async () => {
// Create an object with product details
const productDetails = {
title: data.title,
price: dynamicPricing(),
Condition: selectedQuality,
Storage: selectedSpec,
Color: selectedColor,
};
try {
// Make a POST request to add the product to the user's cart
const response = await axios.post("http://localhost:5000/api/user/add-to-cart", productDetails);
console.log(response.data); // Handle the response as needed
} catch (error) {
console.error(error);
// Handle errors
}
}


return (
<>
Expand Down Expand Up @@ -336,7 +367,7 @@ function ProductSection() {
Buy Now
</button>

<button className="py-2 flex-1 px-5 border border-black flex justify-center items-center rounded-lg bg-black text-white active:bg-white active:text-black hover:scale-105">
<button className="py-2 flex-1 px-5 border border-black flex justify-center items-center rounded-lg bg-black text-white active:bg-white active:text-black hover:scale-105" onClick={handleAddToCart}>
Add to Cart
</button>
</div>
Expand Down
Loading

0 comments on commit f5a6169

Please sign in to comment.