create-brainerce-store 1.62.0 → 1.63.0

package/templates/nextjs/base/src/app/category/[slug]/page.tsx

@@ -1,106 +1,106 @@
-import type { Metadata } from 'next';
-import { notFound } from 'next/navigation';
-import type { Product } from 'brainerce';
-import { getServerClient } from '@/core/lib/brainerce';
-import { buildMetaDescription } from '@/core/lib/seo';
-import { sanitizeHtml } from '@/core/lib/sanitize';
-import { decodeSlug } from '@/core/lib/utils';
-import { CategoryJsonLd } from '@/components/seo/category-json-ld';
-import { Breadcrumbs } from '@/components/seo/breadcrumbs';
-import { ProductGrid } from '@/ui/product/product-grid';
-
-type Props = {
-  params: Promise<{ slug: string; locale?: string }>;
-};
-
-/**
- * Category (collection) landing page — the highest-leverage organic-SEO
- * surface: it ranks for broad "research intent" queries ("running shoes")
- * that individual product pages never capture. Merchant-authored copy (from
- * the dashboard SEO hub) renders BELOW the grid so products stay above the
- * fold, and CollectionPage + BreadcrumbList structured data feeds rich
- * results + AI answers. Products come from getProducts, so this page is one
- * metadata read + one listing read.
- */
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
-  const { slug: rawSlug, locale } = await params;
-  const slug = decodeSlug(rawSlug);
-  try {
-    const category = await getServerClient(locale).getCategoryBySlug(slug);
-    const description =
-      category.metaDescription || buildMetaDescription(category.description) || category.name;
-    const canonicalSlug = category.slug || slug;
-    const canonicalPath = locale
-      ? `/${locale}/category/${canonicalSlug}`
-      : `/category/${canonicalSlug}`;
-    return {
-      title: category.name,
-      description,
-      alternates: { canonical: canonicalPath },
-      openGraph: {
-        title: category.name,
-        description,
-        type: 'website',
-        images: category.image ? [{ url: category.image, alt: category.name }] : [],
-      },
-      twitter: {
-        card: 'summary_large_image',
-        title: category.name,
-        description,
-        images: category.image ? [category.image] : [],
-      },
-    };
-  } catch {
-    return { title: 'Category not found' };
-  }
-}
-
-export default async function CategoryPage({ params }: Props) {
-  const { slug: rawSlug, locale } = await params;
-  const slug = decodeSlug(rawSlug);
-  const client = getServerClient(locale);
-
-  const category = await client.getCategoryBySlug(slug).catch(() => null);
-  if (!category) notFound();
-
-  // The listing endpoint owns pagination/FX/publish gating — reuse it rather
-  // than duplicating a product query here.
-  const { data: products } = await client
-    .getProducts({ categories: [category.id], limit: 48 })
-    .catch(() => ({ data: [] as Product[] }));
-
-  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
-  const url = `${baseUrl}/category/${category.slug || slug}`;
-  const localePrefix = locale ? `/${locale}` : '';
-  const breadcrumbItems = [
-    { name: 'Home', href: `${localePrefix}/` },
-    ...category.breadcrumb
-      .filter((ancestor) => ancestor.slug)
-      .map((ancestor) => ({
-        name: ancestor.name,
-        href: `${localePrefix}/category/${ancestor.slug}`,
-      })),
-    { name: category.name },
-  ];
-
-  return (
-    <>
-      <CategoryJsonLd category={category} url={url} />
-      <div className="container mx-auto px-4 py-8">
-        <Breadcrumbs items={breadcrumbItems} />
-        <header className="mb-6">
-          <h1 className="text-3xl font-bold tracking-tight">{category.name}</h1>
-        </header>
-
-        <ProductGrid products={products} />
-
-        {category.description ? (
-          <div
-            className="prose prose-neutral dark:prose-invert mt-12 max-w-none border-t pt-8"
-            dangerouslySetInnerHTML={{ __html: sanitizeHtml(category.description) }}
-          />
-        ) : null}
-      </div>
-    </>
-  );
-}
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import type { Product } from 'brainerce';
+import { getServerClient } from '@/core/lib/brainerce';
+import { buildMetaDescription } from '@/core/lib/seo';
+import { sanitizeHtml } from '@/core/lib/sanitize';
+import { decodeSlug } from '@/core/lib/utils';
+import { CategoryJsonLd } from '@/components/seo/category-json-ld';
+import { Breadcrumbs } from '@/components/seo/breadcrumbs';
+import { ProductGrid } from '@/ui/product/product-grid';
+
+type Props = {
+  params: Promise<{ slug: string; locale?: string }>;
+};
+
+/**
+ * Category (collection) landing page — the highest-leverage organic-SEO
+ * surface: it ranks for broad "research intent" queries ("running shoes")
+ * that individual product pages never capture. Merchant-authored copy (from
+ * the dashboard SEO hub) renders BELOW the grid so products stay above the
+ * fold, and CollectionPage + BreadcrumbList structured data feeds rich
+ * results + AI answers. Products come from getProducts, so this page is one
+ * metadata read + one listing read.
+ */
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { slug: rawSlug, locale } = await params;
+  const slug = decodeSlug(rawSlug);
+  try {
+    const category = await getServerClient(locale).getCategoryBySlug(slug);
+    const description =
+      category.metaDescription || buildMetaDescription(category.description) || category.name;
+    const canonicalSlug = category.slug || slug;
+    const canonicalPath = locale
+      ? `/${locale}/category/${canonicalSlug}`
+      : `/category/${canonicalSlug}`;
+    return {
+      title: category.name,
+      description,
+      alternates: { canonical: canonicalPath },
+      openGraph: {
+        title: category.name,
+        description,
+        type: 'website',
+        images: category.image ? [{ url: category.image, alt: category.name }] : [],
+      },
+      twitter: {
+        card: 'summary_large_image',
+        title: category.name,
+        description,
+        images: category.image ? [category.image] : [],
+      },
+    };
+  } catch {
+    return { title: 'Category not found' };
+  }
+}
+
+export default async function CategoryPage({ params }: Props) {
+  const { slug: rawSlug, locale } = await params;
+  const slug = decodeSlug(rawSlug);
+  const client = getServerClient(locale);
+
+  const category = await client.getCategoryBySlug(slug).catch(() => null);
+  if (!category) notFound();
+
+  // The listing endpoint owns pagination/FX/publish gating — reuse it rather
+  // than duplicating a product query here.
+  const { data: products } = await client
+    .getProducts({ categories: [category.id], limit: 48 })
+    .catch(() => ({ data: [] as Product[] }));
+
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
+  const url = `${baseUrl}/category/${category.slug || slug}`;
+  const localePrefix = locale ? `/${locale}` : '';
+  const breadcrumbItems = [
+    { name: 'Home', href: `${localePrefix}/` },
+    ...category.breadcrumb
+      .filter((ancestor) => ancestor.slug)
+      .map((ancestor) => ({
+        name: ancestor.name,
+        href: `${localePrefix}/category/${ancestor.slug}`,
+      })),
+    { name: category.name },
+  ];
+
+  return (
+    <>
+      <CategoryJsonLd category={category} url={url} />
+      <div className="container mx-auto px-4 py-8">
+        <Breadcrumbs items={breadcrumbItems} />
+        <header className="mb-6">
+          <h1 className="text-3xl font-bold tracking-tight">{category.name}</h1>
+        </header>
+
+        <ProductGrid products={products} />
+
+        {category.description ? (
+          <div
+            className="prose prose-neutral dark:prose-invert mt-12 max-w-none border-t pt-8"
+            dangerouslySetInnerHTML={{ __html: sanitizeHtml(category.description) }}
+          />
+        ) : null}
+      </div>
+    </>
+  );
+}

