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>
This commit is contained in:
Alireza Hassani
@@ -0,0 +1,178 @@
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { MessageCircle, Phone, ShieldCheck } from "lucide-react";
|
||||
import { notFound, redirect } from "next/navigation";
|
||||
import { ApiProductCard } from "@/components/api-product-card";
|
||||
import { ProductTabs } from "@/components/entity-comments";
|
||||
import { ProductGallery } from "@/components/product-gallery";
|
||||
import {
|
||||
getComments,
|
||||
getProductById,
|
||||
getProducts,
|
||||
plainText,
|
||||
productImage,
|
||||
productUrl,
|
||||
sanitizeCmsContent,
|
||||
slugifyFa,
|
||||
} from "@/lib/meshkee";
|
||||
|
||||
type ProductPageProps = {
|
||||
params: Promise<{ id: string; slug: string }>;
|
||||
};
|
||||
|
||||
export async function generateStaticParams() {
|
||||
const data = await getProducts({ pageSize: 50 }).catch(() => ({ items: [] }));
|
||||
return data.items.map((product) => ({
|
||||
id: product.id,
|
||||
slug: slugifyFa(product.nameFa || product.title),
|
||||
}));
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: ProductPageProps): Promise<Metadata> {
|
||||
const { id } = await params;
|
||||
const data = await getProductById(id).catch(() => null);
|
||||
if (!data) return { title: "محصول یافت نشد", robots: { index: false } };
|
||||
|
||||
const product = data.product;
|
||||
const title = product.nameFa || product.title;
|
||||
const description =
|
||||
plainText(product.summary || product.descriptionHtml).slice(0, 155) ||
|
||||
`مشخصات و تصاویر ${title} از محصولات گلسموند.`;
|
||||
const image = productImage(product);
|
||||
const canonical = productUrl(product);
|
||||
|
||||
return {
|
||||
title,
|
||||
description,
|
||||
alternates: { canonical },
|
||||
openGraph: {
|
||||
title,
|
||||
description,
|
||||
url: canonical,
|
||||
images: image ? [image] : [],
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default async function ProductDetailPage({ params }: ProductPageProps) {
|
||||
const { id, slug } = await params;
|
||||
const data = await getProductById(id).catch(() => null);
|
||||
if (!data) notFound();
|
||||
|
||||
const { product, relatedProducts = [] } = data;
|
||||
const canonical = productUrl(product);
|
||||
const expectedSlug = canonical.split("/").at(-1) || "";
|
||||
let currentSlug = slug;
|
||||
try {
|
||||
currentSlug = decodeURIComponent(slug);
|
||||
} catch {
|
||||
currentSlug = slug;
|
||||
}
|
||||
if (currentSlug !== expectedSlug) redirect(encodeURI(canonical));
|
||||
|
||||
const title = product.nameFa || product.title;
|
||||
const mainImage = productImage(product);
|
||||
const images = Array.from(
|
||||
new Set([mainImage, ...(product.images || []).map((item) => item.url)].filter(Boolean)),
|
||||
) as string[];
|
||||
const comments = await getComments("product", product.id);
|
||||
const categoryTitle = product.categoryNameFa || product.categoryName || "آینه";
|
||||
const categoryHref = product.categoryId
|
||||
? `/products/category/${product.categoryId}/${slugifyFa(categoryTitle)}`
|
||||
: null;
|
||||
const descriptionHtml = sanitizeCmsContent(
|
||||
product.descriptionHtml || product.summary || "اطلاعات تکمیلی این محصول به‌زودی درج می‌شود.",
|
||||
title,
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="product-detail-top">
|
||||
<div className="container">
|
||||
<nav className="detail-breadcrumbs" aria-label="مسیر صفحه">
|
||||
<Link href="/">صفحه اصلی</Link>
|
||||
<span>/</span>
|
||||
<Link href="/products">محصولات</Link>
|
||||
<span>/</span>
|
||||
<b>{title}</b>
|
||||
</nav>
|
||||
|
||||
<div className="product-detail-grid">
|
||||
<ProductGallery images={images.length ? images : ["/images/hero.jpg"]} alt={title} />
|
||||
|
||||
<div className="product-detail-copy">
|
||||
<span className="english-title">PRODUCT DETAILS</span>
|
||||
<p className="product-category">{product.categoryNameFa || "آینه هوشمند"}</p>
|
||||
<h1>{title}</h1>
|
||||
{product.summary && <p className="product-summary">{product.summary}</p>}
|
||||
|
||||
<dl className="product-facts">
|
||||
<div>
|
||||
<dt>دسته‌بندی</dt>
|
||||
<dd>
|
||||
{categoryHref ? <Link href={categoryHref}>{categoryTitle}</Link> : categoryTitle}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>وضعیت سفارش</dt>
|
||||
<dd>{product.store?.inStock ? "موجود" : "تماس بگیرید"}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>خدمات</dt>
|
||||
<dd>یک سال گارانتی و ده سال پشتیبانی</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<div className="product-assurance">
|
||||
<ShieldCheck />
|
||||
<p>تولید مطابق استاندارد IP64 با برق ایمن ۱۲ ولت</p>
|
||||
</div>
|
||||
|
||||
<div className="product-detail-actions">
|
||||
<a className="primary-button" href="tel:+989301293902">
|
||||
<Phone />
|
||||
تماس برای سفارش
|
||||
</a>
|
||||
<a
|
||||
className="outline-dark-button"
|
||||
href="https://wa.me/989301293902"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<MessageCircle />
|
||||
واتساپ
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="product-information">
|
||||
<div className="container">
|
||||
<ProductTabs
|
||||
descriptionHtml={descriptionHtml}
|
||||
entityId={product.id}
|
||||
comments={comments.items}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{relatedProducts.length > 0 && (
|
||||
<section className="related-section">
|
||||
<div className="container">
|
||||
<div className="section-heading">
|
||||
<span className="english-title">RELATED PRODUCTS</span>
|
||||
<h2>محصولات مرتبط</h2>
|
||||
</div>
|
||||
<div className="catalog-grid">
|
||||
{relatedProducts.slice(0, 3).map((item) => (
|
||||
<ApiProductCard key={item.id} product={item} headingLevel={3} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
import type { Metadata } from "next";
|
||||
import { notFound, redirect } from "next/navigation";
|
||||
import { ApiProductCard } from "@/components/api-product-card";
|
||||
import { PageHero } from "@/components/sections";
|
||||
import {
|
||||
getCategories,
|
||||
getCategoryById,
|
||||
getProducts,
|
||||
productCategoryUrl,
|
||||
slugifyFa,
|
||||
} from "@/lib/meshkee";
|
||||
|
||||
type ProductCategoryPageProps = {
|
||||
params: Promise<{ id: string; slug: string }>;
|
||||
};
|
||||
|
||||
export async function generateStaticParams() {
|
||||
const data = await getCategories("product").catch(() => ({ items: [] }));
|
||||
return data.items.map((category) => ({
|
||||
id: category.id,
|
||||
slug: slugifyFa(category.nameFa || category.name),
|
||||
}));
|
||||
}
|
||||
|
||||
export async function generateMetadata({
|
||||
params,
|
||||
}: ProductCategoryPageProps): Promise<Metadata> {
|
||||
const { id } = await params;
|
||||
const data = await getCategoryById(id).catch(() => null);
|
||||
if (!data) return { title: "دسته‌بندی یافت نشد", robots: { index: false } };
|
||||
|
||||
const title = data.category.nameFa || data.category.name;
|
||||
const canonical = productCategoryUrl(data.category);
|
||||
const description =
|
||||
data.category.description ||
|
||||
`مشاهده محصولات دسته ${title} گلسموند، شامل آینه‌های هوشمند با طراحی مدرن و فناوری ضد بخار.`;
|
||||
|
||||
return {
|
||||
title: `${title} | محصولات`,
|
||||
description,
|
||||
alternates: { canonical },
|
||||
openGraph: {
|
||||
title: `${title} | محصولات گلسموند`,
|
||||
description,
|
||||
url: canonical,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default async function ProductCategoryPage({
|
||||
params,
|
||||
}: ProductCategoryPageProps) {
|
||||
const { id, slug } = await params;
|
||||
const categoryData = await getCategoryById(id).catch(() => null);
|
||||
if (!categoryData) notFound();
|
||||
|
||||
const { category } = categoryData;
|
||||
const canonical = productCategoryUrl(category);
|
||||
const expectedSlug = canonical.split("/").at(-1) || "";
|
||||
let currentSlug = slug;
|
||||
try {
|
||||
currentSlug = decodeURIComponent(slug);
|
||||
} catch {
|
||||
currentSlug = slug;
|
||||
}
|
||||
if (currentSlug !== expectedSlug) redirect(encodeURI(canonical));
|
||||
|
||||
const products = await getProducts({ categoryId: category.id, pageSize: 24 }).catch(() => ({
|
||||
items: [],
|
||||
total: 0,
|
||||
page: 1,
|
||||
pageSize: 24,
|
||||
}));
|
||||
const title = category.nameFa || category.name;
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHero englishTitle="PRODUCT CATEGORY" title={title} />
|
||||
|
||||
<section className="catalog-section category-catalog">
|
||||
<div className="container">
|
||||
<header className="category-intro">
|
||||
<span className="english-title">GLASSMOND COLLECTION</span>
|
||||
<h2>محصولات {title}</h2>
|
||||
<p>
|
||||
{category.description ||
|
||||
`مجموعه محصولات ${title} گلسموند با تمرکز بر کیفیت ساخت، ایمنی و طراحی ماندگار.`}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{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>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user