Use Meshkee {id}/{fa-slug} detail URLs for products and blogs.

Resolve pages via by-id APIs, slugify Farsi titles for public paths, and redirect legacy slug-only URLs to the canonical form. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-22 23:52:45 +03:30
parent 24b5649abd
commit 0cb9aa57e2
14 changed files with 426 additions and 307 deletions
@@ -0,0 +1,183 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { notFound, redirect } from "next/navigation";
+import { Container } from "@/components/Container";
+import { ProductGallery } from "@/components/product/ProductGallery";
+import { ProductTabs } from "@/components/product/ProductTabs";
+import { fetchComments } from "@/lib/comments";
+import { formatPrice } from "@/lib/format";
+import {
+  brandName,
+  catalogTitle,
+  fetchCatalogProductById,
+  fetchStoreItemByProduct,
+  galleryUrls,
+  productHref,
+  productNameSlug,
+  variantTitle,
+  type CatalogProduct,
+  type StoreVariant,
+} from "@/lib/store";
+
+export const revalidate = 60;
+
+async function resolveProduct(id: string): Promise<{
+  variant: StoreVariant | null;
+  catalog: CatalogProduct | null;
+  productId?: string;
+}> {
+  const catalog = await fetchCatalogProductById(id);
+  if (catalog) {
+    const store = await fetchStoreItemByProduct(String(catalog.id));
+    const firstVariant = store.storeItem?.variants?.[0] ?? null;
+    return {
+      variant: firstVariant,
+      catalog,
+      productId: String(catalog.id),
+    };
+  }
+
+  const store = await fetchStoreItemByProduct(id);
+  const firstVariant = store.storeItem?.variants?.[0];
+  if (firstVariant) {
+    const linked = await fetchCatalogProductById(id);
+    return {
+      variant: { ...firstVariant, productId: id },
+      catalog: linked,
+      productId: id,
+    };
+  }
+
+  return { variant: null, catalog: null };
+}
+
+function stripHtml(html?: string | null) {
+  if (!html?.trim()) return undefined;
+  const text = html
+    .replace(/<[^>]+>/g, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+  return text.slice(0, 180) || undefined;
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ id: string; slug: string }>;
+}): Promise<Metadata> {
+  const { id } = await params;
+  const resolved = await resolveProduct(id);
+  const title =
+    (resolved.catalog ? catalogTitle(resolved.catalog) : null) ||
+    (resolved.variant ? variantTitle(resolved.variant) : null);
+  const description =
+    resolved.catalog?.summary?.trim() ||
+    stripHtml(resolved.catalog?.descriptionHtml) ||
+    undefined;
+  return {
+    title: title || "محصول",
+    description,
+  };
+}
+
+export default async function ProductDetailsPage({
+  params,
+}: {
+  params: Promise<{ id: string; slug: string }>;
+}) {
+  const { id, slug } = await params;
+  const { variant, catalog, productId } = await resolveProduct(id);
+  if (!variant && !catalog) notFound();
+
+  const title =
+    (catalog ? catalogTitle(catalog) : null) || (variant ? variantTitle(variant) : "محصول");
+  const canonicalSlug = productNameSlug(title);
+  if (decodeURIComponent(slug) !== canonicalSlug) {
+    redirect(productHref(productId || id, title));
+  }
+
+  const comments = productId ? await fetchComments("product", productId) : [];
+  const sibling = productId ? await fetchStoreItemByProduct(productId) : { storeItem: undefined };
+
+  const images = galleryUrls(catalog, variant?.productImage || catalog?.image || catalog?.thumbnailUrl);
+  const price = variant?.discountedPrice ?? variant?.price ?? catalog?.store?.minPrice ?? null;
+  const oldPrice = variant?.discountedPrice != null ? variant.price : null;
+  const brand = brandName(catalog);
+  const variants = sibling.storeItem?.variants ?? [];
+  const inStock =
+    variant != null
+      ? variant.stockQuantity == null || variant.stockQuantity > 0
+      : catalog?.store?.inStock !== false;
+
+  return (
+    <section className="py-10 sm:py-14">
+      <Container>
+        <p className="text-[13px] text-muted">
+          <Link href="/" className="hover:text-brand">
+            خانه
+          </Link>
+          <span className="mx-2">/</span>
+          <Link href="/products" className="hover:text-brand">
+            محصولات
+          </Link>
+          <span className="mx-2">/</span>
+          {title}
+        </p>
+
+        <div className="mt-5 grid gap-8 lg:grid-cols-[0.9fr_1.1fr]">
+          <ProductGallery images={images} alt={title} />
+          <div>
+            {brand ? <p className="text-[13px] font-medium text-brand">{brand}</p> : null}
+            {catalog?.categoryNameFa ? (
+              <p className="mt-1 text-[12px] text-muted">{catalog.categoryNameFa}</p>
+            ) : null}
+            <h1 className="mt-2 text-[22px] font-extrabold leading-9 text-ink">{title}</h1>
+            {variant?.label && variant.label !== title ? (
+              <p className="mt-2 text-[13px] text-muted">{variant.label}</p>
+            ) : null}
+
+            <div className="mt-5 flex items-end gap-3">
+              {oldPrice ? <p className="text-[13px] text-muted line-through">{formatPrice(oldPrice)} تومان</p> : null}
+              <p className="text-[22px] font-bold text-ink">
+                {price != null ? (
+                  <>
+                    {formatPrice(price)}
+                    <span className="mr-1 text-[13px] font-medium text-muted">تومان</span>
+                  </>
+                ) : (
+                  <span className="text-[16px] font-medium text-muted">برای قیمت تماس بگیرید</span>
+                )}
+              </p>
+            </div>
+            <p className={`mt-2 text-[13px] ${inStock ? "text-emerald-600" : "text-brand"}`}>
+              {inStock ? "موجود در فروشگاه" : "ناموجود"}
+            </p>
+
+            {variants.length > 1 ? (
+              <div className="mt-5 flex flex-wrap gap-2">
+                {variants.map((item) => (
+                  <Link
+                    key={item.id}
+                    href={productHref(productId || id, variantTitle(item))}
+                    className={`rounded-lg border px-3 py-1.5 text-[12px] ${item.id === variant?.id ? "border-brand bg-paper text-ink" : "border-line bg-white text-muted"}`}
+                  >
+                    {item.label || variantTitle(item)}
+                  </Link>
+                ))}
+              </div>
+            ) : null}
+
+            <Link
+              href="/contact"
+              className="mt-6 inline-flex h-12 items-center justify-center rounded-xl bg-brand px-6 text-[14px] font-bold text-white hover:bg-brand-dark"
+            >
+              استعلام و سفارش
+            </Link>
+          </div>
+        </div>
+
+        <ProductTabs descriptionHtml={catalog?.descriptionHtml || catalog?.summary} comments={comments} />
+      </Container>
+    </section>
+  );
+}