create-magic-storefront 0.1.1 → 0.1.3

package/template/AGENTS.md

@@ -28,6 +28,8 @@ each error code means — then `PAGES.md` for how each page type is built, and
   webhook). Anything personal — cart, customer, wishlist — lives in client components under
   `MagicStoreProvider` (`app/providers.tsx`).
 - Branch on `MagicStoreError.code`, show `error.detail`.
+- No hard-coded interface text: every word the storefront shows comes from `lib/i18n.ts`, in
+  every language it has (`ru`, `uz`, `en`).
 - Every page handles its empty, error and not-found states (`orNotFound` turns `NOT_FOUND` into
   the 404 page).
 
@@ -40,20 +42,25 @@ from a landing page: brand colors come from `shop.branding` at runtime, product
 come only from the API, nothing is invented (prices, badges, reviews, urgency), and the cart and
 checkout stay conventional.
 
+Before calling visual work done, follow `.claude/skills/storefront-verify/SKILL.md`: build, run,
+screenshot every page type at 390 and 1280px, fix what you see. Interactive UI follows
+`.claude/skills/web-interface-guidelines/SKILL.md`; React and Next.js code follows
+`.claude/skills/vercel-react-best-practices/SKILL.md`.
+
 ## Where things go
 
-| Path                           | What                                                                     |
-| ------------------------------ | ------------------------------------------------------------------------ |
-| `app/`                         | Pages (server components) and route handlers                             |
-| `app/error.tsx`                | Error boundary: the API's `detail`, a retry                              |
-| `app/sitemap.ts`               | Sitemap from `GET /sitemap`                                              |
-| `app/page.tsx`                 | Home: renders `GET /home` sections in the merchant's order               |
-| `components/sections/`         | One renderer per home section type; an unknown type renders nothing      |
-| `components/`                  | Shared UI; client components start with `'use client'`                   |
-| `lib/api.ts`                   | The server-side client (`nextCacheFetch`), `orNotFound`                  |
-| `app/providers.tsx`            | `MagicStoreProvider`: customer, cart, wishlist, analytics in the browser |
-| `app/storefront-api/[...path]` | Same-origin proxy for browser calls without a public storefront token    |
-| `app/api/magicstore/webhook`   | Signed webhook → `revalidateTag`                                         |
+| Path                           | What                                                                                                              |
+| ------------------------------ | ----------------------------------------------------------------------------------------------------------------- |
+| `app/`                         | Pages (server components) and route handlers                                                                      |
+| `app/error.tsx`                | Error boundary: the API's `detail`, a retry                                                                       |
+| `app/sitemap.ts`               | Sitemap from `GET /sitemap`                                                                                       |
+| `app/page.tsx`                 | Home: renders `GET /home` sections in the merchant's order. Optional: a custom home composes its own (`PAGES.md`) |
+| `components/sections/`         | One renderer per home section type; an unknown type renders nothing                                               |
+| `components/`                  | Shared UI; client components start with `'use client'`                                                            |
+| `lib/api.ts`                   | The server-side client (`nextCacheFetch`), `orNotFound`                                                           |
+| `app/providers.tsx`            | `MagicStoreProvider`: customer, cart, wishlist, analytics in the browser                                          |
+| `app/storefront-api/[...path]` | Same-origin proxy for browser calls without a public storefront token                                             |
+| `app/api/magicstore/webhook`   | Signed webhook → `revalidateTag`                                                                                  |
 
 ## Commands
 

package/template/PAGES.md

@@ -40,6 +40,24 @@ API's, not the build's. The fetch cache still spares the API.
 
 ## Home — `app/page.tsx`, `components/sections/`
 
