From 3d11d8e696df5643c685354801b95417a42c205a Mon Sep 17 00:00:00 2001 From: Juthatip McDevitt Date: Wed, 22 May 2024 17:38:53 -0500 Subject: [PATCH] updated add cart for menu page --- donutshop_ecommerce/src/app/menu/page.js | 41 +------------------ .../src/components/AppContext.js | 34 ++++++++++++++- .../src/components/layout/HomeCreateBox.js | 5 ++- .../src/components/layout/HomeMenu.js | 3 +- .../src/components/menu/Menu.js | 33 ++++++++++++--- .../src/components/menu/MenuItem.js | 36 ++++++++++++---- 6 files changed, 94 insertions(+), 58 deletions(-) diff --git a/donutshop_ecommerce/src/app/menu/page.js b/donutshop_ecommerce/src/app/menu/page.js index 9f1e4e4..cd546c6 100644 --- a/donutshop_ecommerce/src/app/menu/page.js +++ b/donutshop_ecommerce/src/app/menu/page.js @@ -1,9 +1,6 @@ "use client" import React, { useEffect, useState } from 'react' import Menu from '../../components/menu/Menu'; -import Slider from "react-slick"; -import "slick-carousel/slick/slick.css"; -import "slick-carousel/slick/slick-theme.css"; const MenuPage = () => { const [categories, setCategories] = useState([]); @@ -19,48 +16,14 @@ const MenuPage = () => { }, []); - //slider - var menuSlide = { - dots: false, - infinite: false, - speed: 500, - slidesToShow: 2, - responsive: [ - { - breakpoint: 640, - settings: { - slidesToShow: 2, - slidesToScroll: 2, - infinite: true, - dots: false - } - }, - { - breakpoint: 480, - settings: { - slidesToShow: 1, - slidesToScroll: 1 - } - } - ] - }; - + return (
{categories?.length > 0 && categories.map(c => (

{c.name}

-
- - {menuItems.filter(item => item.category === c._id).map(item => ( -
- -
- ))} - -
-
+
{menuItems.filter(item => item.category === c._id).map(item => ( ))} diff --git a/donutshop_ecommerce/src/components/AppContext.js b/donutshop_ecommerce/src/components/AppContext.js index 8737748..a3f8005 100644 --- a/donutshop_ecommerce/src/components/AppContext.js +++ b/donutshop_ecommerce/src/components/AppContext.js @@ -1,6 +1,6 @@ "use client" import { SessionProvider } from 'next-auth/react' -import React, { createContext, useState } from 'react' +import React, { createContext, useEffect, useState } from 'react' export const CartContext = createContext({}); @@ -8,17 +8,47 @@ export const CartContext = createContext({}); const AppProvider = ({children}) => { const [cartProducts, setCartProducts] = useState([]); + const ls = typeof window !== 'undefined' ? window.localStorage : null; + + + useEffect(() => { + if(ls && ls.getItem('cart')){ + setCartProducts( JSON.parse( ls.getItem('cart') ) ) + } + }, []); + + function clearCart(){ + setCartProducts([]); + saveCartProductsToLocalStorage([]); + } + + function removeCartProduct(indexToRemove){ + setCartProducts(prevCartProducts => { + const newCartProducts = prevCartProducts.filter((v, index) => index !== indexToRemove); + saveCartProductsToLocalStorage(newCartProducts) + + return newCartProducts; + }); + } + + function saveCartProductsToLocalStorage(cartProducts){ + if(ls){ + ls.setItem('cart', JSON.stringify(cartProducts)) + } + } + function addToCart(product, size=null){ setCartProducts(prevProducts => { const cartProduct = {...product, size} const newProducts = [...prevProducts, cartProduct]; + saveCartProductsToLocalStorage(newProducts); return newProducts }) } return ( - + {children} diff --git a/donutshop_ecommerce/src/components/layout/HomeCreateBox.js b/donutshop_ecommerce/src/components/layout/HomeCreateBox.js index bc6a768..2a8e9a7 100644 --- a/donutshop_ecommerce/src/components/layout/HomeCreateBox.js +++ b/donutshop_ecommerce/src/components/layout/HomeCreateBox.js @@ -1,4 +1,5 @@ import Image from 'next/image'; +import Link from 'next/link'; import React from 'react' import { Parallax } from "react-scroll-parallax"; @@ -8,14 +9,14 @@ const HomeCreateBox = () => {
- + View Product

Mothers Day Box

Lets show our appreciation for our moms by treating them with the special Mothers Day Box from Puffy Dough!

- + View Product
diff --git a/donutshop_ecommerce/src/components/layout/HomeMenu.js b/donutshop_ecommerce/src/components/layout/HomeMenu.js index 689ef31..b1ea029 100644 --- a/donutshop_ecommerce/src/components/layout/HomeMenu.js +++ b/donutshop_ecommerce/src/components/layout/HomeMenu.js @@ -5,6 +5,7 @@ import MenuItem from '../menu/MenuItem'; import Slider from "react-slick"; import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; +import Link from 'next/link'; const HomeDrink = () => { @@ -72,7 +73,7 @@ const HomeDrink = () => {

Puffy Dought offers a wide range of flavors to choose from including classic favorites like glazed and chocolate, as well as unique flavors like Black Sesame Matcha and Passionfruit Creamcheese

- + View All
diff --git a/donutshop_ecommerce/src/components/menu/Menu.js b/donutshop_ecommerce/src/components/menu/Menu.js index 292374d..f95c56d 100644 --- a/donutshop_ecommerce/src/components/menu/Menu.js +++ b/donutshop_ecommerce/src/components/menu/Menu.js @@ -1,15 +1,38 @@ import Image from 'next/image' -import React from 'react' +import React, { useContext, useState } from 'react' +import { CartContext } from '../AppContext'; +import toast from 'react-hot-toast'; + +const Menu = (menuItem) => { + const {menuImg, itemName, description, basePrice, sizes} = menuItem + const {addToCart} = useContext(CartContext); + const [showPopup, setShowPopup] = useState(false); + + function handleAddToCartButtonClick(){ + if(sizes.length === 0 ){ + toast.success('Add to cart'); + addToCart(menuItem); + } else{ + setShowPopup(true) + } + } + -const Menu = ({menuImg, itemName, description, basePrice, sizes}) => { return ( -
- menu-donut + <> + {showPopup && ( +
+
test
+
+ )} +
+ menu-donut

{itemName}

{description}

${basePrice}

- +
+ ) } diff --git a/donutshop_ecommerce/src/components/menu/MenuItem.js b/donutshop_ecommerce/src/components/menu/MenuItem.js index 20dda23..c4d7e12 100644 --- a/donutshop_ecommerce/src/components/menu/MenuItem.js +++ b/donutshop_ecommerce/src/components/menu/MenuItem.js @@ -1,19 +1,37 @@ -import React, { useContext } from 'react' +import React, { useContext, useState } from 'react' import Image from 'next/image'; import { CartContext } from '../AppContext'; +import toast from 'react-hot-toast'; const MenuItem = (menuItem) => { const {menuImg, itemName, description, basePrice, sizes} = menuItem - const {addToCart} = useContext(CartContext) + const {addToCart} = useContext(CartContext); + const [showPopup, setShowPopup] = useState(false); + + function handleAddToCartButtonClick(){ + if(sizes.length === 0 ){ + addToCart(menuItem); + toast.success('Add to cart'); + } else{ + setShowPopup(true) + } + } return ( -
- menu-donut -

{itemName}

-

{description}

-

${basePrice}

- -
+ <> + {showPopup && ( +
+ +
+ )} +
+ menu-donut +

{itemName}

+

{description}

+

${basePrice}

+ +
+ ) }