Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 03ad91c7e3 | |||
| 9073a8d6b0 | |||
| e9c4a2a668 | |||
| fab2cbb6a4 |
86
src/app/cartContext.tsx
Normal file
86
src/app/cartContext.tsx
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { createContext, useContext, useState, useEffect } from "react";
|
||||||
|
|
||||||
|
interface CartItem {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
price: number;
|
||||||
|
imageSrc: string;
|
||||||
|
quantity: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CartContextType {
|
||||||
|
cartItems: CartItem[];
|
||||||
|
addToCart: (product: { id: string; name: string; price: string; imageSrc: string; imageAlt?: string }) => void;
|
||||||
|
removeFromCart: (id: string) => void;
|
||||||
|
updateQuantity: (id: string, quantity: number) => void;
|
||||||
|
clearCart: () => void;
|
||||||
|
totalPrice: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CartContext = createContext<CartContextType | undefined>(undefined);
|
||||||
|
|
||||||
|
export const CartProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||||
|
const [cartItems, setCartItems] = useState<CartItem[]>(() => {
|
||||||
|
// Load cart from localStorage on initial render
|
||||||
|
if (typeof window !== "undefined") {
|
||||||
|
const storedCart = localStorage.getItem("shopwel_cart");
|
||||||
|
if (storedCart) {
|
||||||
|
return JSON.parse(storedCart);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return [];
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Save cart to localStorage whenever it changes
|
||||||
|
if (typeof window !== "undefined") {
|
||||||
|
localStorage.setItem("shopwel_cart", JSON.stringify(cartItems));
|
||||||
|
}
|
||||||
|
}, [cartItems]);
|
||||||
|
|
||||||
|
const addToCart = (product: { id: string; name: string; price: string; imageSrc: string; imageAlt?: string }) => {
|
||||||
|
setCartItems((prevItems) => {
|
||||||
|
const itemExists = prevItems.find((item) => item.id === product.id);
|
||||||
|
if (itemExists) {
|
||||||
|
return prevItems.map((item) =>
|
||||||
|
item.id === product.id ? { ...item, quantity: item.quantity + 1 } : item
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
const priceValue = parseFloat(product.price.replace("₹", "").replace("/kg", "").replace("/L", ""));
|
||||||
|
return [...prevItems, { ...product, price: priceValue, quantity: 1 }];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeFromCart = (id: string) => {
|
||||||
|
setCartItems((prevItems) => prevItems.filter((item) => item.id !== id));
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateQuantity = (id: string, quantity: number) => {
|
||||||
|
setCartItems((prevItems) =>
|
||||||
|
prevItems.map((item) => (item.id === id ? { ...item, quantity: Math.max(1, quantity) } : item))
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const clearCart = () => {
|
||||||
|
setCartItems([]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const totalPrice = cartItems.reduce((total, item) => total + item.price * item.quantity, 0);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<CartContext.Provider value={{ cartItems, addToCart, removeFromCart, updateQuantity, clearCart, totalPrice }}>
|
||||||
|
{children}
|
||||||
|
</CartContext.Provider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useCart = () => {
|
||||||
|
const context = useContext(CartContext);
|
||||||
|
if (context === undefined) {
|
||||||
|
throw new Error("useCart must be used within a CartProvider");
|
||||||
|
}
|
||||||
|
return context;
|
||||||
|
};
|
||||||
@@ -14,6 +14,23 @@ import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|||||||
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
||||||
|
|
||||||
export default function LandingPage() {
|
export default function LandingPage() {
|
||||||
|
const updatedNavItems = [
|
||||||
|
{
|
||||||
|
name: "Home", id: "#home"},
|
||||||
|
{
|
||||||
|
name: "About", id: "#about"},
|
||||||
|
{
|
||||||
|
name: "Products", id: "#products"},
|
||||||
|
{
|
||||||
|
name: "Orders", id: "/order-details"},
|
||||||
|
{
|
||||||
|
name: "Testimonials", id: "#testimonials"},
|
||||||
|
{
|
||||||
|
name: "FAQs", id: "#faqs"},
|
||||||
|
{
|
||||||
|
name: "Contact", id: "#contact"},
|
||||||
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
defaultButtonVariant="text-stagger"
|
defaultButtonVariant="text-stagger"
|
||||||
@@ -30,20 +47,7 @@ export default function LandingPage() {
|
|||||||
<ReactLenis root>
|
<ReactLenis root>
|
||||||
<div id="nav" data-section="nav">
|
<div id="nav" data-section="nav">
|
||||||
<NavbarLayoutFloatingOverlay
|
<NavbarLayoutFloatingOverlay
|
||||||
navItems={[
|
navItems={updatedNavItems}
|
||||||
{
|
|
||||||
name: "Home", id: "#home"},
|
|
||||||
{
|
|
||||||
name: "About", id: "#about"},
|
|
||||||
{
|
|
||||||
name: "Products", id: "#products"},
|
|
||||||
{
|
|
||||||
name: "Testimonials", id: "#testimonials"},
|
|
||||||
{
|
|
||||||
name: "FAQs", id: "#faqs"},
|
|
||||||
{
|
|
||||||
name: "Contact", id: "#contact"},
|
|
||||||
]}
|
|
||||||
logoSrc="http://img.b2bpic.net/free-vector/green-supermarket-corporate-identity-logo-template_23-2148453180.jpg"
|
logoSrc="http://img.b2bpic.net/free-vector/green-supermarket-corporate-identity-logo-template_23-2148453180.jpg"
|
||||||
logoAlt="Shopwel Mart Logo"
|
logoAlt="Shopwel Mart Logo"
|
||||||
brandName="Shopwel Mart"
|
brandName="Shopwel Mart"
|
||||||
@@ -119,18 +123,6 @@ export default function LandingPage() {
|
|||||||
id: "p5", name: "Seasonal Fruit Basket", price: "₹399", variant: "Fresh Produce", imageSrc: "http://img.b2bpic.net/free-photo/bunch-various-vegetables-out-wooden-basket_114579-56243.jpg", imageAlt: "Basket of assorted seasonal fruits"},
|
id: "p5", name: "Seasonal Fruit Basket", price: "₹399", variant: "Fresh Produce", imageSrc: "http://img.b2bpic.net/free-photo/bunch-various-vegetables-out-wooden-basket_114579-56243.jpg", imageAlt: "Basket of assorted seasonal fruits"},
|
||||||
{
|
{
|
||||||
id: "p6", name: "Ethiopian Coffee Beans", price: "₹650", variant: "Beverages", imageSrc: "http://img.b2bpic.net/free-photo/sackcloth-full-coffee-beans-coffee-beans-surface_176474-495.jpg", imageAlt: "Bag of Ethiopian coffee beans"},
|
id: "p6", name: "Ethiopian Coffee Beans", price: "₹650", variant: "Beverages", imageSrc: "http://img.b2bpic.net/free-photo/sackcloth-full-coffee-beans-coffee-beans-surface_176474-495.jpg", imageAlt: "Bag of Ethiopian coffee beans"},
|
||||||
{
|
|
||||||
id: "p7", name: "Organic Brown Rice", price: "₹120/kg", variant: "Grains & Pulses", imageSrc: "http://img.b2bpic.net/free-photo/bowl-uncooked-rice_23-2147690460.jpg", imageAlt: "Bowl of organic brown rice"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "p8", name: "Fresh Chicken Breast", price: "₹280/kg", variant: "Meats & Seafood", imageSrc: "http://img.b2bpic.net/free-photo/fresh-chicken-fillets-market_23-2147776475.jpg", imageAlt: "Fresh chicken breast"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "p9", name: "Homemade Cookies", price: "₹90", variant: "Snacks", imageSrc: "http://img.b2bpic.net/free-photo/delicious-brownie-cake_23-2148187802.jpg", imageAlt: "Homemade chocolate chip cookies"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "p10", name: "Dishwashing Liquid", price: "₹180", variant: "Household Essentials", imageSrc: "http://img.b2bpic.net/free-photo/dishwashing-liquid-sponge-dish-rack-kitchen-counter_23-2149174620.jpg", imageAlt: "Dishwashing liquid and sponge"
|
|
||||||
}
|
|
||||||
]}
|
]}
|
||||||
title="Our Bestsellers & New Arrivals"
|
title="Our Bestsellers & New Arrivals"
|
||||||
description="Explore popular items and exciting new additions to our shelves, carefully curated for you."
|
description="Explore popular items and exciting new additions to our shelves, carefully curated for you."
|
||||||
|
|||||||
Reference in New Issue
Block a user