Wire Meshkee catalog: products, blog, mega menu, and product search.

Catalog-only (no cart); search targets store items and products pages. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-21 16:04:31 +03:30
parent cfa21cbee9
commit 8e14748b48
29 changed files with 1460 additions and 244 deletions
@@ -0,0 +1,19 @@
+import { meshkeeApiBase, websiteDomain } from "@/lib/config";
+
+export async function GET(request: Request) {
+  const url = new URL(request.url);
+  const query = url.searchParams.get("q")?.trim() ?? "";
+  if (query.length <= 2) {
+    return Response.json({ items: [] });
+  }
+
+  try {
+    const response = await fetch(
+      `${meshkeeApiBase}/tenants/${encodeURIComponent(websiteDomain)}/store-items?name=${encodeURIComponent(query)}&pageSize=8`,
+      { cache: "no-store" },
+    );
+    return Response.json(await response.json());
+  } catch {
+    return Response.json({ items: [] });
+  }
+}
@@ -3,11 +3,14 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { Container } from "@/components/Container";
 import { PageHero } from "@/components/layout/PageHero";
-import { blogPosts, getBlogPost } from "@/lib/data";
+import { ProductTabs } from "@/components/product/ProductTabs";
+import { Placeholder } from "@/components/Placeholder";
+import { blogImage, fetchBlog } from "@/lib/blog";
+import { fetchComments } from "@/lib/comments";
+import { getBlogPost } from "@/lib/data";
+import { formatFaDate } from "@/lib/format";