package/templates/nextjs/base/src/app/checkout/page.tsx

@@ -31,6 +31,7 @@ import { LoadingSpinner } from '@/ui/shared/loading-spinner';
 import { useTranslations } from '@/core/lib/translations';
 import { cn } from '@/core/lib/utils';
 import { isValidCheckoutId } from '@/core/lib/safe-redirect';
+import { trackBeginCheckout } from '@/core/lib/tracking';
 
 type CheckoutStep = 'method' | 'address' | 'shipping' | 'pickup' | 'custom-fields' | 'payment';
 
@@ -69,6 +70,17 @@ function CheckoutContent() {
   const [customFieldValues, setCustomFieldValues] = useState<Record<string, unknown>>({});
   const [customFieldsLoading, setCustomFieldsLoading] = useState(false);
 
+  // `begin_checkout` — fired once the cart is loaded, guarded by a ref so a
+  // re-render (or the shopper returning from a canceled payment) doesn't
+  // report a second checkout start for the same cart.
+  const beganCheckoutForCartRef = useRef<string | null>(null);
+  useEffect(() => {
+    if (!cart?.id || !cart.items?.length) return;
+    if (beganCheckoutForCartRef.current === cart.id) return;
+    beganCheckoutForCartRef.current = cart.id;
+    trackBeginCheckout(cart, currency);
+  }, [cart, currency]);
+
   // Check for returning from canceled payment
   const canceled = searchParams.get('canceled') === 'true';
   const checkoutIdParam = searchParams.get('checkout_id');

package/templates/nextjs/base/src/app/globals.css

@@ -1,36 +1,36 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96%;
-    --muted-foreground: 0 0% 45%;
-    --accent: 0 0% 96%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84% 60%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 90%;
-    --input: 0 0% 90%;
-    --ring: 0 0% 9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 9%;
-    --radius: 0.5rem;
-  }
-
-  * {
-    @apply border-border;
-  }
-
-  body {
-    @apply bg-background text-foreground antialiased;
-  }
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96%;
+    --muted-foreground: 0 0% 45%;
+    --accent: 0 0% 96%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 90%;
+    --input: 0 0% 90%;
+    --ring: 0 0% 9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 9%;
+    --radius: 0.5rem;
+  }
+
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground antialiased;
+  }
+}