+The home page belongs to the storefront. `GET /home` is one way to fill it, not a requirement.
+Pick one per project:
+
+- **Merchant-managed** (this starter's default): render `GET /home`, described below. The merchant
+  arranges the page in the admin and the storefront follows.
+- **Custom**: compose the page yourself from any API data — `productsIndex` with its sorts and
+  filters, `collectionsIndex`, `collectionsProducts`, `reviewsSite`, `pagesShow`, `shop.branding` —
+  in whatever layout the design calls for. Not calling `api.home()` at all is fine, and so is
+  taking only some sections from it (the merchant's `BANNER` slides, the `ANNOUNCEMENT_BAR` text)
+  and placing them where the design wants. `components/sections/` can then be deleted.
+
+A custom home is a trade-off: the merchant's home editor in the admin no longer controls the page.
+Tell whoever owns the store. Everything else still holds: data only from the API, nothing invented,
+and the page is revalidated by the tags of what it reads (`magicstore:catalog`, `magicstore:shop`),
+not by `HOME_UPDATED` unless it calls `api.home()`.
+
+### Rendering `GET /home`
+
 `api.home()` answers `{ sections: HomeSection[] }` in the merchant's order. Render each by `type`
 with one component per type; a type the storefront does not know renders **nothing** (the API can
 be newer than the storefront). `GET /theme/section-schema` (`api.themeSectionSchema()`) has the
@@ -150,8 +168,13 @@ updatedAt }` rows — on `SITE_URL` or the shop's `primaryDomain`, at most 50 pa
 ## Every page
 
 - Import only the SDK's entry points; `npx create-magic-storefront check` passes.
-- Not found → `notFound()`; any other failure shows `describe(error)` (`lib/errors.ts`) or lets
-  `app/error.tsx` catch it (it shows `detail`, and "temporarily closed" on `STORE_UNAVAILABLE`).
+- Not found → `notFound()`; any other failure shows `describe(error, t.tryAgainLater)`
+  (`lib/errors.ts`) or lets `app/error.tsx` catch it (it shows `detail`, and "temporarily closed"
+  on `STORE_UNAVAILABLE`).
+- The interface speaks the storefront's language: every word the storefront itself shows comes from
+  `lib/i18n.ts` (`messages(locale)` on the server, `messages(useMagicStore().locale)` in a client
+  component), with an entry in each dictionary (`ru`, `uz`, `en`). What the merchant wrote comes
+  translated from the API.
 - Images through `<Image>` (intrinsic size, lazy), prices through `<Money>`.
 - Analytics: `PageViews` in `app/providers.tsx` reports each route; product, collection and search
   views are reported where they render.

package/template/README.md

@@ -2,7 +2,7 @@
 
 A Next.js (App Router) storefront on the MagicStore Storefront API v2, built only on the public SDK
 (`@magicstoreai/storefront-client`, `@magicstoreai/hydrogen`). The home page from the merchant's
-sections, catalog, collections, search, product with variants, cart, checkout (pickup or delivery,
+sections (or your own composition: `GET /home` is optional), catalog, collections, search, product with variants, cart, checkout (pickup or delivery,
 payment), OTP sign-in and orders, SEO and JSON-LD, and a webhook that revalidates cached pages.
 
 ```bash

package/template/_gitignore

@@ -3,3 +3,4 @@ node_modules/
 .env*.local
 next-env.d.ts
 *.tsbuildinfo
+.screenshots/

package/template/app/account/page.tsx

@@ -1,19 +1,27 @@
 'use client';
 
-import { Money, useCustomer, useStorefrontClient, useWishlist } from '@magicstoreai/hydrogen';
+import {
+  Money,
+  useCustomer,
+  useMagicStore,
+  useStorefrontClient,
+  useWishlist,
+} from '@magicstoreai/hydrogen';
 import type { Schema } from '@magicstoreai/storefront-client';
 import { useEffect, useState } from 'react';
 import { describe } from '@/lib/errors';
+import { messages } from '@/lib/i18n';
 
 export default function AccountPage() {
   const { customer, isSignedIn, signOut } = useCustomer();
+  const t = messages(useMagicStore().locale);
   return isSignedIn && customer ? (
     <div className="stack">
       <h1>{customer.name || customer.phone}</h1>
       <Orders />
       <SavedCount />
       <div>
-        <button onClick={() => void signOut()}>Sign out</button>
+        <button onClick={() => void signOut()}>{t.signOut}</button>
       </div>
     </div>
   ) : (
@@ -23,6 +31,7 @@ export default function AccountPage() {
 
 function SignIn() {
   const { requestOtp, verifyOtp } = useCustomer();
+  const t = messages(useMagicStore().locale);
   const [phone, setPhone] = useState('');
   const [sent, setSent] = useState(false);
   const [code, setCode] = useState('');
@@ -33,7 +42,7 @@ function SignIn() {
     try {
       await step();
     } catch (e) {
-      setError(describe(e));
+      setError(describe(e, t.tryAgainLater));
     }
   }
 
@@ -53,11 +62,14 @@ function SignIn() {
         });
       }}
     >
-      <h1>Sign in</h1>
+      <h1>{t.signIn}</h1>
       <input
         value={phone}
         onChange={(e) => setPhone(e.target.value)}
         placeholder="+998 90 123 45 67"
+        aria-label={t.phone}
+        type="tel"
+        autoComplete="tel"
         required
         disabled={sent}
       />
@@ -65,12 +77,14 @@ function SignIn() {
         <input
           value={code}
           onChange={(e) => setCode(e.target.value)}
-          placeholder="Code from the SMS"
+          placeholder={t.smsCode}
+          aria-label={t.smsCode}
           inputMode="numeric"
+          autoComplete="one-time-code"
           required
         />
       )}
-      <button className="primary">{sent ? 'Sign in' : 'Send code'}</button>
+      <button className="primary">{sent ? t.signIn : t.sendCode}</button>
       {error && <p className="error">{error}</p>}
     </form>
   );
