CHIEFSOFT\ameye
108 lines
2.9 KiB
React
108 lines
2.9 KiB
React
|
|
'use client'
|
|
|
|
|
|
import React from "react";
|
|
import Image from "next/image";
|
|
import { useContextElement } from "@/context/Context";
|
|
import Link from "next/link";
|
|
const CartProduct = () => {
|
|
|
|
const {cartProducts,
|
|
setCartProducts} = useContextElement()
|
|
const handleIncrease = (index) => {
|
|
const item = cartProducts[index];
|
|
|
|
item.quantity += 1;
|
|
const updated = [...cartProducts];
|
|
updated[index] = item;
|
|
|
|
setCartProducts(updated);
|
|
};
|
|
const handleDecrease = (index) => {
|
|
const item = cartProducts[index];
|
|
|
|
if (item.quantity > 1) {
|
|
item.quantity -= 1;
|
|
const updated = [...cartProducts];
|
|
updated[index] = item;
|
|
|
|
setCartProducts(updated);
|
|
}
|
|
};
|
|
|
|
const handleRemoveCart = (index) => {
|
|
const item = cartProducts[index];
|
|
|
|
setCartProducts((pre) => [...pre.filter((elm) => elm !== item)]);
|
|
};
|
|
return (
|
|
<>
|
|
|
|
{cartProducts.map((elm,i)=>
|
|
<tr key={i} >
|
|
<td className="product-thumbnails">
|
|
<a href="#" className="product-img">
|
|
<Image width={465} height={609} style={{width:'100%',height:'fit-content'}} src={`/images/shop/${elm.img}.png`} alt="image" />
|
|
</a>
|
|
</td>
|
|
<td className="product-info">
|
|
<Link href={`/products/${elm.id}`} className="product-name">
|
|
{elm.title}
|
|
</Link>
|
|
<div className="serial">#859632007881</div>
|
|
<ul className="style-none">
|
|
<li className="size">Size: 23”</li>
|
|
<li className="color">Color: Red</li>
|
|
</ul>
|
|
</td>
|
|
<td className="price">
|
|
<span>${elm.price.toFixed(2)}</span>
|
|
</td>
|
|
<td className="quantity">
|
|
<ul className="order-box style-none">
|
|
<li>
|
|
<div onClick={()=>handleDecrease(i)} className="btn value-decrease">-</div>
|
|
</li>
|
|
<li>
|
|
<input
|
|
type="number"
|
|
min="1"
|
|
max="22"
|
|
|
|
value={elm.quantity}
|
|
disabled
|
|
className="product-value val"
|
|
/>
|
|
</li>
|
|
<li>
|
|
<div onClick={()=>handleIncrease(i)} className="btn value-increase">+ </div>
|
|
</li>
|
|
</ul>
|
|
</td>
|
|
<td className="price total-price">
|
|
<span>${(elm.price * elm.quantity).toFixed(2)}</span>
|
|
</td>
|
|
<td>
|
|
<a href="#" onClick={()=>handleRemoveCart(i)} className="remove-product">
|
|
x
|
|
</a>
|
|
</td>
|
|
</tr>)}
|
|
|
|
|
|
{cartProducts.length ? <>
|
|
</> : <button className="theme-btn-seven update-cart-button hoverPurple" style={{margin:'20px auto'}} >
|
|
<Link style={{color:'inherit',margin:'0px',padding:'0px'}} href={'/e-commerce'}>
|
|
Continue Shoping</Link>
|
|
</button> }
|
|
|
|
|
|
|
|
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default CartProduct;
|