116 lines
3.9 KiB
JavaScript
116 lines
3.9 KiB
JavaScript
"use client";
|
|
import { products } from "@/data/products";
|
|
import React from "react";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { Pagination } from "swiper/modules";
|
|
import { useContextElement } from "@/context/Context";
|
|
export default function RelatedProducts() {
|
|
const { addProductToCart, isAddedToCartProducts } = useContextElement();
|
|
|
|
return (
|
|
<div className="section-related tf-spacing-38">
|
|
<div className="tf-container">
|
|
<div className="heading-section mb_32 d-flex justify-content-between mb_104">
|
|
<h3 className="">Related products</h3>
|
|
<Link href={`/shop`} className="tf-btn btn-primary2">
|
|
<span>See All</span>
|
|
<span className="bg-effect" />
|
|
</Link>
|
|
</div>
|
|
<Swiper
|
|
className="swiper sw-layout"
|
|
breakpoints={{
|
|
0: { slidesPerView: 2 },
|
|
575: {
|
|
slidesPerView: 2,
|
|
},
|
|
768: {
|
|
slidesPerView: 2,
|
|
spaceBetween: 20,
|
|
},
|
|
992: {
|
|
slidesPerView: 4,
|
|
spaceBetween: 24,
|
|
},
|
|
}}
|
|
spaceBetween={15}
|
|
modules={[Pagination]}
|
|
pagination={{
|
|
clickable: true,
|
|
el: ".spd13",
|
|
}}
|
|
>
|
|
{products.map((product, i) => (
|
|
<SwiperSlide key={i} className="swiper-slide">
|
|
<div className="product-item hover-image">
|
|
<Link
|
|
href={`/product-details/${product.id}`}
|
|
className="img-style"
|
|
>
|
|
<Image
|
|
className="lazyload"
|
|
alt="item"
|
|
src={product.imgSrc}
|
|
width={product.width}
|
|
height={product.height}
|
|
/>
|
|
</Link>
|
|
<div className="content">
|
|
<div className="info">
|
|
<div className="text-body-1 product-name mb_8">
|
|
<Link
|
|
href={`/product-details/${product.id}`}
|
|
className="link"
|
|
>
|
|
{product.title}
|
|
</Link>
|
|
</div>
|
|
<h6 className="price d-flex gap_10">
|
|
{product.oldPrice ? (
|
|
<>
|
|
<span className="new-price">
|
|
$
|
|
{product.price.toFixed(
|
|
product.price % 1 === 0 ? 0 : 2
|
|
)}
|
|
</span>
|
|
<span className="old-price sub-heading">
|
|
$
|
|
{product.oldPrice.toFixed(
|
|
product.oldPrice % 1 === 0 ? 0 : 2
|
|
)}
|
|
</span>
|
|
</>
|
|
) : (
|
|
`$${product.price.toFixed(
|
|
product.price % 1 === 0 ? 0 : 2
|
|
)}`
|
|
)}
|
|
</h6>
|
|
</div>
|
|
<a
|
|
href="#"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
addProductToCart(product.id);
|
|
}}
|
|
className={`add-cart ${
|
|
isAddedToCartProducts(product.id) ? "cart-added" : ""
|
|
}`}
|
|
>
|
|
<i className="icon-shopping-cart-solid" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
))}
|
|
|
|
<div className="sw-dots sw-pagination-layout d-flex justify-content-center mt_22 spd13" />
|
|
</Swiper>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|