@@ -79,6 +93,7 @@ function SignIn() {
 function Orders() {
   const client = useStorefrontClient();
   const [orders, setOrders] = useState<Schema<'Order'>[] | null>(null);
+  const t = messages(useMagicStore().locale);
 
   useEffect(() => {
     void client.customerOrdersIndex({ query: { perPage: 20 } }).then(
@@ -88,18 +103,18 @@ function Orders() {
   }, [client]);
 
   if (orders === null) {
-    return <p className="muted">Loading orders…</p>;
+    return <p className="muted">{t.loadingOrders}</p>;
   }
   return (
     <section className="stack">
-      <h2>Orders</h2>
-      {orders.length === 0 && <p className="muted">No orders yet.</p>}
+      <h2>{t.orders}</h2>
+      {orders.length === 0 && <p className="muted">{t.noOrders}</p>}
       <table>
         <tbody>
           {orders.map((order) => (
             <tr key={order.id}>
               <td>#{order.number}</td>
-              <td>{order.status}</td>
+              <td>{t.orderStatus[order.status]}</td>
               <td>
                 <Money data={(order.cost as { total?: Schema<'Money'> | null }).total ?? null} />
               </td>
@@ -113,5 +128,10 @@ function Orders() {
 
 function SavedCount() {
   const { productIds } = useWishlist();
-  return <p className="muted">Saved products: {productIds.length}</p>;
+  const t = messages(useMagicStore().locale);
+  return (
+    <p className="muted">
+      {t.savedProducts}: {productIds.length}
+    </p>
+  );
 }

package/template/app/cart/page.tsx

@@ -1,22 +1,24 @@
 'use client';
 
-import { Image, Money, moneyAmount, useCart } from '@magicstoreai/hydrogen';
+import { Image, Money, moneyAmount, useCart, useMagicStore } from '@magicstoreai/hydrogen';
 import Link from 'next/link';
 import { useState } from 'react';
 import { describe } from '@/lib/errors';
+import { messages } from '@/lib/i18n';
 
 export default function CartPage() {
   const { cart, status, error, updateLine, removeLine, setDiscountCodes } = useCart();
   const [code, setCode] = useState('');
+  const t = messages(useMagicStore().locale);
 
   if (status === 'loading') {
-    return <p className="muted">Loading your cart…</p>;
+    return <p className="muted">{t.loadingCart}</p>;
   }
   if (cart === null || cart.lines.length === 0) {
     return (
       <div className="stack">
-        <h1>Your cart is empty</h1>
-        <Link href="/">Continue shopping</Link>
+        <h1>{t.cartEmpty}</h1>
+        <Link href="/">{t.continueShopping}</Link>
       </div>
     );
   }
@@ -25,47 +27,39 @@ export default function CartPage() {
 
   return (
     <div className="stack">
-      <h1>Cart</h1>
-      <table>
-        <tbody>
-          {cart.lines.map((line) => (
-            <tr key={line.id}>
-              <td style={{ width: 72 }}>
-                <Image data={line.merchandise.image} width={64} height={64} alt="" />
-              </td>
-              <td>
-                <div>{line.merchandise.product?.title}</div>
-                {line.merchandise.variant &&
-                  !/^Default( Title)?$/.test(line.merchandise.variant.title) && (
-                    <div className="muted">{line.merchandise.variant.title}</div>
-                  )}
-                {!line.available && <div className="error">Not available any more</div>}
-              </td>
-              <td>
-                <input
-                  type="number"
-                  min={0}
-                  max={999}
-                  value={line.quantity}
-                  aria-label="Quantity"
-                  onChange={(event) =>
-                    void updateLine(line.id, Number(event.target.value)).catch(() => undefined)
-                  }
-                  style={{ width: 72 }}
-                />
-              </td>
-              <td>
-                <Money data={line.cost.total} />
-              </td>
-              <td>
-                <button onClick={() => void removeLine(line.id).catch(() => undefined)}>
-                  Remove
-                </button>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
+      <h1>{t.cart}</h1>
+      <ul className="cart-lines">
+        {cart.lines.map((line) => (
+          <li key={line.id} className="cart-line">
+            <Image data={line.merchandise.image} width={64} height={64} alt="" />
+            <div>
+              <div>{line.merchandise.product?.title}</div>
+              {line.merchandise.variant &&
+                !/^Default( Title)?$/.test(line.merchandise.variant.title) && (
+                  <div className="muted">{line.merchandise.variant.title}</div>
+                )}
+              {!line.available && <div className="error">{t.notAvailable}</div>}
+            </div>
+            <div className="cart-line-controls">
+              <input
+                type="number"
+                min={0}
+                max={999}
+                value={line.quantity}
+                aria-label={t.quantity}
+                onChange={(event) =>
+                  void updateLine(line.id, Number(event.target.value)).catch(() => undefined)
+                }
+                style={{ width: 72 }}
+              />
+              <Money data={line.cost.total} />
+              <button onClick={() => void removeLine(line.id).catch(() => undefined)}>
+                {t.remove}
+              </button>
+            </div>
+          </li>
+        ))}
+      </ul>
 
       <form
         className="row"
@@ -77,12 +71,14 @@ export default function CartPage() {
         <input
           value={code}
           onChange={(event) => setCode(event.target.value)}
-          placeholder="Discount code"
+          placeholder={t.discountCode}
+          aria-label={t.discountCode}
         />
-        <button>Apply</button>
+        <button>{t.apply}</button>
         {applied && (
           <span className={applied.applicable ? 'muted' : 'error'}>
-            {applied.code}: {applied.applicable ? 'applied' : `not applied (${applied.reasonCode})`}
+            {applied.code}:{' '}
+            {applied.applicable ? t.codeApplied : `${t.codeNotApplied} (${applied.reasonCode})`}
           </span>
         )}
       </form>
@@ -90,21 +86,21 @@ export default function CartPage() {
       <table>
         <tbody>
           <tr>
-            <td>Subtotal</td>
+            <td>{t.subtotal}</td>
             <td>
               <Money data={cart.cost.subtotal} />
             </td>
           </tr>
           {cart.cost.discountTotal && moneyAmount(cart.cost.discountTotal) > 0 && (
             <tr>
-              <td>Discount</td>
+              <td>{t.discount}</td>
               <td>
                 −<Money data={cart.cost.discountTotal} />
               </td>
             </tr>
           )}
           <tr>
-            <th>Total</th>
+            <th>{t.total}</th>
             <th>
               <Money data={cart.cost.total} />
             </th>
@@ -112,12 +108,12 @@ export default function CartPage() {
         </tbody>
       </table>
 
-      {error && <p className="error">{describe(error)}</p>}
+      {error && <p className="error">{describe(error, t.tryAgainLater)}</p>}
       <div className="row">
         <Link href="/checkout" className="button primary">
-          Checkout
+          {t.checkout}
         </Link>
-        {status === 'updating' && <span className="muted">Updating…</span>}
+        {status === 'updating' && <span className="muted">{t.updating}</span>}
       </div>
     </div>
   );

package/template/app/checkout/page.tsx

@@ -1,10 +1,17 @@
 'use client';
 
-import { Money, useCart, useCustomer, useStorefrontClient } from '@magicstoreai/hydrogen';
+import {
+  Money,
+  useCart,
+  useCustomer,
+  useMagicStore,
+  useStorefrontClient,
+} from '@magicstoreai/hydrogen';
 import type { Schema } from '@magicstoreai/storefront-client';
 import Link from 'next/link';
 import { useCallback, useEffect, useState } from 'react';
 import { describe } from '@/lib/errors';
+import { messages } from '@/lib/i18n';
 
 type Checkout = Schema<'Checkout'>;
 type DeliveryOption = Schema<'DeliveryOption'>;
@@ -20,6 +27,7 @@ export default function CheckoutPage() {
   const client = useStorefrontClient();
   const { cart, status: cartStatus } = useCart();
   const { customer } = useCustomer();
+  const t = messages(useMagicStore().locale);
   const [checkout, setCheckout] = useState<Checkout | null>(null);
   const [locations, setLocations] = useState<Location[]>([]);
   const [options, setOptions] = useState<DeliveryOption[]>([]);
@@ -27,20 +35,23 @@ export default function CheckoutPage() {
   const [error, setError] = useState<string | null>(null);
   const [busy, setBusy] = useState(false);
 
-  const run = useCallback(async (step: () => Promise<{ data: Checkout } | void>) => {
-    setBusy(true);
-    setError(null);
-    try {
-      const result = await step();
-      if (result) {
-        setCheckout(result.data);
+  const run = useCallback(
+    async (step: () => Promise<{ data: Checkout } | void>) => {
+      setBusy(true);
+      setError(null);
+      try {
+        const result = await step();
+        if (result) {
+          setCheckout(result.data);
+        }
+      } catch (e) {
+        setError(describe(e, t.tryAgainLater));
+      } finally {
+        setBusy(false);
       }
-    } catch (e) {
-      setError(describe(e));
-    } finally {
-      setBusy(false);
-    }
-  }, []);
+    },
+    [t],
+  );
 
   useEffect(() => {
     if (cart === null || checkout !== null) {
@@ -62,31 +73,36 @@ export default function CheckoutPage() {
   if (completion) {
     return (
       <div className="stack">
-        <h1>Thank you!</h1>
+        <h1>{t.thankYou}</h1>
         <p>
-          Order <strong>{completion.order.number}</strong> — <Money data={completion.order.total} />
+          {t.order} <strong>{completion.order.number}</strong> —{' '}
+          <Money data={completion.order.total} />
         </p>
         {completion.payment.status === 'PENDING' && completion.payment.redirectUrl && (
           <a className="button primary" href={completion.payment.redirectUrl}>
-            Pay now
+            {t.payNow}
           </a>
         )}
-        <Link href="/">Continue shopping</Link>
+        <Link href="/">{t.continueShopping}</Link>
       </div>
     );
   }
   if (cartStatus === 'loading') {
-    return <p className="muted">Loading your cart…</p>;
+    return <p className="muted">{t.loadingCart}</p>;
   }
   if (cart === null || cart.lines.length === 0) {
     return (
       <p>
-        Your cart is empty. <Link href="/">Continue shopping</Link>
+        {t.cartEmpty}. <Link href="/">{t.continueShopping}</Link>
       </p>
     );
   }
   if (checkout === null) {
-    return error ? <p className="error">{error}</p> : <p className="muted">Preparing checkout…</p>;
+    return error ? (
+      <p className="error">{error}</p>
+    ) : (
+      <p className="muted">{t.preparingCheckout}</p>
+    );
   }
 
   const id = checkout.id;
@@ -94,7 +110,7 @@ export default function CheckoutPage() {
 
   return (
     <div className="stack">
-      <h1>Checkout</h1>
+      <h1>{t.checkoutTitle}</h1>
 
       <form
         className="stack"
@@ -110,30 +126,38 @@ export default function CheckoutPage() {
         }}
       >
         <fieldset className="stack">
-          <legend>Contact {missing.has('CONTACT') ? '' : '✓'}</legend>
+          <legend>
+            {t.contact} {missing.has('CONTACT') ? '' : '✓'}
+          </legend>
           <input
             name="name"
             required
-            placeholder="Name"
+            placeholder={t.name}
+            aria-label={t.name}
+            autoComplete="name"
             defaultValue={checkout.contact?.name ?? customer?.name ?? ''}
           />
           <input
             name="phone"
             required
             placeholder="+998 90 123 45 67"
+            aria-label={t.phone}
+            type="tel"
+            autoComplete="tel"
             defaultValue={checkout.contact?.phone ?? customer?.phone ?? ''}
           />
-          <button disabled={busy}>Save contact</button>
+          <button disabled={busy}>{t.saveContact}</button>
         </fieldset>
       </form>
 
       <fieldset className="stack">
         <legend>
-          Delivery {missing.has('DELIVERY_ADDRESS') || missing.has('DELIVERY_OPTION') ? '' : '✓'}
+          {t.delivery}{' '}
+          {missing.has('DELIVERY_ADDRESS') || missing.has('DELIVERY_OPTION') ? '' : '✓'}
         </legend>
         {locations.length > 0 && (
           <div className="stack">
-            <strong>Pick up</strong>
+            <strong>{t.pickUp}</strong>
             {locations.map((location) => (
               <label key={location.id} className="row">
                 <input
@@ -176,17 +200,39 @@ export default function CheckoutPage() {
             });
           }}
         >
-          <strong>Or deliver to</strong>
-          <input name="address" placeholder="Street, house" />
-          <input name="city" placeholder="City" />
+          <strong>{locations.length > 0 ? t.orDeliverTo : t.deliverTo}</strong>
+          <input
+            name="address"
+            placeholder={t.street}
+            aria-label={t.street}
+            autoComplete="street-address"
+          />
+          <input
+            name="city"
+            placeholder={t.city}
+            aria-label={t.city}
+            autoComplete="address-level2"
+          />
           <div className="row">
-            <input name="latitude" required inputMode="decimal" placeholder="Latitude" />
-            <input name="longitude" required inputMode="decimal" placeholder="Longitude" />
+            <input
+              name="latitude"
+              required
+              inputMode="decimal"
+              placeholder={t.latitude}
+              aria-label={t.latitude}
+            />
+            <input
+              name="longitude"
+              required
+              inputMode="decimal"
+              placeholder={t.longitude}
+              aria-label={t.longitude}
+            />
             <button type="button" onClick={(event) => fillMyLocation(event.currentTarget.form)}>
-              Use my location
+              {t.useMyLocation}
             </button>
           </div>
-          <button disabled={busy}>Show delivery options</button>
+          <button disabled={busy}>{t.showDeliveryOptions}</button>
         </form>
         {options.map((option) => (
           <label key={option.id} className="row">
@@ -204,13 +250,15 @@ export default function CheckoutPage() {
                 )
               }
             />
-            {option.title} — <Money data={option.price} fallback="free" />
+            {option.title} — <Money data={option.price} fallback={t.free} />
           </label>
         ))}
       </fieldset>
 
       <fieldset className="stack">
-        <legend>Payment {missing.has('PAYMENT_METHOD') ? '' : '✓'}</legend>
+        <legend>
+          {t.payment} {missing.has('PAYMENT_METHOD') ? '' : '✓'}
+        </legend>
         {checkout.paymentMethods.map((method) => (
           <label key={method.id} className="row">
             <input
@@ -232,7 +280,7 @@ export default function CheckoutPage() {
       </fieldset>
 
       <p>
-        Total:{' '}
+        {t.total}:{' '}
         <strong>
           <Money data={checkout.cost.total} />
         </strong>
@@ -248,7 +296,7 @@ export default function CheckoutPage() {
           })
         }
       >
-        Place order
+        {t.placeOrder}
       </button>
     </div>
   );

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

@@ -3,7 +3,8 @@ import { breadcrumbJsonLd, jsonLdScript, pageMeta } from '@magicstoreai/hydrogen
 import { CollectionView } from '@/components/analytics-views';
 import { Pager } from '@/components/pager';
 import { ProductGrid } from '@/components/product-grid';
-import { api, orNotFound } from '@/lib/api';
+import { api, locale, orNotFound } from '@/lib/api';
+import { messages } from '@/lib/i18n';
 
 type Props = { params: Promise<{ handle: string }>; searchParams: Promise<{ page?: string }> };
 
@@ -33,7 +34,7 @@ export default async function CollectionPage({ params, searchParams }: Props) {
         dangerouslySetInnerHTML={{
           __html: jsonLdScript(
             breadcrumbJsonLd([
-              { name: 'Home', url: '/' },
+              { name: messages(locale).home, url: '/' },
               { name: collection.title, url: `/collections/${collection.handle}` },
             ]),
           ),