package/templates/nextjs/base/src/app/indexnow-key.txt/route.ts

@@ -1,26 +1,26 @@
-/**
- * IndexNow key file — GET /indexnow-key.txt
- *
- * Brainerce's SEO Autopilot pings IndexNow (instant search-engine indexing)
- * whenever a blog post publishes. The ping includes
- * `keyLocation: https://<your-domain>/indexnow-key.txt`, and search engines
- * verify ownership by fetching this file and matching the key.
- *
- * The key comes from `getStoreInfo().seo.indexNowKey` — it is NOT a secret
- * (the file is public by protocol design). Returns 404 until the platform
- * generates a key for this sales channel, which is harmless.
- */
-import { getServerClient } from '@/core/lib/brainerce';
-
-export const revalidate = 3600;
-
-export async function GET() {
-  const info = await getServerClient()
-    .getStoreInfo()
-    .catch(() => null);
-  const key = info?.seo?.indexNowKey;
-  if (!key) return new Response(null, { status: 404 });
-  return new Response(key, {
-    headers: { 'Content-Type': 'text/plain; charset=utf-8' },
-  });
-}
+/**
+ * IndexNow key file — GET /indexnow-key.txt
+ *
+ * Brainerce's SEO Autopilot pings IndexNow (instant search-engine indexing)
+ * whenever a blog post publishes. The ping includes
+ * `keyLocation: https://<your-domain>/indexnow-key.txt`, and search engines
+ * verify ownership by fetching this file and matching the key.
+ *
+ * The key comes from `getStoreInfo().seo.indexNowKey` — it is NOT a secret
+ * (the file is public by protocol design). Returns 404 until the platform
+ * generates a key for this sales channel, which is harmless.
+ */
+import { getServerClient } from '@/core/lib/brainerce';
+
+export const revalidate = 3600;
+
+export async function GET() {
+  const info = await getServerClient()
+    .getStoreInfo()
+    .catch(() => null);
+  const key = info?.seo?.indexNowKey;
+  if (!key) return new Response(null, { status: 404 });
+  return new Response(key, {
+    headers: { 'Content-Type': 'text/plain; charset=utf-8' },
+  });
+}

package/templates/nextjs/base/src/app/layout.tsx.ejs

@@ -6,6 +6,7 @@ import { AnnouncementBar } from '@/ui/layout/announcement-bar';
 import { SiteHeader } from '@/ui/layout/site-header';
 import { SiteFooter } from '@/ui/layout/site-footer';
 import { BrainerceBotWidget } from '@/components/brainerce-bot';
+import { TrackingBootstrap } from '@/components/tracking-bootstrap';
 import { getServerClient, fetchStoreInfo } from '@/core/lib/brainerce';
 import { getDirection, getMessages, supportedLocales } from '@/i18n';
 import { getNonce } from '@/core/lib/nonce';
