103 lines
4.6 KiB
JavaScript
103 lines
4.6 KiB
JavaScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { PageShell } from "../../components";
|
|
import { CUSTOMER_URL, getStoreItem, getStoreItems, getTenant } from "../../meshkee";
|
|
import { pageMetadata, productCanonicalPath } from "../../seo";
|
|
import StoreActions from "../../StoreActions";
|
|
|
|
export async function generateMetadata({ params }) {
|
|
const { id } = await params;
|
|
const item = await getStoreItem(id);
|
|
const description = item.description.replace(/<[^>]*>/g, "") || `خرید ${item.title} از آریا شبکه پیشرو همراه با مشاوره تخصصی و اعلام موجودی.`;
|
|
return pageMetadata({
|
|
title: item.title,
|
|
description: description.slice(0, 160),
|
|
path: productCanonicalPath(item),
|
|
image: item.image
|
|
});
|
|
}
|
|
|
|
export default async function StoreDetailPage({ params }) {
|
|
const { id } = await params;
|
|
const [{ id: businessId }, item, related] = await Promise.all([
|
|
getTenant(),
|
|
getStoreItem(id),
|
|
getStoreItems({ pageSize: 4 })
|
|
]);
|
|
const similar = related.items.filter((relatedItem) => relatedItem.id !== item.id).slice(0, 4);
|
|
const specs = Array.isArray(item.technicalValues) ? item.technicalValues : [];
|
|
|
|
return (
|
|
<PageShell>
|
|
<section className="section product-detail">
|
|
<div className="container detail-grid">
|
|
<div className="gallery">
|
|
<a className="gallery-main zoom-frame" href={item.image}>
|
|
<Image src={item.image} alt={item.title} fill sizes="(max-width: 900px) 100vw, 50vw" />
|
|
</a>
|
|
<div className="gallery-thumbs">
|
|
{item.images.slice(0, 4).map((image) => (
|
|
<a href={image} key={image}>
|
|
<Image src={image} alt="" width={92} height={92} />
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="detail-copy">
|
|
<span>{item.category}</span>
|
|
<h1>{item.title}</h1>
|
|
<p>{item.description.replace(/<[^>]*>/g, "") || "برای دریافت مشاوره تخصصی و اعلام موجودی با کارشناسان فروش تماس بگیرید."}</p>
|
|
<strong>{item.price ? `${item.price} ${item.currency}` : "تماس با فروشگاه"}</strong>
|
|
<StoreActions item={item} businessId={businessId} />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section className="section detail-tabs-section">
|
|
<div className="container detail-tabs">
|
|
<details open>
|
|
<summary>توضیحات</summary>
|
|
<div dangerouslySetInnerHTML={{ __html: item.description || "<p>توضیحات این محصول از API فروشگاه یا محتوای جایگزین نمایش داده می شود.</p>" }} />
|
|
</details>
|
|
<details>
|
|
<summary>اطلاعات فنی</summary>
|
|
{specs.length ? (
|
|
<div className="spec-table">
|
|
{specs.map((spec, index) => (
|
|
<p key={`${spec.fieldId || spec.label || index}`}>
|
|
<span>{spec.label || spec.fieldName || spec.fieldId || `ویژگی ${index + 1}`}</span>
|
|
<strong>{spec.value || spec.textValue || spec.optionLabel || spec.optionId || "-"}</strong>
|
|
</p>
|
|
))}
|
|
</div>
|
|
) : <p>اطلاعات فنی برای این محصول ثبت نشده است.</p>}
|
|
</details>
|
|
<details>
|
|
<summary>نظرات</summary>
|
|
<div className="login-comment-box">
|
|
<p>برای ثبت نظر درباره این محصول وارد حساب کاربری شوید.</p>
|
|
<a href={CUSTOMER_URL}>ورود به حساب کاربری</a>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</section>
|
|
<section className="section">
|
|
<div className="container">
|
|
<div className="section-title"><span>RELATED</span><h2>محصولات مشابه</h2></div>
|
|
<div className="product-grid store-grid">
|
|
{similar.map((relatedItem) => (
|
|
<Link className="product-card" href={`/store/${relatedItem.id}`} key={relatedItem.id}>
|
|
<div className="product-image">
|
|
<Image src={relatedItem.image} alt={relatedItem.title} fill sizes="(max-width: 800px) 50vw, 25vw" />
|
|
</div>
|
|
<span>{relatedItem.category}</span>
|
|
<h3>{relatedItem.title}</h3>
|
|
<strong>{relatedItem.price ? `${relatedItem.price} ${relatedItem.currency}` : "تماس با فروشگاه"}</strong>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</PageShell>
|
|
);
|
|
}
|