251 lines
12 KiB
JavaScript
251 lines
12 KiB
JavaScript
"use client";
|
|
|
|
import { useContextElement } from "@/context/Context";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
|
|
export default function ShopCart() {
|
|
const { cartProducts, setCartProducts, totalPrice } = useContextElement();
|
|
const setQuantity = (id, quantity) => {
|
|
if (quantity >= 1) {
|
|
const item = cartProducts.filter((elm) => elm.id == id)[0];
|
|
const items = [...cartProducts];
|
|
const itemIndex = items.indexOf(item);
|
|
item.quantity = quantity;
|
|
items[itemIndex] = item;
|
|
setCartProducts(items);
|
|
}
|
|
};
|
|
const removeItem = (id) => {
|
|
setCartProducts((pre) => [...pre.filter((elm) => elm.id != id)]);
|
|
};
|
|
return (
|
|
<section className="wrapper !bg-[#ffffff]">
|
|
<div className="container pt-14 xl:pt-[4.5rem] lg:pt-[4.5rem] md:pt-[4.5rem] pb-[4.5rem] xl:pb-24 lg:pb-24 md:pb-24">
|
|
<div className="flex flex-wrap mx-[-15px] md:mx-[-20px] xl:mx-[-35px] !mt-[-70px]">
|
|
<div className="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[70px] max-w-full">
|
|
{cartProducts.length ? (
|
|
<div className="table-responsive">
|
|
<table className="table !text-center shopping-cart">
|
|
<thead>
|
|
<tr>
|
|
<th className="!pl-0 !w-[22.5rem]">
|
|
<div className="h4 !mb-0 text-left">Product</div>
|
|
</th>
|
|
<th>
|
|
<div className="h4 !mb-0">Price</div>
|
|
</th>
|
|
<th>
|
|
<div className="h4 !mb-0">Quantity</div>
|
|
</th>
|
|
<th>
|
|
<div className="h4 !mb-0">Total</div>
|
|
</th>
|
|
<th />
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{cartProducts.map((product, i) => (
|
|
<tr key={i}>
|
|
<td className="option text-left flex flex-row items-center !pl-0">
|
|
<figure className="!rounded-[.4rem] !w-[7rem]">
|
|
<Link href={`/shop-product/${product.id}`}>
|
|
<Image
|
|
className="!rounded-[.4rem]"
|
|
srcSet={`${product.image2x} 2x`}
|
|
alt={product.title}
|
|
src={product.image}
|
|
width={90}
|
|
height={100}
|
|
/>
|
|
</Link>
|
|
</figure>
|
|
<div className="w-full !ml-4">
|
|
<h3 className="post-title h6 !leading-[1.35] !mb-1">
|
|
<Link
|
|
href={`/shop-product/${product.id}`}
|
|
className="!text-[#343f52] hover:!text-[#1fc76f]"
|
|
>
|
|
{product.title}
|
|
</Link>
|
|
</h3>
|
|
<div className="small">Color: Black</div>
|
|
<div className="small">Size: 43</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<p className="price !m-0">
|
|
{product.originalPrice ? (
|
|
<>
|
|
<del className="!text-[#9499a3]">
|
|
<span className="amount">
|
|
${product.originalPrice.toFixed(2)}
|
|
</span>
|
|
</del>{" "}
|
|
<ins className="no-underline !text-[#e2626b]">
|
|
<span className="amount">
|
|
${product.price.toFixed(2)}
|
|
</span>
|
|
</ins>
|
|
</>
|
|
) : (
|
|
<span className="amount">
|
|
${product.price.toFixed(2)}
|
|
</span>
|
|
)}
|
|
</p>
|
|
</td>
|
|
<td>
|
|
<div className="form-select-wrapper">
|
|
<select
|
|
value={product.quantity}
|
|
onChange={(e) => {
|
|
setQuantity(product.id, e.target.value);
|
|
}}
|
|
className="form-select !w-auto !min-w-[2.5rem] !p-[.2rem_.5rem] !bg-[right_0.4rem_center] !mx-auto"
|
|
>
|
|
<option value={1}>1</option>
|
|
<option value={2}>2</option>
|
|
<option value={3}>3</option>
|
|
<option value={4}>4</option>
|
|
<option value={5}>5</option>
|
|
</select>
|
|
</div>
|
|
{/*/.form-select-wrapper */}
|
|
</td>
|
|
<td>
|
|
<p className="price !m-0">
|
|
<span className="amount">
|
|
${(product.price * product.quantity).toFixed(2)}
|
|
</span>
|
|
</p>
|
|
</td>
|
|
<td className="!pr-0">
|
|
<a
|
|
onClick={() => removeItem(product.id)}
|
|
className="!text-[#343f52] hover:!text-[#1fc76f]"
|
|
>
|
|
<i className="uil uil-trash-alt before:content-['\ed4b']" />
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="mb-2.5">Cart is empty</div>
|
|
|
|
<Link
|
|
href={`/shop`}
|
|
className="btn btn-primary !text-white !bg-[#1fc76f] border-[#1fc76f] hover:text-white hover:bg-[#1fc76f] hover:!border-[#1fc76f] active:text-white active:bg-[#1fc76f] active:border-[#1fc76f] disabled:text-white disabled:bg-[#1fc76f] disabled:border-[#1fc76f] rounded hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"
|
|
>
|
|
Explore Products
|
|
</Link>
|
|
</>
|
|
)}
|
|
{/* /.table-responsive */}
|
|
<div className="flex flex-wrap mx-[-15px] !mt-0">
|
|
<div className="md:w-8/12 lg:w-7/12 xl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[20px]">
|
|
<div className="form-floating relative input-group">
|
|
<input
|
|
type="url"
|
|
className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
|
|
placeholder=""
|
|
id="seo-check"
|
|
/>
|
|
<label
|
|
htmlFor="seo-check"
|
|
className="inline-block !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope"
|
|
>
|
|
Enter promo code
|
|
</label>
|
|
<button
|
|
className="btn btn-primary !text-white !bg-[#1fc76f] border-[#1fc76f] hover:text-white hover:bg-[#1fc76f] hover:!border-[#1fc76f] active:text-white active:bg-[#1fc76f] active:border-[#1fc76f] disabled:text-white disabled:bg-[#1fc76f] disabled:border-[#1fc76f] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"
|
|
type="button"
|
|
>
|
|
Apply
|
|
</button>
|
|
</div>
|
|
{/* /.input-group */}
|
|
</div>
|
|
{/* /column */}
|
|
<div className="md:w-4/12 lg:w-5/12 xl:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !ml-auto lg:!ml-0 xl:!ml-0 xl:!text-right lg:!text-right md:!text-right !mt-[20px]">
|
|
<a
|
|
href="#"
|
|
className="btn btn-primary !text-white !bg-[#1fc76f] border-[#1fc76f] hover:text-white hover:bg-[#1fc76f] hover:!border-[#1fc76f] active:text-white active:bg-[#1fc76f] active:border-[#1fc76f] disabled:text-white disabled:bg-[#1fc76f] disabled:border-[#1fc76f] rounded hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"
|
|
>
|
|
Update Cart
|
|
</a>
|
|
</div>
|
|
{/* /column */}
|
|
</div>
|
|
{/* /.row */}
|
|
</div>
|
|
{/* /column */}
|
|
<div className="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[70px] max-w-full">
|
|
<h3 className="!mb-4">Order Summary</h3>
|
|
<div className="table-responsive">
|
|
<table className="table table-order">
|
|
<tbody>
|
|
<tr>
|
|
<td className="!pl-0">
|
|
<strong className="!text-[#343f52]">Subtotal</strong>
|
|
</td>
|
|
<td className="!pr-0 text-right">
|
|
<p className="price !m-0">${totalPrice.toFixed(2)}</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="!pl-0">
|
|
<strong className="!text-[#343f52]">Discount (5%)</strong>
|
|
</td>
|
|
<td className="!pr-0 text-right">
|
|
<p className="price !text-[#e2626b] !m-0">
|
|
-${totalPrice ? (totalPrice / 100) * 5 : 0}
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="!pl-0">
|
|
<strong className="!text-[#343f52]">Shipping</strong>
|
|
</td>
|
|
<td className="!pr-0 text-right">
|
|
<p className="price !m-0">${totalPrice ? 10 : 0}</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="!pl-0">
|
|
<strong className="!text-[#343f52]">Grand Total</strong>
|
|
</td>
|
|
<td className="!pr-0 text-right">
|
|
<p className="price !text-[#343f52] font-bold !m-0">
|
|
$
|
|
{totalPrice
|
|
? (totalPrice - (totalPrice / 100) * 5 + 10).toFixed(
|
|
2
|
|
)
|
|
: 0}
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<a
|
|
href="#"
|
|
className="btn btn-primary !text-white !bg-[#1fc76f] border-[#1fc76f] hover:text-white hover:bg-[#1fc76f] hover:!border-[#1fc76f] active:text-white active:bg-[#1fc76f] active:border-[#1fc76f] disabled:text-white disabled:bg-[#1fc76f] disabled:border-[#1fc76f] rounded w-full !mt-4 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"
|
|
>
|
|
Proceed to Checkout
|
|
</a>
|
|
</div>
|
|
{/* /column */}
|
|
</div>
|
|
{/* /.row */}
|
|
</div>
|
|
{/* /.container */}
|
|
</section>
|
|
);
|
|
}
|