-export function generateStaticParams() {
-  return blogPosts.map((post) => ({ slug: post.slug }));
-}
+export const revalidate = 60;

 export async function generateMetadata({
  params,
@@ -15,9 +18,11 @@ export async function generateMetadata({
  params: Promise<{ slug: string }>;
 }): Promise<Metadata> {
  const { slug } = await params;
-  const post = getBlogPost(slug);
-  if (!post) return { title: "مقاله" };
-  return { title: post.title, description: post.excerpt };
+  const apiPost = await fetchBlog(slug);
+  if (apiPost) return { title: apiPost.title, description: apiPost.abstract ?? undefined };
+  const local = getBlogPost(slug);
+  if (!local) return { title: "مقاله" };
+  return { title: local.title, description: local.excerpt };
 }

 export default async function BlogPostPage({
@@ -26,6 +31,36 @@ export default async function BlogPostPage({
  params: Promise<{ slug: string }>;
 }) {
  const { slug } = await params;
+  const apiPost = await fetchBlog(slug);
+
+  if (apiPost) {
+    const comments = await fetchComments("blog", apiPost.id);
+    return (
+      <>
+        <PageHero kicker="Blog" title={apiPost.title} image={blogImage(apiPost)} />
+        <section className="py-16 sm:py-24">
+          <Container className="max-w-3xl">
+            <p className="font-latin text-[12px] tracking-[0.18em] text-muted">
+              {formatFaDate(apiPost.publishedAt || apiPost.createdAt)}
+            </p>
+            {apiPost.abstract ? <p className="mt-6 text-[16px] leading-9 text-muted">{apiPost.abstract}</p> : null}
+            {apiPost.mainTextHtml ? (
+              <div
+                className="rich-text mt-8 text-[16px] leading-9 text-muted"
+                dangerouslySetInnerHTML={{ __html: apiPost.mainTextHtml }}
+              />
+            ) : null}
+            <ProductTabs showDescription={false} comments={comments} />
+            <Link href="/blog" className="mt-10 inline-flex items-center gap-3 text-[14px] font-bold text-brand">
+              بازگشت به مقالات
+              <span className="h-px w-10 bg-brand" />
+            </Link>
+          </Container>
+        </section>
+      </>
+    );
+  }
+
  const post = getBlogPost(slug);
  if (!post) notFound();

@@ -40,6 +75,9 @@ export default async function BlogPostPage({
              <p key={paragraph}>{paragraph}</p>
            ))}
          </div>
+          <div className="mt-8 overflow-hidden rounded-2xl">
+            <Placeholder src={post.image} alt={post.title} className="aspect-[16/9] w-full object-cover" />
+          </div>
          <Link href="/blog" className="mt-10 inline-flex items-center gap-3 text-[14px] font-bold text-brand">
            بازگشت به مقالات
            <span className="h-px w-10 bg-brand" />
@@ -3,35 +3,92 @@ import Link from "next/link";
 import { Container } from "@/components/Container";
 import { PageHero } from "@/components/layout/PageHero";
 import { Placeholder } from "@/components/Placeholder";
+import { blogHref, blogImage, fetchBlogs } from "@/lib/blog";
 import { blogPosts } from "@/lib/data";
+import { faDigits, formatFaDate } from "@/lib/format";
+
+export const revalidate = 60;

 export const metadata: Metadata = {
  title: "مقالات",
  description: "نکته‌هایی از تعمیرگاه و بورس قطعات لوازم خانگی برادران برقعی.",
 };

-export default function BlogPage() {
+export default async function BlogPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ page?: string }>;
+}) {
+  const { page: pageParam } = await searchParams;
+  const page = Math.max(1, Number(pageParam) || 1);
+  const result = await fetchBlogs({ page, pageSize: 12 });
+  const usingApi = result.items.length > 0;
+  const pageCount = usingApi
+    ? Math.max(1, Math.ceil((result.total || result.items.length) / (result.pageSize || 12)))
+    : 1;
+
  return (
    <>
      <PageHero kicker="Blog" title="مقالات" image="/images/slides/slide-2.jpg" />
      <section className="py-16 sm:py-24">
        <Container>
-          <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
-            {blogPosts.map((post) => (
-              <Link key={post.slug} href={`/blog/${post.slug}`} className="group block">
-                <div className="overflow-hidden rounded-2xl">
-                  <Placeholder
-                    src={post.image}
-                    alt={post.title}
-                    className="aspect-[16/10] w-full object-cover transition-transform duration-700 group-hover:scale-105"
-                  />
+          {usingApi ? (
+            <>
+              <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+                {result.items.map((post) => (
+                  <Link key={post.id} href={blogHref(post)} className="group block">
+                    <div className="overflow-hidden rounded-2xl">
+                      <Placeholder
+                        src={blogImage(post)}
+                        alt={post.title}
+                        className="aspect-[16/10] w-full object-cover transition-transform duration-700 group-hover:scale-105"
+                      />
+                    </div>
+                    <p className="mt-4 font-latin text-[11px] tracking-[0.18em] text-muted">
+                      {formatFaDate(post.publishedAt || post.createdAt)}
+                    </p>
+                    <h2 className="mt-2 text-[18px] font-bold leading-7 group-hover:text-brand">{post.title}</h2>
+                    {post.abstract ? (
+                      <p className="mt-2 line-clamp-2 text-[14px] leading-7 text-muted">{post.abstract}</p>
+                    ) : null}
+                  </Link>
+                ))}
+              </div>
+              {pageCount > 1 ? (
+                <div className="mt-10 flex justify-center gap-2">
+                  {Array.from({ length: pageCount }, (_, index) => {
+                    const number = index + 1;
+                    return (
+                      <Link
+                        key={number}
+                        href={`/blog?page=${number}`}
+                        className={`grid size-10 place-items-center rounded-xl text-[13px] ${number === page ? "bg-brand text-white" : "border border-line bg-white text-ink"}`}
+                      >
+                        {faDigits(number)}
+                      </Link>
+                    );
+                  })}
                </div>
-                <p className="mt-4 font-latin text-[11px] tracking-[0.18em] text-muted">{post.date}</p>
-                <h2 className="mt-2 text-[18px] font-bold leading-7 group-hover:text-brand">{post.title}</h2>
-                <p className="mt-2 line-clamp-2 text-[14px] leading-7 text-muted">{post.excerpt}</p>
-              </Link>
-            ))}
-          </div>
+              ) : null}
+            </>
+          ) : (
+            <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+              {blogPosts.map((post) => (
+                <Link key={post.slug} href={`/blog/${post.slug}`} className="group block">
+                  <div className="overflow-hidden rounded-2xl">
+                    <Placeholder
+                      src={post.image}
+                      alt={post.title}
+                      className="aspect-[16/10] w-full object-cover transition-transform duration-700 group-hover:scale-105"
+                    />
+                  </div>
+                  <p className="mt-4 font-latin text-[11px] tracking-[0.18em] text-muted">{post.date}</p>
+                  <h2 className="mt-2 text-[18px] font-bold leading-7 group-hover:text-brand">{post.title}</h2>
+                  <p className="mt-2 line-clamp-2 text-[14px] leading-7 text-muted">{post.excerpt}</p>
+                </Link>
+              ))}
+            </div>
+          )}
        </Container>
      </section>
    </>
@@ -77,3 +77,33 @@ textarea,
 button {
  font-family: inherit;
 }
+
+.rich-text h1,
+.rich-text h2,
+.rich-text h3 {
+  margin-top: 1.25em;
+  margin-bottom: 0.5em;
+  font-weight: 700;
+  color: var(--ink);
+}
+
+.rich-text p {
+  margin-bottom: 0.85em;
+}
+
+.rich-text ul,
+.rich-text ol {
+  margin: 0.75em 0;
+  padding-inline-start: 1.25rem;
+}
+
+.rich-text a {
+  color: var(--brand);
+  text-decoration: underline;
+}
+
+.rich-text img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 0.75rem;
+}
@@ -4,6 +4,7 @@ import "./globals.css";
 import { Footer } from "@/components/layout/Footer";
 import { Header } from "@/components/layout/Header";
 import { TopBar } from "@/components/layout/TopBar";
+import { getNavCategories } from "@/lib/categories";
 import { site } from "@/lib/data";

 const vazir = Vazirmatn({
@@ -30,12 +31,14 @@ export const metadata: Metadata = {
  icons: { icon: "/favicon.ico" },
 };

-export default function RootLayout({ children }: { children: React.ReactNode }) {
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+  const categories = await getNavCategories();
+
  return (
    <html lang="fa" dir="rtl" className={`${vazir.variable} ${montserrat.variable}`}>
      <body className={`${vazir.className} min-h-screen antialiased`}>
        <TopBar />
-        <Header />
+        <Header categories={categories} />
        <main>{children}</main>
        <Footer />
      </body>
@@ -4,25 +4,38 @@ import { BlogCarousel } from "@/components/home/BlogCarousel";
 import { Branches } from "@/components/home/Branches";
 import { CategoryShowcase } from "@/components/home/CategoryShowcase";
 import { Hero } from "@/components/home/Hero";
+import { ProductCarousel } from "@/components/home/ProductCarousel";
 import { Services } from "@/components/home/Services";
 import { Stats } from "@/components/home/Stats";
 import { WideBanner } from "@/components/home/WideBanner";
 import {
  about,
  bannersBelowSlider,
+  blogPosts,
  branches,
+  consumablesFallback,
+  refrigeratorPartsFallback,
  services,
  showcaseCategories,
  slides,
  threeBannerRow,
  twoBannerRow,
+  washingMachinePartsFallback,
 } from "@/lib/data";
+import { fetchBlogs } from "@/lib/blog";
+import { fetchSpecialProducts } from "@/lib/store";
 import { fetchStaticImageSlots, overlaySlotImages, pickSlot } from "@/lib/static-images";

 export const revalidate = 60;

 export default async function HomePage() {
-  const slots = await fetchStaticImageSlots("home");
+  const [slots, consumables, refrigerator, washing, blogs] = await Promise.all([
+    fetchStaticImageSlots("home"),
+    fetchSpecialProducts("consumeables"),
+    fetchSpecialProducts("refrigrator-parts"),
+    fetchSpecialProducts("washing-machine-parts"),
+    fetchBlogs({ pageSize: 8 }),
+  ]);

  const slider = overlaySlotImages(
    pickSlot(slots, "slider"),
@@ -122,11 +135,29 @@ export default async function HomePage() {
    <>
      <Hero slides={slider.items} aspectRatio={slider.aspectRatio} />
      <Services items={icons.items} />
+      <ProductCarousel
+        id="consumables"
+        title={consumables.special?.title || "اقلام مصرفی"}
+        subtitle="قطعات مصرفی پرفروش برای تعمیرگاه و مصرف‌کننده"
+        products={consumables.products.length ? consumables.products : consumablesFallback}
+      />
+      <ProductCarousel
+        id="refrigerator-parts"
+        title={refrigerator.special?.title || "قطعات یخچال"}
+        subtitle="قطعات یخچال و فریزر"
+        products={refrigerator.products.length ? refrigerator.products : refrigeratorPartsFallback}
+      />
+      <ProductCarousel
+        id="washing-machine-parts"
+        title={washing.special?.title || "قطعات ماشین لباسشویی"}
+        subtitle="قطعات لباسشویی خانگی و صنعتی"
+        products={washing.products.length ? washing.products : washingMachinePartsFallback}
+      />
      <CategoryShowcase items={categories.items} aspectRatio={categories.aspectRatio} />
      <AboutPreview image={aboutImage.items[0]} aspectRatio={aboutImage.aspectRatio} />
      <BannerRow banners={fiveBanners.items.slice(0, 2)} columns={2} aspectRatio={fiveBanners.aspectRatio} />
      <BannerRow banners={fiveBanners.items.slice(2, 5)} columns={3} aspectRatio={fiveBanners.aspectRatio} />
-      <BlogCarousel />
+      <BlogCarousel posts={blogs.items} fallback={blogPosts} />
      <BannerRow banners={twoBanners.items} columns={2} aspectRatio={twoBanners.aspectRatio} />
      <Stats />
      <WideBanner image={fullRow.items[0]} aspectRatio={fullRow.aspectRatio} />
@@ -0,0 +1,119 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { notFound } 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,
+  fetchCatalogProductByTitle,
+  fetchStoreItemByProduct,
+  fetchStoreVariant,
+  galleryUrls,
+  variantTitle,
+} from "@/lib/store";
+
+export const revalidate = 60;
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}): Promise<Metadata> {
+  const { id } = await params;
+  const variant = await fetchStoreVariant(id);
+  return {
+    title: variant ? variantTitle(variant) : "محصول",
+  };
+}
+
+export default async function ProductDetailsPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const variant = await fetchStoreVariant(id);
+  if (!variant) notFound();
+
+  const [catalog, storeItem, comments] = await Promise.all([
+    fetchCatalogProductByTitle(variant.productNameFa || variant.productTitle, variant.productId),
+    variant.productId ? fetchStoreItemByProduct(variant.productId) : Promise.resolve({ storeItem: undefined }),
+    variant.productId ? fetchComments("product", variant.productId) : Promise.resolve([]),
+  ]);
+
+  const images = galleryUrls(catalog, variant.productImage);
+  const price = variant.discountedPrice ?? variant.price;
+  const oldPrice = variant.discountedPrice != null ? variant.price : null;
+  const title = catalog?.nameFa || variantTitle(variant);
+  const brand = brandName(catalog);
+  const variants = storeItem.storeItem?.variants ?? [];
+  const inStock = variant.stockQuantity == null || variant.stockQuantity > 0;
+
+  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}
+            <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={`/products/${encodeURIComponent(item.id)}`}
+                    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>
+  );
+}
@@ -0,0 +1,88 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { Container } from "@/components/Container";
+import { ProductCard } from "@/components/ui/ProductCard";
+import { fetchStoreItems, variantToProduct } from "@/lib/store";
+import { getNavCategories } from "@/lib/categories";
+import { faDigits } from "@/lib/format";
+
+export const revalidate = 60;
+
+export const metadata: Metadata = {
+  title: "محصولات",
+  description: "قطعات و لوازم خانگی فروشگاه برادران برقعی",
+};
+
+export default async function ProductsPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ page?: string; categoryId?: string; q?: string }>;
+}) {
+  const params = await searchParams;
+  const page = Math.max(1, Number(params.page) || 1);
+  const categoryId = params.categoryId;
+  const q = params.q?.trim();
+  const [result, nav] = await Promise.all([
+    fetchStoreItems({ page, pageSize: 20, categoryId, name: q && q.length > 2 ? q : undefined }),
+    getNavCategories(),
+  ]);
+  const products = result.items.map(variantToProduct);
+  const pageCount = Math.max(1, Math.ceil((result.total || products.length) / (result.pageSize || 20)));
+  const categoryTitle = nav
+    .flatMap((item) => [item, ...item.children.map((child) => ({ ...child, children: [] as never[] }))])
+    .find((item) => item.id === categoryId)?.title;
+
+  return (
+    <section className="py-10 sm:py-14">
+      <Container>
+        <div className="mb-6">
+          <p className="text-[13px] text-muted">
+            <Link href="/" className="hover:text-brand">
+              خانه
+            </Link>
+            <span className="mx-2">/</span>
+            محصولات
+          </p>
+          <h1 className="mt-2 text-[22px] font-extrabold text-ink">
+            {categoryTitle || (q ? `جستجو: ${q}` : "همه محصولات")}
+          </h1>
+          {result.total ? <p className="mt-1 text-[13px] text-muted">{faDigits(result.total)} کالا</p> : null}
+        </div>
+
+        {products.length === 0 ? (
+          <div className="rounded-2xl border border-line bg-white px-6 py-16 text-center">
+            <p className="text-[15px] font-bold text-ink">محصولی برای نمایش وجود ندارد</p>
+            <p className="mt-2 text-[13px] text-muted">به‌زودی موجودی فروشگاه از پنل Meshkee اینجا دیده می‌شود.</p>
+          </div>
+        ) : (
+          <div className="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
+            {products.map((product) => (
+              <ProductCard key={product.id} product={product} />
+            ))}
+          </div>
+        )}
+
+        {pageCount > 1 ? (
+          <div className="mt-8 flex justify-center gap-2">
+            {Array.from({ length: pageCount }, (_, index) => {
+              const number = index + 1;
+              const query = new URLSearchParams();
+              if (categoryId) query.set("categoryId", categoryId);
+              if (q) query.set("q", q);
+              query.set("page", String(number));
+              return (
+                <Link
+                  key={number}
+                  href={`/products?${query.toString()}`}
+                  className={`grid size-10 place-items-center rounded-xl text-[13px] ${number === page ? "bg-brand text-white" : "border border-line bg-white text-ink"}`}
+                >
+                  {faDigits(number)}
+                </Link>
+              );
+            })}
+          </div>
+        ) : null}
+      </Container>
+    </section>
+  );
+}