create-magic-storefront 0.5.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,6 +3,7 @@
 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';
@@ -16,10 +17,13 @@ const locale = process.env.NEXT_PUBLIC_MAGICSTORE_LOCALE || 'ru';
 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
@@ -28,7 +32,7 @@ export function Providers({
   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/styles/base.css

@@ -0,0 +1,138 @@
+/* Elements without classes: type, links, form controls, focus. */
+@layer base {
+  html {
+    scroll-padding-top: calc(var(--header-h) + var(--space-4));
+  }
+  body {
+    min-height: 100dvh;
+    display: flex;
+    flex-direction: column;
+    font-size: var(--text-base);
+    line-height: var(--leading-normal);
+    background: var(--bg);
+    color: var(--fg);
+    -webkit-font-smoothing: antialiased;
+  }
+  html[data-telegram] body {
+    /* Telegram's stable viewport (the sheet can be dragged), the dynamic viewport outside it. */
+    min-height: var(--tg-viewport-stable-height, 100dvh);
+    padding-left: max(env(safe-area-inset-left), var(--tg-safe-area-inset-left, 0px));
+    padding-right: max(env(safe-area-inset-right), var(--tg-safe-area-inset-right, 0px));
+    padding-bottom: max(env(safe-area-inset-bottom), var(--tg-safe-area-inset-bottom, 0px));
+  }
+
+  h1,
+  h2,
+  h3,
+  h4 {
+    font-family: var(--font-heading);
+    font-weight: var(--weight-heading);
+    line-height: var(--leading-tight);
+    letter-spacing: -0.01em;
+    text-wrap: balance;
+  }
+  h1 {
+    font-size: var(--text-3xl);
+  }
+  h2 {
+    font-size: var(--text-2xl);
+  }
+  h3 {
+    font-size: var(--text-lg);
+    line-height: var(--leading-snug);
+  }
+  p {
+    text-wrap: pretty;
+  }
+  a {
+    color: inherit;
+    text-underline-offset: 0.2em;
+    text-decoration-thickness: 1px;
+  }
+  s {
+    text-decoration-thickness: 1px;
+  }
+  hr {
+    border: 0;
+    border-top: 1px solid var(--line);
+    margin: var(--space-5) 0;
+  }
+
+  :focus-visible {
+    outline: 2px solid var(--fg);
+    outline-offset: 2px;
+  }
+
+  /* Bare controls get a calm default; .button and the form components refine them. */
+  button {
+    min-height: 44px;
+    padding: 0 var(--space-4);
+    border: 1px solid var(--line-strong);
+    border-radius: var(--radius-sm);
+    background: var(--surface);
+    color: var(--fg);
+    transition:
+      background-color var(--duration-fast) var(--ease),
+      border-color var(--duration-fast) var(--ease);
+  }
+  button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  button[aria-pressed='true'] {
+    border-color: var(--fg);
+    box-shadow: inset 0 0 0 1px var(--fg);
+  }
+  input:not([type='checkbox'], [type='radio'], [type='range']),
+  select,
+  textarea {
+    width: 100%;
+    min-height: 44px;
+    padding: var(--space-2) var(--space-3);
+    /* 16px at least: smaller makes iOS zoom into the field. */
+    font-size: max(var(--text-base), 16px);
+    background: var(--surface);
+    color: var(--fg);
+    border: 1px solid var(--line-strong);
+    border-radius: var(--radius-sm);
+  }
+  input:focus-visible,
+  select:focus-visible,
+  textarea:focus-visible {
+    outline: 2px solid var(--fg);
+    outline-offset: 0;
+    border-color: var(--fg);
+  }
+  input::placeholder,
+  textarea::placeholder {
+    color: var(--muted);
+  }
+  input[type='checkbox'],
+  input[type='radio'] {
+    width: 1.125rem;
+    height: 1.125rem;
+    margin: 0;
+    accent-color: var(--fg);
+  }
+  label {
+    cursor: pointer;
+  }
+  table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+  td,
+  th {
+    padding: var(--space-3) var(--space-2);
+    border-bottom: 1px solid var(--line);
+    text-align: start;
+    vertical-align: middle;
+  }
+  blockquote {
+    margin: 0;
+  }
+  progress {
+    width: 100%;
+    accent-color: var(--accent);
+  }
+}