muayjtp/web_next
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

created cart page

Browse source
This commit is contained in:
Juthatip McDevitt 2024-05-23 15:00:06 -05:00
parent 8366b9e322
commit fed95e9455
2 changed files with 70 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
donutshop_ecommerce/src/app/cart/page.js Normal file
View file

@ -0,0 +1,46 @@
"use client"
import React, { useContext } from 'react'
import { CartContext } from '../../components/AppContext'
import Image from 'next/image';
const CartPage = () => {
const {cartProducts} = useContext(CartContext);
return (
<div className='pb-20 md:pb-40'>
<div className='px-5 sm:px-10 py-5 sm:py-10'>
<p className='text-center text-2xl sm:text-3xl md:text-4xl text-pink-500 uppercase font-bold drop-shadow-[0_2px_2px_rgba(105,105,105,1)]'>My cart</p>
<div className='grid grid-cols-2 mt-10'>
<div className='border-t'>
{cartProducts?.length === 0 && (
<div>Your cart is empty</div>
)}
{cartProducts?.length > 0 && cartProducts.map(product => (
<div className='flex flex-row gap-2 items-center border-b'>
<div className='w-[100px] flex items-center justify-center m-2'>
<Image src={product.menuImg} alt='' width={100} height={100} className='w-[100px]'/>
</div>
<div>
<p>{product.itemName}</p>
{product.size && (
<div>Size: <span>{product.size.itemName}</span></div>
)}
{product.extra?.length > 0 && (
<div>Toppings: {product.extra.map(extras => (
<span>{extras.itemName} <span>(+${extras.price})</span></span>
))}</div>
)}
</div>
</div>
))}
</div>
<div>right</div>
</div>
</div>
</div>
)
}
export default CartPage

33
donutshop_ecommerce/src/components/menu/Menu.js
View file

@ -7,19 +7,22 @@ const Menu = (menuItem) => {
const {menuImg, itemName, description, basePrice, sizes, extraItems} = menuItem
const {addToCart} = useContext(CartContext);
const [showPopup, setShowPopup] = useState(false);
const [selectedSize, setSelectedsize] = useState(null);
const [selectedSize, setSelectedsize] = useState(sizes?.[0] || null);
const [selectedTopping, setSelectedTopping] = useState([]);
function handleAddToCartButtonClick(){
if(sizes.length === 0 && extraItems.length === 0){
toast.success('Add to cart');
addToCart(menuItem);
} else{
const optionAdd = sizes.length > 0 || extraItems.length > 0;
if(optionAdd && !showPopup){
setShowPopup(true)
}
return;
}
addToCart(menuItem, selectedSize, selectedTopping);
setShowPopup(false)
toast.success('Added to cart');
}
//topping checked functionality
function handleSelectedTopping(ev, extraTopping){
const checked = ev.target.checked;
@ -32,13 +35,23 @@ const Menu = (menuItem) => {
}
}
//price calculation
let selectedPrice = basePrice;
if(selectedSize){
selectedPrice += selectedSize.price
}
if(selectedTopping?.length > 0){
for( const extra of selectedTopping){
selectedPrice += extra.price
}
}
return (
<>
{showPopup && (
<div className='fixed inset-0 bg-black/80 flex justify-center items-center'>
<div className='bg-white p-5 rounded-md max-w-md'>
<div onClick={() => setShowPopup(false)} className='fixed inset-0 bg-black/80 flex justify-center items-center'>
<div onClick={ev => ev.stopPropagation()} className='bg-white p-5 rounded-md max-w-md'>
<div className='overflow-y-scroll' style={{maxHeight:'calc(100vh - 250px)'}}>
<div className='py-0 sm:py-5 flex flex-col gap-2 sm:gap-4 justify-center items-center text-center px-5'>
<Image src={menuImg} width={300} height={300} alt='menu-donut' className='w-[100px] min-[550px]:w-[120px]'/>
@ -64,7 +77,9 @@ const Menu = (menuItem) => {
))}
</div>
)}
<button type='button' className='bg-pink-500 text-white p-1 sm:p-2 text-sm sm:text-base rounded-md hover:opacity-80 duration-300 mt-5'>Add to cart</button>
<button type='button' onClick={handleAddToCartButtonClick}
className='bg-pink-500 text-white p-1 sm:p-2 text-sm sm:text-base rounded-md hover:opacity-80 duration-300 mt-5'>Add to cart (${selectedPrice})
</button>
</div>
</div>
</div>