@@ -105,6 +106,10 @@ export default async function RootLayout({
       </head>
       <body className={font.className}>
         <StoreProvider locale={locale} initialStoreInfo={storeInfo} initialMessages={messages}>
+          {/* Mounted ahead of the page tree on purpose: React runs effects in
+              tree order, so booting the tags here guarantees fbq/ttq exist by
+              the time a page component fires its first e-commerce event. */}
+          <TrackingBootstrap />
           <div className="min-h-screen flex flex-col">
             <AnnouncementBar announcements={announcements} />
             <SiteHeader header={siteHeader} storeName={<%- storeNameJs %>} />
@@ -125,6 +130,7 @@ import { AnnouncementBar } from '@/ui/layout/announcement-bar';
 import { SiteHeader } from '@/ui/layout/site-header';
 import { SiteFooter } from '@/ui/layout/site-footer';
 import { BrainerceBotWidget } from '@/components/brainerce-bot';
+import { TrackingBootstrap } from '@/components/tracking-bootstrap';
 import { getServerClient, fetchStoreInfo } from '@/core/lib/brainerce';
 import { getNonce } from '@/core/lib/nonce';
 import './globals.css';
@@ -212,6 +218,10 @@ export default async function RootLayout({
       </head>
       <body className={font.className}>
         <StoreProvider initialStoreInfo={storeInfo}>
+          {/* Mounted ahead of the page tree on purpose: React runs effects in
+              tree order, so booting the tags here guarantees fbq/ttq exist by
+              the time a page component fires its first e-commerce event. */}
+          <TrackingBootstrap />
           <div className="min-h-screen flex flex-col">
             <AnnouncementBar announcements={announcements} />
             <SiteHeader header={siteHeader} storeName={<%- storeNameJs %>} />

package/templates/nextjs/base/src/app/llms.txt/route.ts

@@ -1,44 +1,44 @@
-/**
- * llms.txt — GET /llms.txt
- *
- * A machine-readable site summary for AI answer engines (ChatGPT, Perplexity,
- * Claude, AI Overviews). Emerging convention: a concise markdown map of what
- * the site is and where its key content lives, so AI crawlers ground answers
- * in (and cite) the right pages.
- */
-import { getServerClient } from '@/core/lib/brainerce';
-
-export const revalidate = 3600;
-
-export async function GET() {
-  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://example.com';
-  const client = getServerClient();
-
-  const [info, posts] = await Promise.all([
-    client.getStoreInfo().catch(() => null),
-    client.blog.getPosts({ limit: 20 }).catch(() => null),
-  ]);
-
-  const lines: string[] = [
-    `# ${info?.name ?? 'Store'}`,
-    '',
-    ...(info?.metaDescription ? [`> ${info.metaDescription}`, ''] : []),
-    '## Key pages',
-    '',
-    `- [Products](${baseUrl}/products): full catalog`,
-    `- [Blog](${baseUrl}/blog): guides and articles`,
-    ...(info?.contactEmail ? [`- Contact: ${info.contactEmail}`] : []),
-  ];
-
-  if (posts && posts.data.length > 0) {
-    lines.push('', '## Recent articles', '');
-    for (const post of posts.data) {
-      const summary = post.seoDescription ?? post.excerpt ?? '';
-      lines.push(`- [${post.title}](${baseUrl}/blog/${post.slug})${summary ? `: ${summary}` : ''}`);
-    }
-  }
-
-  return new Response(lines.join('\n') + '\n', {
-    headers: { 'Content-Type': 'text/plain; charset=utf-8' },
-  });
-}
+/**
+ * llms.txt — GET /llms.txt
+ *
+ * A machine-readable site summary for AI answer engines (ChatGPT, Perplexity,
+ * Claude, AI Overviews). Emerging convention: a concise markdown map of what
+ * the site is and where its key content lives, so AI crawlers ground answers
+ * in (and cite) the right pages.
+ */
+import { getServerClient } from '@/core/lib/brainerce';
+
+export const revalidate = 3600;
+
+export async function GET() {
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://example.com';
+  const client = getServerClient();
+
+  const [info, posts] = await Promise.all([
+    client.getStoreInfo().catch(() => null),
+    client.blog.getPosts({ limit: 20 }).catch(() => null),
+  ]);
+
+  const lines: string[] = [
+    `# ${info?.name ?? 'Store'}`,
+    '',
+    ...(info?.metaDescription ? [`> ${info.metaDescription}`, ''] : []),
+    '## Key pages',
+    '',
+    `- [Products](${baseUrl}/products): full catalog`,
+    `- [Blog](${baseUrl}/blog): guides and articles`,
+    ...(info?.contactEmail ? [`- Contact: ${info.contactEmail}`] : []),
+  ];
+
+  if (posts && posts.data.length > 0) {
+    lines.push('', '## Recent articles', '');
+    for (const post of posts.data) {
+      const summary = post.seoDescription ?? post.excerpt ?? '';
+      lines.push(`- [${post.title}](${baseUrl}/blog/${post.slug})${summary ? `: ${summary}` : ''}`);
+    }
+  }
+
+  return new Response(lines.join('\n') + '\n', {
+    headers: { 'Content-Type': 'text/plain; charset=utf-8' },
+  });
+}