add cart API's (add , delete , get)
This commit is contained in:
haniyeroozmand
@@ -3,6 +3,7 @@ import { notFound } from 'next/navigation';
|
||||
import Image from "next/image";
|
||||
import ProductCartAction from '@/components/cartaction';
|
||||
import { getProductBySlug } from "@/public/src/services/products/api";
|
||||
import Link from 'next/link';
|
||||
|
||||
interface PageProps {
|
||||
params: Promise<{ slug: string }>;
|
||||
@@ -10,7 +11,7 @@ interface PageProps {
|
||||
|
||||
export default async function SingleProductPage({ params }: PageProps) {
|
||||
|
||||
const resolvedParams = await params;
|
||||
const resolvedParams = await params;
|
||||
const slug = resolvedParams.slug;
|
||||
|
||||
console.log("👉 Extracted slug from URL:", slug);
|
||||
@@ -47,18 +48,18 @@ export default async function SingleProductPage({ params }: PageProps) {
|
||||
|
||||
return (
|
||||
<div className="bg-[#f8f9fc] min-h-screen py-8" dir="rtl">
|
||||
<div className="mx-auto px-4 lg:px-8 container max-w-6xl">
|
||||
<div className="mx-auto px-4 container max-w-6xl">
|
||||
<ScrollToTop />
|
||||
|
||||
{/* مسیر راهنما */}
|
||||
<div className="text-sm text-gray-500 mb-6 flex items-center gap-2">
|
||||
<span>خانه</span> > <span>محصولات</span> > <span className="text-gray-800 font-semibold">{product.title}</span>
|
||||
<Link href={'/'}>خانه</Link> > <Link href={'/products'}>محصولات</Link> > <span className="text-gray-800 font-semibold">{product.title}</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-8">
|
||||
|
||||
|
||||
{/* بخش 1: معرفی محصول */}
|
||||
<div className="lg:col-span-8 order-1 lg:order-none">
|
||||
<div className="lg:col-span-8 col-span-2 order-1 lg:order-none">
|
||||
<div className="bg-white rounded-3xl shadow-sm p-6 md:p-8 flex flex-col md:flex-row gap-8 items-center border border-gray-100">
|
||||
{/* باکس تصویر */}
|
||||
<div className="w-full md:w-[52%] h-72 rounded-2xl bg-[linear-gradient(135deg,#f8f9fc_0%,#e2e8f0_100%)] flex items-center justify-center p-6 relative">
|
||||
@@ -80,7 +81,7 @@ export default async function SingleProductPage({ params }: PageProps) {
|
||||
<div className="inline-block px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm font-bold mb-4 tracking-wider">
|
||||
{product.brand}
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold text-gray-800 mb-6 leading-relaxed">
|
||||
<h1 className="text-2xl font-bold text-gray-800 mb-6 leading-relaxed">
|
||||
{product.title}
|
||||
</h1>
|
||||
|
||||
@@ -89,20 +90,20 @@ export default async function SingleProductPage({ params }: PageProps) {
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{/* رندر داینامیک ۳ ویژگی اول از API */}
|
||||
{product.attributes?.slice(0, 3).map((attr: any) => (
|
||||
<div key={attr.id} className="bg-gray-50 p-4 rounded-2xl flex flex-col items-center justify-center text-center border border-gray-100">
|
||||
<span className="text-gray-500 text-sm mb-2">{attr.name}</span>
|
||||
<span className="font-bold text-gray-800 text-sm" dir="ltr">{attr.valueText || '-'}</span>
|
||||
</div>
|
||||
))}
|
||||
{/* رندر داینامیک ۳ ویژگی اول از API */}
|
||||
{product.attributes?.slice(0, 2).map((attr: any) => (
|
||||
<div key={attr.id} className="bg-gray-50 p-4 rounded-2xl flex flex-col items-center justify-center text-center border border-gray-100">
|
||||
<span className="text-gray-500 text-sm mb-2">{attr.name}</span>
|
||||
<span className="font-bold text-gray-800 text-xs" dir="ltr">{attr.valueText || '-'}</span>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* آیتم چهارم: دستهبندی (برای حفظ ظاهر گرید ۴ تایی) */}
|
||||
<div className="bg-gray-50 p-4 rounded-2xl flex flex-col items-center justify-center text-center border border-gray-100">
|
||||
<span className="text-gray-500 text-sm mb-2">دستهبندی</span>
|
||||
<span className="font-bold text-gray-800 text-sm" dir="ltr">{product.primaryCategory?.name || '-'}</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* آیتم چهارم: دستهبندی (برای حفظ ظاهر گرید ۴ تایی) */}
|
||||
{/* <div className="bg-gray-50 p-4 rounded-2xl flex flex-col items-center justify-center text-center border border-gray-100">
|
||||
<span className="text-gray-500 text-sm mb-2">دستهبندی</span>
|
||||
<span className="font-bold text-gray-800 text-xs" dir="ltr">{product.primaryCategory?.name || '-'}</span>
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -110,7 +111,7 @@ export default async function SingleProductPage({ params }: PageProps) {
|
||||
|
||||
{/* بخش 2: سایدبار و دکمه خرید */}
|
||||
<div className="lg:col-span-4 col-span-2 lg:row-span-2 order-2 lg:order-none relative h-full">
|
||||
<div className="flex flex-col gap-4 lg:sticky lg:top-[20px] pb-8">
|
||||
<div className="flex flex-col gap-4 lg:sticky lg:top-[20px]">
|
||||
|
||||
<div className="bg-white rounded-[2rem] shadow-[0_4px_20px_-10px_rgba(0,0,0,0.05)] p-5 border border-gray-100 text-center">
|
||||
{hasStock ? (
|
||||
@@ -180,7 +181,7 @@ export default async function SingleProductPage({ params }: PageProps) {
|
||||
</div>
|
||||
|
||||
{/* بخش 3: مشخصات ابعادی */}
|
||||
<div className="lg:col-span-8 order-3 lg:order-none">
|
||||
<div className="lg:col-span-8 col-span-2 order-3 lg:order-none">
|
||||
<div className="bg-white rounded-3xl shadow-sm p-6 md:p-8 border border-gray-100">
|
||||
<div className="flex justify-between items-center mb-8 border-b border-gray-100 pb-4">
|
||||
<h2 className="text-xl font-bold text-gray-800">مشخصات ابعادی دقیق</h2>
|
||||
@@ -206,29 +207,16 @@ export default async function SingleProductPage({ params }: PageProps) {
|
||||
<div className="w-full md:w-1/2">
|
||||
<table className="w-full text-right text-sm">
|
||||
<tbody>
|
||||
<tr className="border-b border-gray-50">
|
||||
<td className="py-3 text-gray-500">قطر داخلی ($d$)</td>
|
||||
<td className="py-3 font-bold text-gray-800 text-left" dir="ltr">{getAttribute('قطر داخلی')}</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-50">
|
||||
<td className="py-3 text-gray-500">قطر خارجی ($D$)</td>
|
||||
<td className="py-3 font-bold text-gray-800 text-left" dir="ltr">{getAttribute('قطر خارجی')}</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-50">
|
||||
<td className="py-3 text-gray-500">پهنا ($B$)</td>
|
||||
<td className="py-3 font-bold text-gray-800 text-left" dir="ltr">{getAttribute('پهنا')}</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-50">
|
||||
<td className="py-3 text-gray-500">وزن خالص</td>
|
||||
<td className="py-3 font-bold text-gray-800 text-left" dir="ltr">{getAttribute('وزن')}</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-50">
|
||||
<td className="py-3 text-gray-500">جنس قفسه</td>
|
||||
<td className="py-3 font-bold text-gray-800 text-left" dir="ltr">{getAttribute('جنس قفسه')}</td>
|
||||
</tr>
|
||||
{product.attributes?.map((attr: any) => (
|
||||
<tr key={attr.id}>
|
||||
<td className="py-3 text-[0.9em] text-gray-500">{attr.name}:</td>
|
||||
<td className="py-3 font-bold text-[0.9em] text-gray-800 text-left" dir="ltr">{attr.valueText || '-'}</td>
|
||||
</tr>
|
||||
))}
|
||||
|
||||
<tr>
|
||||
<td className="py-3 text-gray-500">کد بینالمللی</td>
|
||||
<td className="py-3 font-bold text-gray-800 text-left" dir="ltr">{product.technicalCode}</td>
|
||||
<td className="py-3 text-[0.9em] text-gray-500">کد بینالمللی:</td>
|
||||
<td className="py-3 font-bold text-[0.9em] text-gray-800 text-left" dir="ltr">{product.technicalCode}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
Reference in New Issue
Block a user