Create Glassmond storefront with Meshkee integration

Build the RTL Next.js experience with live catalog, journal, customer interactions, and SEO-ready canonical routes. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-26 00:08:00 +03:30
commit 98fde02322
66 changed files with 8280 additions and 0 deletions
@@ -0,0 +1,165 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { ArrowLeft, ArrowRight, Search } from "lucide-react";
+import { ApiProductCard } from "@/components/api-product-card";
+import { PageHero } from "@/components/sections";
+import {
+  getCategories,
+  getCategoryById,
+  getProducts,
+  productCategoryUrl,
+} from "@/lib/meshkee";
+
+type ProductsSearchParams = {
+  page?: string;
+  q?: string;
+  category?: string;
+};
+
+export async function generateMetadata({
+  searchParams,
+}: {
+  searchParams: Promise<ProductsSearchParams>;
+}): Promise<Metadata> {
+  const params = await searchParams;
+  const page = Math.max(1, Number.parseInt(params.page || "1", 10) || 1);
+  const q = (params.q || "").trim();
+  const categoryId = (params.category || "").trim();
+  const baseDescription =
+    "مشاهده محصولات آینه هوشمند، ضد بخار و آرایشی گلسموند با تصاویر، مشخصات و جزئیات کامل.";
+
+  if (q || categoryId) {
+    const category = categoryId
+      ? await getCategoryById(categoryId).then((data) => data.category).catch(() => null)
+      : null;
+    const label = q
+      ? `نتایج جست‌وجوی «${q}»`
+      : `محصولات ${category?.nameFa || category?.name || "دسته‌بندی انتخاب‌شده"}`;
+    const canonical = category && !q ? productCategoryUrl(category) : "/products";
+
+    return {
+      title: label,
+      description: `${label} در مجموعه محصولات آینه هوشمند گلسموند.`,
+      alternates: { canonical },
+      robots: { index: false, follow: true },
+    };
+  }
+
+  const canonical = page > 1 ? `/products?page=${page}` : "/products";
+  const title = page > 1 ? `محصولات آینه هوشمند – صفحه ${page}` : "محصولات آینه هوشمند";
+
+  return {
+    title,
+    description: page > 1 ? `${baseDescription} صفحه ${page}.` : baseDescription,
+    alternates: { canonical },
+    openGraph: {
+      title: "محصولات آینه هوشمند گلسموند",
+      description: "مجموعه آینه‌های هوشمند، ضد بخار و آرایشی گلسموند را مشاهده کنید.",
+      url: canonical,
+      images: ["/images/hero.jpg"],
+    },
+  };
+}
+
+function pageHref(page: number, q: string, category: string) {
+  const query = new URLSearchParams();
+  if (page > 1) query.set("page", String(page));
+  if (q) query.set("q", q);
+  if (category) query.set("category", category);
+  const value = query.toString();
+  return value ? `/products?${value}` : "/products";
+}
+
+export default async function ProductsPage({
+  searchParams,
+}: {
+  searchParams: Promise<ProductsSearchParams>;
+}) {
+  const params = await searchParams;
+  const page = Math.max(1, Number.parseInt(params.page || "1", 10) || 1);
+  const q = (params.q || "").trim();
+  const category = (params.category || "").trim();
+
+  const [products, categories] = await Promise.all([
+    getProducts({ page, pageSize: 12, name: q, categoryId: category }).catch(() => ({
+      items: [],
+      total: 0,
+      page,
+      pageSize: 12,
+    })),
+    getCategories("product").catch(() => ({ items: [] })),
+  ]);
+
+  const totalPages = Math.max(1, Math.ceil(products.total / products.pageSize));
+
+  return (
+    <>
+      <PageHero englishTitle="PRODUCTS" title="محصولات گلسموند" />
+
+      <section className="catalog-section">
+        <div className="container">
+          <form className="catalog-filters" action="/products" method="get">
+            <label>
+              <span>جست‌وجوی محصول</span>
+              <div>
+                <input
+                  type="search"
+                  name="q"
+                  defaultValue={q}
+                  placeholder="نام محصول را وارد کنید..."
+                />
+                <Search />
+              </div>
+            </label>
+            <label>
+              <span>دسته‌بندی</span>
+              <select name="category" defaultValue={category}>
+                <option value="">همه محصولات</option>
+                {categories.items.map((item) => (
+                  <option key={item.id} value={item.id}>{item.nameFa || item.name}</option>
+                ))}
+              </select>
+            </label>
+            <button className="primary-button" type="submit">اعمال فیلتر</button>
+          </form>
+
+          <div className="catalog-summary">
+            <p><strong>{products.total.toLocaleString("fa-IR")}</strong> محصول</p>
+            {(q || category) && <Link href="/products">حذف فیلترها</Link>}
+          </div>
+
+          {products.items.length > 0 ? (
+            <div className="catalog-grid">
+              {products.items.map((product) => (
+                <ApiProductCard key={product.id} product={product} />
+              ))}
+            </div>
+          ) : (
+            <div className="empty-state">
+              <h2>محصولی پیدا نشد</h2>
+              <p>عبارت جست‌وجو یا دسته‌بندی را تغییر دهید.</p>
+            </div>
+          )}
+
+          {totalPages > 1 && (
+            <nav className="pagination" aria-label="صفحه‌بندی محصولات">
+              {page > 1 && (
+                <Link href={pageHref(page - 1, q, category)}>
+                  <ArrowRight />
+                  قبلی
+                </Link>
+              )}
+              <span>صفحه {page.toLocaleString("fa-IR")} از {totalPages.toLocaleString("fa-IR")}</span>
+              {page < totalPages && (
+                <Link href={pageHref(page + 1, q, category)}>
+                  بعدی
+                  <ArrowLeft />
+                </Link>
+              )}
+            </nav>
+          )}
+        </div>
+      </section>
+    </>
+  );
+}