meshkee-websites/brb-store
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Polish storefront SEO, specials, and homepage UX.

Browse Source 
Publish Meshkee sitemap-config, map product-source specials without variants, restore hero autoplay, and tighten page heroes, product images, and section order.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
2026-08-22 21:48:00 +03:30
co-authored by Cursor
parent 11d0ba64ed
commit 24b5649abd
22 changed files with 735 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/api/search/route.ts
+36 -5
View File
@@ -7,12 +7,43 @@ export async function GET(request: Request) {
return Response.json({ items: [] });
}
const encoded = encodeURIComponent(query);
const base = `${meshkeeApiBase}/tenants/${encodeURIComponent(websiteDomain)}`;
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());
const storeResponse = await fetch(`${base}/store-items?name=${encoded}&pageSize=8`, {
cache: "no-store",
});
const storeData = (await storeResponse.json()) as { items?: unknown[] };
if (storeData.items?.length) {
return Response.json(storeData);
}
const catalogResponse = await fetch(`${base}/products?name=${encoded}&pageSize=8`, {
cache: "no-store",
});
const catalogData = (await catalogResponse.json()) as {
items?: Array<{
id: string;
nameFa?: string | null;
title?: string | null;
slug?: string | null;
thumbnailUrl?: string | null;
image?: string | null;
store?: { minPrice?: number | null; maxPrice?: number | null };
}>;
};
return Response.json({
items: (catalogData.items ?? []).map((item) => ({
id: item.slug || item.id,
productId: item.id,
productNameFa: item.nameFa,
productTitle: item.title,
productImage: item.thumbnailUrl || item.image,
price: item.store?.minPrice ?? item.store?.maxPrice ?? null,
})),
});
} catch {
return Response.json({ items: [] });
}
app/blog/[slug]/page.tsx
+2 -2
View File
@@ -40,7 +40,7 @@ export default async function BlogPostPage({
<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">
<p className="text-[13px] text-muted">
{formatFaDate(apiPost.publishedAt || apiPost.createdAt)}
</p>
{apiPost.abstract ? <p className="mt-6 text-[16px] leading-9 text-muted">{apiPost.abstract}</p> : null}
@@ -69,7 +69,7 @@ export default async function BlogPostPage({
<PageHero kicker="Blog" title={post.title} image={post.image} />
<section className="py-16 sm:py-24">
<Container className="max-w-3xl">
<p className="font-latin text-[12px] tracking-[0.18em] text-muted">{post.date}</p>
<p className="text-[13px] text-muted">{post.date}</p>
<div className="mt-8 space-y-5 text-[16px] leading-9 text-muted">
{post.body.map((paragraph) => (
<p key={paragraph}>{paragraph}</p>
app/blog/page.tsx
+17 -9
View File
@@ -29,22 +29,26 @@ export default async function BlogPage({
return (
<>
<PageHero kicker="Blog" title="مقالات" image="/images/slides/slide-2.jpg" />
<PageHero kicker="Blog" title="مقالات" image="/images/lifestyle/franco-debartolo-AXC2vD7y_ho-unsplash.jpg" />
<section className="py-16 sm:py-24">
<Container>
{usingApi ? (
<>
<div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
<div className="grid gap-5 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">
<Link
key={post.id}
href={blogHref(post)}
className="group block rounded-2xl border border-line bg-white p-3"
>
<div className="overflow-hidden rounded-xl">
<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">
<p className="mt-3 text-[12px] 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>
@@ -72,17 +76,21 @@ export default async function BlogPage({
) : null}
</>
) : (
<div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
<div className="grid gap-5 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">
<Link
key={post.slug}
href={`/blog/${post.slug}`}
className="group block rounded-2xl border border-line bg-white p-3"
>
<div className="overflow-hidden rounded-xl">
<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>
<p className="mt-3 text-[12px] 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>
app/layout.tsx
+2
View File
@@ -5,6 +5,7 @@ import { Footer } from "@/components/layout/Footer";
import { Header } from "@/components/layout/Header";
import { TopBar } from "@/components/layout/TopBar";
import { getNavCategories } from "@/lib/categories";
import { websiteDomain } from "@/lib/config";
import { site } from "@/lib/data";
const vazir = Vazirmatn({
@@ -22,6 +23,7 @@ const montserrat = Montserrat({
});
export const metadata: Metadata = {
metadataBase: new URL(`https://${websiteDomain}`),
title: {
default: `${site.name} | ${site.tagline}`,
template: `%s | ${site.name}`,
app/meshkee/sitemap-config.json/route.ts
+17
View File
@@ -0,0 +1,17 @@
import sitemapConfig from "@/lib/sitemap-config.generated.json";
const headers = {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, OPTIONS",
"Access-Control-Allow-Headers": "Content-Type",
"Cache-Control": "public, max-age=60",
"Content-Type": "application/json; charset=utf-8",
};
export async function OPTIONS() {
return new Response(null, { status: 204, headers });
}
export async function GET() {
return Response.json(sitemapConfig, { headers });
}
app/page.tsx
+11 -2
View File
@@ -1,3 +1,4 @@
import type { Metadata } from "next";
import { AboutPreview } from "@/components/home/AboutPreview";
import { BannerRow } from "@/components/home/BannerRow";
import { BlogCarousel } from "@/components/home/BlogCarousel";
@@ -17,6 +18,7 @@ import {
refrigeratorPartsFallback,
services,
showcaseCategories,
site,
slides,
threeBannerRow,
twoBannerRow,
@@ -28,6 +30,13 @@ import { fetchStaticImageSlots, overlaySlotImages, pickSlot } from "@/lib/static
export const revalidate = 60;
export const metadata: Metadata = {
title: {
absolute: `${site.name} | ${site.tagline}`,
},
description: site.description,
};
export default async function HomePage() {
const [slots, consumables, refrigerator, washing, blogs] = await Promise.all([
fetchStaticImageSlots("home"),
@@ -141,20 +150,20 @@ export default async function HomePage() {
subtitle="قطعات مصرفی پرفروش برای تعمیرگاه و مصرف‌کننده"
products={consumables.products.length ? consumables.products : consumablesFallback}
/>
<CategoryShowcase items={categories.items} aspectRatio={categories.aspectRatio} />
<ProductCarousel
id="refrigerator-parts"
title={refrigerator.special?.title || "قطعات یخچال"}
subtitle="قطعات یخچال و فریزر"
products={refrigerator.products.length ? refrigerator.products : refrigeratorPartsFallback}
/>
<AboutPreview image={aboutImage.items[0]} aspectRatio={aboutImage.aspectRatio} />
<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 posts={blogs.items} fallback={blogPosts} />
app/products/[id]/page.tsx
+83 -17
View File
@@ -8,45 +8,108 @@ import { fetchComments } from "@/lib/comments";
import { formatPrice } from "@/lib/format";
import {
brandName,
fetchCatalogProductBySlug,
fetchCatalogProductByTitle,
fetchStoreItemByProduct,
fetchStoreVariant,
galleryUrls,
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 variant = await fetchStoreVariant(id);
if (variant) {
const catalog = await fetchCatalogProductByTitle(
variant.productNameFa || variant.productTitle,
variant.productId,
);
return { variant, catalog, productId: variant.productId };
}
const bySlug = await fetchCatalogProductBySlug(id);
if (bySlug) {
return { variant: null, catalog: bySlug, productId: bySlug.id };
}
const byProduct = await fetchStoreItemByProduct(id);
const firstVariant = byProduct.storeItem?.variants?.[0];
if (firstVariant) {
const catalog = await fetchCatalogProductByTitle(
firstVariant.productNameFa || firstVariant.productTitle,
id,
);
return {
variant: {
...firstVariant,
productId: id,
},
catalog,
productId: id,
};
}
return { variant: null, catalog: null };
}
export async function generateMetadata({
params,
}: {
params: Promise<{ id: string }>;
}): Promise<Metadata> {
const { id } = await params;
const variant = await fetchStoreVariant(id);
const resolved = await resolveProduct(id);
const title =
resolved.catalog?.nameFa ||
resolved.catalog?.title ||
(resolved.variant ? variantTitle(resolved.variant) : null);
const description =
resolved.catalog?.summary?.trim() ||
stripHtml(resolved.catalog?.descriptionHtml) ||
undefined;
return {
title: variant ? variantTitle(variant) : "محصول",
title: title || "محصول",
description,
};
}
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 default async function ProductDetailsPage({ params }: { params: Promise<{ id: string }> }) {
const { id } = await params;
const variant = await fetchStoreVariant(id);
if (!variant) notFound();
const { variant, catalog, productId } = await resolveProduct(id);
if (!variant && !catalog) 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 comments = productId ? await fetchComments("product", productId) : [];
const sibling =
productId && variant
? await fetchStoreItemByProduct(productId)
: { storeItem: undefined };
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 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 title = catalog?.nameFa || catalog?.title || (variant ? variantTitle(variant) : "محصول");
const brand = brandName(catalog);
const variants = storeItem.storeItem?.variants ?? [];
const inStock = variant.stockQuantity == null || variant.stockQuantity > 0;
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">
@@ -67,8 +130,11 @@ export default async function ProductDetailsPage({ params }: { params: Promise<{
<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 ? (
{variant?.label && variant.label !== title ? (
<p className="mt-2 text-[13px] text-muted">{variant.label}</p>
) : null}
@@ -95,7 +161,7 @@ export default async function ProductDetailsPage({ params }: { params: Promise<{
<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"}`}
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>
app/products/page.tsx
+63 -54
View File
@@ -1,10 +1,16 @@
import type { Metadata } from "next";
import Link from "next/link";
import { Container } from "@/components/Container";
import { PageHero } from "@/components/layout/PageHero";
import { ProductCard } from "@/components/ui/ProductCard";
import { fetchStoreItems, variantToProduct } from "@/lib/store";
import { getNavCategories } from "@/lib/categories";
import { faDigits } from "@/lib/format";
import {
catalogProductToCard,
fetchCatalogProducts,
fetchStoreItems,
variantToProduct,
} from "@/lib/store";
export const revalidate = 60;
@@ -22,67 +28,70 @@ export default async function ProductsPage({
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 }),
const name = q && q.length > 2 ? q : undefined;
const [storeResult, catalogResult, nav] = await Promise.all([
fetchStoreItems({ page, pageSize: 20, categoryId, name }),
fetchCatalogProducts({ page, pageSize: 20, categoryId, name }),
getNavCategories(),
]);
const products = result.items.map(variantToProduct);
const pageCount = Math.max(1, Math.ceil((result.total || products.length) / (result.pageSize || 20)));
const fromStore = storeResult.items.map(variantToProduct);
const products = fromStore.length ? fromStore : catalogResult.items.map(catalogProductToCard);
const total = fromStore.length ? storeResult.total : catalogResult.total;
const pageSize = fromStore.length ? storeResult.pageSize : catalogResult.pageSize;
const pageCount = Math.max(1, Math.ceil((total || products.length) / (pageSize || 20)));
const categoryTitle = nav
.flatMap((item) => [item, ...item.children.map((child) => ({ ...child, children: [] as never[] }))])
.find((item) => item.id === categoryId)?.title;
const heroTitle = categoryTitle || (q ? `جستجو: ${q}` : "محصولات");
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>
<>
<PageHero
kicker="Products"
title={heroTitle}
image="/images/lifestyle/franco-debartolo-AXC2vD7y_ho-unsplash.jpg"
/>
<section className="py-10 sm:py-14">
<Container>
{total ? <p className="mb-6 text-[13px] text-muted">{faDigits(total)} کالا</p> : null}
{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>
)}
{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>
{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>
</>
);
}