create-magic-storefront 0.4.0 → 0.6.0

package/template/app/not-found.tsx

@@ -1,13 +1,43 @@
 import Link from 'next/link';
+import { buttonClass } from '@/components/ui/button';
+import { EmptyState } from '@/components/ui/empty-state';
+import { Icon } from '@/components/ui/icon';
 import { locale } from '@/lib/api';
 import { messages } from '@/lib/i18n';
 
+/** A page that is not there (or not in this language): search, the catalog, or home. */
 export default function NotFound() {
   const t = messages(locale);
   return (
-    <div className="stack">
-      <h1>{t.notFound}</h1>
-      <Link href="/">{t.backToShop}</Link>
-    </div>
+    <EmptyState
+      as="h1"
+      title={t.notFound}
+      icon="search"
+      action={
+        <div className="not-found__actions">
+          <form role="search" action="/search" className="search-form not-found__search">
+            <Icon name="search" className="search-form__icon" />
+            <input
+              type="search"
+              name="q"
+              placeholder={t.searchPlaceholder}
+              aria-label={t.search}
+              enterKeyHint="search"
+            />
+            <button type="submit" className="button button--primary">
+              {t.search}
+            </button>
+          </form>
+          <div className="row">
+            <Link href="/collections" className={buttonClass()}>
+              {t.catalog}
+            </Link>
+            <Link href="/" className={buttonClass({ variant: 'link' })}>
+              {t.backToShop}
+            </Link>
+          </div>
+        </div>
+      }
+    />
   );
 }

package/template/app/page.tsx

@@ -18,7 +18,7 @@ export default async function Home() {
     preview,
   });
   return (
-    <div className="home">
+    <div className="page-sections">
       <ThemeSections sections={sections} components={components} />
     </div>
   );

package/template/app/pages/[handle]/page.tsx

@@ -37,7 +37,7 @@ export default async function ContentPage({ params }: Props) {
     'page-content': (props) => <PageContent {...props} page={page} />,
   };
   return (
-    <div className="home">
+    <div className="page-sections">
       <ThemeSections sections={sections} components={pageComponents} />
     </div>
   );

package/template/app/products/[handle]/layout.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+
+import { api, orNotFound } from '@/lib/api';
+
+/**
+ * The product must exist before the page streams: `loading.tsx` below sends the headers, so a
+ * `notFound()` in the page would answer 200. Checked here, a missing handle is a real 404. The page
+ * reads the same request from the cache.
+ */
+export default async function ProductLayout({
+  children,
+  params,
+}: {
+  children: ReactNode;
+  params: Promise<{ handle: string }>;
+}) {
+  const { handle } = await params;
+  await orNotFound(api.productsShow({ path: { handle } }));
+  return children;
+}

package/template/app/products/[handle]/loading.tsx

@@ -0,0 +1,25 @@
+import { PageLoading } from '@/components/page-loading';
+import { Skeleton } from '@/components/ui/skeleton';
+
+export default function ProductLoading() {
+  return (
+    <PageLoading>
+      <Skeleton height="1rem" width="16rem" className="breadcrumbs" />
+      <div className="product-page">
+        <div className="product-page__media">
+          <div className="gallery__slide">
+            <Skeleton className="product-loading__media" />
+          </div>
+        </div>
+        <div className="product-page__info">
+          <Skeleton height="2rem" width="90%" />
+          <Skeleton height="2rem" width="60%" />
+          <Skeleton height="1.75rem" width="30%" />
+          <Skeleton height="2.75rem" width="70%" />
+          <Skeleton height="3rem" />
+          <Skeleton height="4rem" />
+        </div>
+      </div>
+    </PageLoading>
+  );
+}

package/template/app/products/[handle]/page.tsx

@@ -1,8 +1,21 @@
 import type { Metadata } from 'next';
-import { Image } from '@magicstoreai/hydrogen';
-import { jsonLdScript, pageMeta, productJsonLd } from '@magicstoreai/hydrogen/seo';
-import { BuyBox } from '@/components/buy-box';
-import { api, orNotFound } from '@/lib/api';
+import {
+  breadcrumbJsonLd,
+  jsonLdScript,
+  pageMeta,
+  productJsonLd,
+} from '@magicstoreai/hydrogen/seo';
+import { BuyBox } from '@/components/product/buy-box';
+import { Gallery } from '@/components/product/gallery';
+import { ProductSelection } from '@/components/product/product-selection';
+import { Recommendations } from '@/components/product/recommendations';
+import { ProductReviews, REVIEWS_PER_PAGE } from '@/components/product/reviews';
+import { ShareButton } from '@/components/share-button';
+import { Accordion } from '@/components/ui/accordion';
+import { Breadcrumbs } from '@/components/ui/breadcrumbs';
+import { Rating } from '@/components/ui/rating';
+import { api, locale, orNotFound } from '@/lib/api';
+import { messages } from '@/lib/i18n';
 
 type Props = { params: Promise<{ handle: string }> };
 
