@alphasquad/saleor-template-advance 0.1.0

package/src/app/product/[id]/page.tsx

@@ -0,0 +1,200 @@
+import { notFound } from "next/navigation";
+import ProductDetailClient from "./ProductDetailClient";
+import { getSaleorApiUrl } from "@/lib/saleor/getSaleorApiUrl";
+import { extractTextFromEditorJs } from "@/lib/seo/extractTextFromEditorJs";
+import { generateBreadcrumbSchema, generateProductSchema } from "@/lib/schema";
+import Image from "next/image";
+
+export const revalidate = 300;
+
+type PageProps = {
+  params: Promise<{ id: string }>;
+};
+
+function stripHtml(input: string): string {
+  return input.replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim();
+}
+
+function mapAvailability(input?: string | null): string {
+  const v = (input || "").toLowerCase();
+  if (v.includes("out")) return "OutOfStock";
+  if (v.includes("call")) return "PreOrder";
+  return "InStock";
+}
+
+type SaleorProductForSchema = {
+  id: string;
+  slug?: string | null;
+  name?: string | null;
+  description?: string | null;
+  media?: Array<{ url?: string | null } | null> | null;
+  pricing?: {
+    priceRange?: {
+      start?: { gross?: { amount?: number | null; currency?: string | null } | null } | null;
+    } | null;
+  } | null;
+  metadata?: Array<{ key?: string | null; value?: string | null } | null> | null;
+};
+
+async function fetchProductForSchema(slug: string, channel: string) {
+  const res = await fetch(getSaleorApiUrl(), {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      query: `
+        query ProductForSchema($slug: String!, $channel: String!) {
+          product(slug: $slug, channel: $channel) {
+            id
+            slug
+            name
+            description
+            media {
+              url
+            }
+            pricing {
+              priceRange {
+                start {
+                  gross {
+                    amount
+                    currency
+                  }
+                }
+              }
+            }
+            metadata {
+              key
+              value
+            }
+          }
+        }
+      `,
+      variables: { slug, channel },
+    }),
+    next: { revalidate },
+  });
+
+  if (!res.ok) return null;
+  const json = await res.json();
+  return (json?.data?.product as SaleorProductForSchema | null) ?? null;
+}
+
+export default async function ProductPage({ params }: PageProps) {
+  const { id } = await params;
+  const slug = decodeURIComponent(id);
+  const channel =
+    process.env.NEXT_PUBLIC_SALEOR_CHANNEL?.trim() || "default-channel";
+
+  const product = await fetchProductForSchema(slug, channel);
+  if (!product?.id) notFound();
+
+  const name = product?.name?.trim() || "Product";
+  const description = extractTextFromEditorJs(
+    product?.description ? stripHtml(product.description) : ""
+  );
+  const images = (product?.media || [])
+    .map((m) => m?.url)
+    .filter((u): u is string => Boolean(u));
+
+  const gross = product?.pricing?.priceRange?.start?.gross;
+  const availabilityMeta = (product?.metadata || []).find(
+    (m) => m?.key === "availability"
+  )?.value;
+
+  const heroImage = images[0] || "/no-image-avail-large.png";
+  const priceText =
+    typeof gross?.amount === "number" && gross.amount > 0
+      ? new Intl.NumberFormat(undefined, {
+          style: "currency",
+          currency: gross?.currency || "USD",
+        }).format(gross.amount)
+      : null;
+  const availability = mapAvailability(availabilityMeta);
+
+  const productSchema = generateProductSchema({
+    id: product.id,
+    slug: product.slug || slug,
+    name,
+    description,
+    image: images,
+    price: gross?.amount ?? undefined,
+    currency: gross?.currency ?? undefined,
+    availability: mapAvailability(availabilityMeta),
+    sku: product.id,
+  });
+
+  const breadcrumbSchema = generateBreadcrumbSchema([
+    { name: "Home", url: "/" },
+    { name: "Products", url: "/products/all" },
+    { name, url: `/product/${encodeURIComponent(slug)}` },
+  ]);
+
+  return (
+    <>
+      {/* Schema.org structured data (server-rendered for crawlability) */}
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(productSchema) }}
+      />
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
+      />
+
+      <div className="container mx-auto max-w-[1276px] px-4 md:px-6 py-12 md:py-16 lg:py-24">
+        <div className="text-xs font-semibold text-[var(--color-secondary-600)]">
+          Home / Products / {name}
+        </div>
+
+        <h1 className="mt-6 font-normal uppercase text-[var(--color-secondary-800)] text-xl md:text-3xl lg:text-5xl font-primary">
+          {name}
+        </h1>
+
+        {/* SSR fallback (visible with JS disabled) */}
+        <div className="ssr-only">
+          <div className="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <div className="relative w-full aspect-square bg-gray-50 overflow-hidden">
+              <Image
+                src={heroImage}
+                alt={name}
+                fill
+                sizes="(max-width: 1024px) 100vw, 50vw"
+                className="object-contain"
+                priority={false}
+              />
+            </div>
+
+            <div className="space-y-4">
+              <div className="flex items-center gap-3 text-sm text-[var(--color-secondary-600)]">
+                {availability ? <span>{availability}</span> : null}
+              </div>
+
+              {priceText ? (
+                <div className="text-2xl font-black text-black">
+                  {priceText}
+                </div>
+              ) : (
+                <div
+                  style={{ color: "var(--color-primary-700)" }}
+                  className="text-sm font-bold"
+                >
+                  Call for Availability
+                </div>
+              )}
+
+              {description ? (
+                <p className="text-sm text-[var(--color-secondary-700)] leading-relaxed max-w-prose">
+                  {description}
+                </p>
+              ) : null}
+            </div>
+          </div>
+        </div>
+
+        {/* Enhanced client experience (visible with JS enabled) */}
+        <div className="js-only">
+          <ProductDetailClient />
+        </div>
+      </div>
+    </>
+  );
+}

package/src/app/product/layout.tsx

@@ -0,0 +1,15 @@
+import type { Metadata } from "next"
+import { getStoreName } from "@/app/utils/branding"
+
+export const metadata: Metadata = {
+  title: `Products - ${getStoreName()}`,
+  description: "Explore our complete product catalog. Find parts, accessories, and performance upgrades for your needs.",
+}
+
+export default function ProductLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return children
+}