@@ -22,26 +35,110 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   };
 }
 
+/**
+ * A product: the gallery beside a sticky buy box (stacked on phones), the description and FAQ as
+ * accordions, the reviews, and two recommendation shelves ("pairs well with", "you may also
+ * like"). Prices, stock and recommendations are the API's; the page only lays them out.
+ */
 export default async function ProductPage({ params }: Props) {
   const { handle } = await params;
+  const t = messages(locale);
   const { data: product } = await orNotFound(api.productsShow({ path: { handle } }));
+  // Reviews and recommendations sit below the buy box: when one of them fails, the product is still
+  // shown and bought — that part is left out (no section, an empty shelf), not the whole page.
+  const [{ data: shop }, reviews, related, complementary] = await Promise.all([
+    api.shop(),
+    api
+      .productsReviews({ path: { handle }, query: { perPage: REVIEWS_PER_PAGE } })
+      .catch(() => null),
+    api
+      .productsRecommendations({ path: { handle }, query: { intent: 'RELATED', perPage: 8 } })
+      .then(
+        ({ data }) => data,
+        () => [],
+      ),
+    api
+      .productsRecommendations({ path: { handle }, query: { intent: 'COMPLEMENTARY', perPage: 4 } })
+      .then(
+        ({ data }) => data,
+        () => [],
+      ),
+  ]);
+  const path = `/products/${product.handle}`;
+  const crumbs = [
+    { name: t.home, href: '/' },
+    ...(product.primaryCollection
+      ? [
+          {
+            name: product.primaryCollection.title,
+            href: `/collections/${product.primaryCollection.handle}`,
+          },
+        ]
+      : []),
+    { name: product.title, href: path },
+  ];
 
   return (
-    <article className="product">
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: jsonLdScript(productJsonLd(product, { url: path })) }}
+      />
       <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{
-          __html: jsonLdScript(productJsonLd(product, { url: `/products/${product.handle}` })),
+          __html: jsonLdScript(
+            breadcrumbJsonLd(crumbs.map((crumb) => ({ name: crumb.name, url: crumb.href }))),
+          ),
         }}
       />
-      <div className="stack">
-        <Image data={product.featuredImage} alt={product.title} loading="eager" />
-      </div>
-      <div className="stack">
-        <h1>{product.title}</h1>
-        <BuyBox product={product} />
-        {product.description && <div dangerouslySetInnerHTML={{ __html: product.description }} />}
-      </div>
-    </article>
+      <Breadcrumbs items={crumbs} label={t.breadcrumbs} />
+      <ProductSelection product={product}>
+        <article className="product-page">
+          <div className="product-page__media">
+            <Gallery images={product.images} video={product.video} title={product.title} />
+          </div>
+          <div className="product-page__info">
+            <header className="product-page__header">
+              {product.vendor && <p className="product-page__vendor">{product.vendor}</p>}
+              <h1 className="product-page__title">{product.title}</h1>
+              {product.rating.count > 0 && (
+                <a href="#reviews" className="product-page__rating">
+                  <Rating
+                    average={product.rating.average}
+                    count={product.rating.count}
+                    label={t.ratingSummary(product.rating.average ?? 0, product.rating.count)}
+                  />
+                </a>
+              )}
+            </header>
+            <BuyBox wishlist={shop.features.wishlist} deliveryText={shop.checkout.deliveryText} />
+            {(product.description || product.faq.length > 0) && (
+              <div className="product-page__details">
+                {product.description && (
+                  <Accordion title={t.description} open>
+                    <div
+                      className="prose"
+                      dangerouslySetInnerHTML={{ __html: product.description }}
+                    />
+                  </Accordion>
+                )}
+                {product.faq.map((entry, index) => (
+                  <Accordion key={index} title={entry.question}>
+                    <p>{entry.answer}</p>
+                  </Accordion>
+                ))}
+              </div>
+            )}
+            <ShareButton title={product.title} />
+          </div>
+        </article>
+      </ProductSelection>
+      {reviews && (
+        <ProductReviews handle={product.handle} reviews={reviews} locale={locale} t={t} />
+      )}
+      <Recommendations title={t.pairsWellWith} products={complementary} locale={locale} />
+      <Recommendations title={t.relatedProducts} products={related} locale={locale} />
+    </>
   );
 }

package/template/app/providers.tsx

@@ -3,23 +3,36 @@
 import { MagicStoreProvider, useAnalytics, type Shop } from '@magicstoreai/hydrogen';
 import { usePathname } from 'next/navigation';
 import { useEffect, useRef, type ReactNode } from 'react';
+import { CartDrawerProvider, type CartType } from '@/components/cart/cart-drawer';
 
 const token = process.env.NEXT_PUBLIC_MAGICSTORE_STOREFRONT_TOKEN;
 const locale = process.env.NEXT_PUBLIC_MAGICSTORE_LOCALE || 'ru';
 
 /**
  * With a public storefront token the browser calls the shop's API directly (the token lists this
- * origin); without one, it goes through this app's same-origin proxy (app/storefront-api).
+ * origin); without one, it goes through this app's same-origin proxy (app/storefront-api), which by
+ * default also holds the buyer's credentials. `credentials` comes from the server
+ * (`credentialsMode()` in the layout), so the proxy and the provider always agree.
  */
-const connection = token
-  ? { shopDomain: process.env.NEXT_PUBLIC_MAGICSTORE_SHOP_DOMAIN!, storefrontToken: token }
-  : { baseUrl: '/storefront-api' };
-
-export function Providers({ shop, children }: { shop: Shop; children: ReactNode }) {
+export function Providers({
+  shop,
+  credentials,
+  cartType,
+  children,
+}: {
+  shop: Shop;
+  credentials: 'browser' | 'server';
+  /** The `cartType` theme setting: what adding to the cart does. */
+  cartType: CartType;
+  children: ReactNode;
+}) {
+  const connection = token
+    ? { shopDomain: process.env.NEXT_PUBLIC_MAGICSTORE_SHOP_DOMAIN!, storefrontToken: token }
+    : { baseUrl: '/storefront-api', credentials };
   return (
     <MagicStoreProvider {...connection} shop={shop} locale={locale}>
       <PageViews />
-      {children}
+      <CartDrawerProvider cartType={cartType}>{children}</CartDrawerProvider>
     </MagicStoreProvider>
   );
 }

package/template/app/search/loading.tsx

@@ -0,0 +1,12 @@
+import { PageLoading } from '@/components/page-loading';
+import { ProductGridSkeleton, Skeleton, TitleSkeleton } from '@/components/ui/skeleton';
+
+export default function SearchLoading() {
+  return (
+    <PageLoading>
+      <TitleSkeleton width="20%" />
+      <Skeleton height="2.75rem" className="search-form" />
+      <ProductGridSkeleton />
+    </PageLoading>
+  );
+}

package/template/app/search/page.tsx

@@ -1,11 +1,24 @@
 import type { Metadata } from 'next';
+import Link from 'next/link';
 import { SearchView } from '@/components/analytics-views';
-import { Pager } from '@/components/pager';
-import { ProductGrid } from '@/components/product-grid';
+import { CatalogLayout } from '@/components/catalog/catalog-layout';
+import { buttonClass } from '@/components/ui/button';
+import { EmptyState } from '@/components/ui/empty-state';
+import { Icon } from '@/components/ui/icon';
 import { api, locale } from '@/lib/api';
-import { messages } from '@/lib/i18n';
+import {
+  apiQuery,
+  catalogQuery,
+  cleared,
+  hasFilters,
+  parseCatalog,
+  SEARCH_QUERY_MAX,
+  type SearchParams,
+} from '@/lib/catalog-params';
+import { messages, type Messages } from '@/lib/i18n';
 
-type Props = { searchParams: Promise<{ q?: string; page?: string }> };
+type Props = { searchParams: Promise<SearchParams> };
+type SearchQuery = NonNullable<NonNullable<Parameters<typeof api.search>[0]>['query']>;
 
 // Result pages are endless and change by the minute: keep them out of the index.
 export const metadata: Metadata = {
@@ -13,30 +26,130 @@ export const metadata: Metadata = {
   robots: { index: false, follow: true },
 };
 
+/**
+ * Search: the query field, then the results with the same facets and sort as a collection
+ * (`searchFilters` for this query). Without a query, or with no result, the shop's popular searches
+ * help the buyer on.
+ */
 export default async function SearchPage({ searchParams }: Props) {
-  const { q = '', page: pageParam } = await searchParams;
-  const page = Math.max(1, Number(pageParam) || 1);
+  const params = await searchParams;
+  // Cut to what the API accepts: a pasted essay searches its start instead of failing the page.
+  const q = ((Array.isArray(params.q) ? params.q[0] : params.q) ?? '')
+    .slice(0, SEARCH_QUERY_MAX)
+    .trim();
   const t = messages(locale);
-  const results = q.trim() ? await api.search({ query: { q, page, perPage: 24 } }) : null;
 
+  if (q === '') {
+    return (
+      <div className="search-page">
+        <h1 className="page-title">{t.search}</h1>
+        <SearchForm q="" t={t} />
+        <Trending queries={await trending()} t={t} />
+      </div>
+    );
+  }
+
+  const [{ data: filters }, { data: shop }] = await Promise.all([
+    api.searchFilters({ query: { q } }),
+    api.shop(),
+  ]);
+  const catalog = parseCatalog(params, filters);
+  const results = await api.search({
+    query: { q, perPage: 24, ...apiQuery(catalog) } as SearchQuery,
+  });
+  const total = results.meta.pagination.total;
+  const popular = total === 0 && !hasFilters(catalog) ? await trending() : [];
+
+  return (
+    <div className="search-page">
+      <SearchView query={q} resultsCount={total} />
+      <h1 className="page-title">{t.search}</h1>
+      <SearchForm q={q} t={t} />
+      <CatalogLayout
+        filters={filters}
+        catalog={catalog}
+        products={results}
+        path="/search"
+        extra={{ q }}
+        money={{ locale, format: shop.moneyFormat }}
+        locale={locale}
+        t={t}
+        empty={
+          hasFilters(catalog) ? (
+            <EmptyState
+              title={t.noMatches}
+              icon="filter"
+              action={
+                <Link
+                  href={`/search${catalogQuery(cleared(catalog), { q })}`}
+                  className={buttonClass()}
+                >
+                  {t.clearAll}
+                </Link>
+              }
+            >
+              {t.noMatchesHint}
+            </EmptyState>
+          ) : (
+            <>
+              <EmptyState
+                title={t.noSuggestions(q)}
+                icon="search"
+                action={
+                  <Link href="/collections" className={buttonClass({ variant: 'primary' })}>
+                    {t.shopNow}
+                  </Link>
+                }
+              />
+              <Trending queries={popular} t={t} />
+            </>
+          )
+        }
+      />
+    </div>
+  );
+}
+
+function SearchForm({ q, t }: { q: string; t: Messages }) {
+  return (
+    <form role="search" action="/search" className="search-form">
+      <Icon name="search" className="search-form__icon" />
+      <input
+        type="search"
+        name="q"
+        defaultValue={q}
+        maxLength={SEARCH_QUERY_MAX}
+        placeholder={t.searchPlaceholder}
+        aria-label={t.search}
+        enterKeyHint="search"
+      />
+      <button type="submit" className="button button--primary">
+        {t.search}
+      </button>
+    </form>
+  );
+}
+
+async function trending(): Promise<string[]> {
+  const { data } = await api.searchTrending({ query: { perPage: 8 } });
+  return data.map((entry) => entry.query);
+}
+
+/** The shop's popular searches as links; nothing when it has none yet. */
+function Trending({ queries, t }: { queries: string[]; t: Messages }) {
+  if (queries.length === 0) {
+    return null;
+  }
   return (
-    <>
-      <h1>{t.search}</h1>
-      <form className="row" action="/search">
-        <input name="q" defaultValue={q} placeholder={t.searchPlaceholder} />
-        <button className="primary">{t.search}</button>
-      </form>
-      {results && (
-        <>
-          <SearchView query={q} resultsCount={results.meta.pagination.total} />
-          <p className="muted">{t.found(results.meta.pagination.total)}</p>
-          <ProductGrid products={results.data} />
-          <Pager
-            meta={results.meta.pagination}
-            href={(p) => `/search?q=${encodeURIComponent(q)}&page=${p}`}
-          />
-        </>
-      )}
-    </>
+    <section className="search-trending">
+      <h2 className="search-trending__title">{t.popularSearches}</h2>
+      <nav className="chips" aria-label={t.popularSearches}>
+        {queries.map((query) => (
+          <Link key={query} href={`/search?${new URLSearchParams({ q: query })}`}>
+            {query}
+          </Link>
+        ))}
+      </nav>
+    </section>
   );
 }

package/template/app/sitemap.ts

@@ -25,7 +25,11 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
   const { data: shop } = await api.shop();
   const origin = siteOrigin(shop);
 
-  const entries: MetadataRoute.Sitemap = [{ url: `${origin}/` }];
+  const entries: MetadataRoute.Sitemap = [
+    { url: `${origin}/` },
+    { url: `${origin}/collections` },
+    { url: `${origin}/contacts` },
+  ];
   for (let page = 1; page <= MAX_PAGES; page++) {
     const { data, meta } = await api.sitemap({ query: { page, perPage: PER_PAGE } });
     for (const row of data) {

package/template/app/storefront-api/[...path]/route.ts

@@ -3,81 +3,26 @@
  * identifies the shop by the request's host and CORS admits only origins a token lists, so the
  * browser talks to this route and this route talks to the shop — with the shop's host, and the
  * buyer's address in X-Forwarded-For. Only the API's own headers pass, both ways.
+ *
+ * By default it also holds the buyer's credentials (`credentialsMode()`): session tokens and the
+ * cart and checkout ids live in httpOnly cookies, and the browser only ever sees "current".
  */
-import { upstreamBaseUrl } from '@/lib/upstream';
+import { createStorefrontProxy, type StorefrontProxy } from '@magicstoreai/hydrogen/server';
 
-const upstream = upstreamBaseUrl();
+import { credentialsMode, upstreamBaseUrl } from '@/lib/upstream';
 
-const REQUEST_HEADERS = [
-  'accept',
-  'accept-language',
-  'authorization',
-  'content-type',
-  'idempotency-key',
-  'if-none-match',
-  'x-anonymous-id',
-  'x-checkout-id',
-  'x-request-id',
-  'x-session-id',
-];
+let proxy: StorefrontProxy | null = null;
 
-const RESPONSE_HEADERS = [
-  'cache-control',
-  'content-language',
-  'content-type',
-  'etag',
-  'location',
-  'ratelimit-limit',
-  'ratelimit-remaining',
-  'ratelimit-reset',
-  'retry-after',
-  'x-request-id',
-];
-
-async function proxy(
+async function handle(
   request: Request,
   { params }: { params: Promise<{ path: string[] }> },
 ): Promise<Response> {
+  const upstream = upstreamBaseUrl();
   if (upstream === null) {
     return new Response('MAGICSTORE_SHOP_DOMAIN is not set', { status: 500 });
   }
-  const { path } = await params;
-  const incoming = new URL(request.url);
-  const target = new URL(`${upstream}/${path.map(encodeURIComponent).join('/')}`);
-  target.search = incoming.search;
-
-  const headers = new Headers();
-  for (const name of REQUEST_HEADERS) {
-    const value = request.headers.get(name);
-    if (value !== null) {
-      headers.set(name, value);
-    }
-  }
-  const client = request.headers.get('x-forwarded-for');
-  if (client) {
-    headers.set('x-forwarded-for', client);
-  }
-
-  const hasBody = request.method !== 'GET' && request.method !== 'HEAD';
-  const answer = await fetch(target, {
-    method: request.method,
-    headers,
-    body: hasBody ? await request.arrayBuffer() : undefined,
-    cache: 'no-store',
-    redirect: 'manual',
-  });
-
-  const out = new Headers();
-  for (const name of RESPONSE_HEADERS) {
-    const value = answer.headers.get(name);
-    if (value !== null) {
-      out.set(name, value);
-    }
-  }
-  return new Response(answer.status === 204 || answer.status === 304 ? null : answer.body, {
-    status: answer.status,
-    headers: out,
-  });
+  proxy ??= createStorefrontProxy({ upstream, credentials: credentialsMode() });
+  return proxy(request, (await params).path);
 }
 
-export { proxy as DELETE, proxy as GET, proxy as PATCH, proxy as POST, proxy as PUT };
+export { handle as DELETE, handle as GET, handle as PATCH, handle as POST, handle as PUT };