diff --git a/.changeset/clean-cursors-paginate.md b/.changeset/clean-cursors-paginate.md new file mode 100644 index 0000000000..85b3448f32 --- /dev/null +++ b/.changeset/clean-cursors-paginate.md @@ -0,0 +1,5 @@ +--- +"@shopify/hydrogen": patch +--- + +Reset `before` and `after` pagination cursors when collection filters or sorting change. diff --git a/packages/hydrogen/skills/hydrogen-cart-drawer/SKILL.md b/packages/hydrogen/skills/hydrogen-cart-drawer/SKILL.md index 0f1dfd2d41..b019bbbf6b 100644 --- a/packages/hydrogen/skills/hydrogen-cart-drawer/SKILL.md +++ b/packages/hydrogen/skills/hydrogen-cart-drawer/SKILL.md @@ -81,7 +81,7 @@ Use a primitive library only when the app already depends on one for dialog-like ### Opening the drawer -The cart trigger renders in SSR as `Cart` so it works before hydration and without JavaScript (the anchor navigates to the full `/cart` page). After hydration, an `onClick` calls `e.preventDefault()` then `openCartDrawer()` (which calls `showModal()`), so the click opens the drawer instead of navigating; no `hasHydrated` swap is needed — the anchor is the no-JS baseline and the `onClick` is the enhancement. +Always render the cart trigger as a real `/cart` link so SSR and no-JS navigation reach the full cart page. After hydration, enhance normal activation to open the drawer instead of navigating. Preserve native link behavior for modified activation and new tabs. This is the same progressive-enhancement pattern used by client-side routers. Keep the drawer as hydrated progressive enhancement. Do not make the drawer itself the fallback route; the `/cart` page is that full-page fallback. @@ -165,14 +165,12 @@ function CartDrawer() { The drawer opens from three surfaces. The cart trigger is the canonical one; the other two reuse the same helper. -**1. The cart trigger.** A `/cart` anchor with an `onClick` that opens the drawer after hydration. It carries the accessibility attributes `aria-controls` and `aria-haspopup="dialog"`: +**1. The cart trigger.** Keep link semantics before and after hydration. Once hydrated, intercept only unmodified, same-context activation: prevent navigation and call `openCartDrawer()`. Modified activation (new tab, download, etc.) keeps native link behavior. When enhancement is active, add `aria-haspopup="dialog"`, `aria-controls`, and `aria-expanded`; keep `aria-expanded` synchronized with the drawer's open state. -```tsx -return ( - { e.preventDefault(); openCartDrawer(); }} aria-controls={CART_DRAWER_ID} aria-haspopup="dialog"> - Cart - -); +```text +without enhancement: Cart -> navigate to /cart +with enhancement: Cart -> open the drawer for normal activation +guard: modified activation (new tab, etc.) keeps native navigation ``` **2. `window.Shopify.actions.openCart()`** — the Standard Action for programmatic opening, so external code (Standard Actions tools, agents, third-party components) can open the drawer. Register the same stable DOM helper as the `openCart` handler (see §8 for the handler-permanence caveat). @@ -181,7 +179,7 @@ return ( window.Shopify.actions.openCart(); ``` -**3. From add-to-cart** — when the canonical cart trigger is an anchor, open the drawer immediately with optimistic state so pending cart contents remain inspectable. Opening only after success is compatible with the storefront contract only when the page also provides a visible button that opens the drawer while the mutation is pending. +**3. From add-to-cart** — open the drawer immediately with optimistic state so pending cart contents remain inspectable. Opening only after success is compatible with the storefront contract only when the page also provides a visible control that opens the drawer while the mutation is pending. ```tsx
@@ -217,8 +215,8 @@ See `references/css.md` for the reference drawer shell, entry/exit animation, ba After building the cart drawer, test: -- [ ] Cart trigger is a `/cart` anchor pre-hydration; after hydration its `onClick` opens the drawer via `showModal()` -- [ ] If a no-JS fallback is required, it navigates to `/cart` without JavaScript +- [ ] Cart trigger remains a `/cart` link; after hydration, normal activation opens the drawer +- [ ] Without JavaScript, the cart trigger navigates to `/cart` - [ ] `window.Shopify.actions.openCart()` opens drawer (test from browser console) - [ ] Drawer closes via Escape, backdrop click (with `closedby="any"`), and the close button - [ ] Focus returns to the cart icon after close diff --git a/packages/hydrogen/skills/hydrogen-collection-browser/SKILL.md b/packages/hydrogen/skills/hydrogen-collection-browser/SKILL.md index f3cc800d60..b947c30b24 100644 --- a/packages/hydrogen/skills/hydrogen-collection-browser/SKILL.md +++ b/packages/hydrogen/skills/hydrogen-collection-browser/SKILL.md @@ -33,7 +33,7 @@ Server data should include: - `dataSearch`: the exact search string used for the server query. - `products`: Storefront API product nodes shaped for the product card. - `availableFilters`: normalized filter metadata from `products.filters` or `search.productFilters`. -- Optional `totalCount` and `pageInfo` for search or pagination UI. +- Optional `totalCount` and cursor-complete `pageInfo` (`startCursor`, `endCursor`, `hasPreviousPage`, and `hasNextPage`) for search or pagination UI. Use `parseCollectionParams(searchParams)` before Storefront API queries. Pass parsed `filters`, `sortKey`, and `reverse` into `collection.products(...)` or `search(...)`. @@ -42,10 +42,14 @@ Use `parseCollectionParams(searchParams)` before Storefront API queries. Pass pa - Use the framework binding when a matching reference exists. Otherwise, use the core store directly. Do not hand-roll browse state with component state. - The browse form must carry both `method="get"` **and** an explicit `action` (the collection/search route URL, e.g. `action="/collections/shoes"` or the search route) so filters and sort degrade to a real GET submit without JavaScript. `formProps()` only wires the submit handler — it does not set `method` or `action` — so render both literally; the helper cannot infer the route. - Use `formProps()` on the browse form: spread it, then add the literal `method="get"` and `action`. On hydrated changes, call `form.requestSubmit()` for **checkboxes and ` + +``` + +## Progressive Pagination + +Query both cursor directions and all four page boundaries. Use `first` plus `after` for forward pages, and `last` plus `before` for previous pages. Return a normalized `browseSearch` containing only serialized filters and sort; use it as the accumulated product window's reset identity. + +Render the "Load previous" anchor immediately before the results list and the "Load more" anchor after it. Enhance ordinary hydrated clicks with `useFetcher().load(href)`. Forward pages append products and advance `endCursor` plus `hasNextPage`; previous pages prepend products and advance `startCursor` plus `hasPreviousPage`. Deduplicate by product ID. + +After merging a successful page, push its cursor URL with React Router's `navigate(..., {defaultShouldRevalidate: false, preventScrollReset: true})`. With React Router's default revalidation behavior, the URL changes without rerunning the loader or replacing the accumulated window. A route-level `shouldRevalidate` should return its supplied default for this pagination navigation. A reload or shared link starts at that cursor and renders the available previous/next links. + +After each successful load, focus the first added product link. Keep a persistent showing-count live region so assistive technology also announces the larger product count. While filters or sorting are pending, pause pagination controls until the loader's `browseSearch` matches the live serialized browse state. + +```tsx +const pagination = useFetcher(); +const navigate = useNavigate(); +const [productWindow, setProductWindow] = useState(() => ({ products, pageInfo })); + +useEffect(() => { + const page = pagination.data; + if ( + !page || + page.browseSearch !== loaderBrowseSearch || + page.browseSearch !== currentBrowseSearch + ) { + return; + } + + if (page.paginationError) { + setPaginationError(true); + return; + } + + const isPrevious = new URLSearchParams(page.dataSearch).has("before"); + + setProductWindow((current) => ({ + products: mergeUniqueProducts(current.products, page.products, isPrevious), + pageInfo: isPrevious + ? { + ...current.pageInfo, + startCursor: page.pageInfo.startCursor, + hasPreviousPage: page.pageInfo.hasPreviousPage, + } + : { + ...current.pageInfo, + endCursor: page.pageInfo.endCursor, + hasNextPage: page.pageInfo.hasNextPage, + }, + })); + + const shareableParams = new URLSearchParams(page.dataSearch); + shareableParams.delete("_pagination"); + void navigate( + { search: `?${shareableParams.toString()}` }, + { defaultShouldRevalidate: false, preventScrollReset: true }, + ); +}, [currentBrowseSearch, loaderBrowseSearch, navigate, pagination.data]); + + { + if (!isPlainLeftClick(event)) return; + event.preventDefault(); + if (pagination.state === "idle") pagination.load(`${nextPageUrl}&_pagination=1`); + }} +> + {pagination.state === "idle" ? "Load more" : "Loading products..."} +; +``` + +Set the collection page component's `key` from the loader's `browseSearch` so a completed filter or sort navigation creates a fresh product window. Rebase the window when authoritative loader products change under the same browse identity. Compare fetcher data against the live serialized browse state before merging so an older pagination response cannot add products after the buyer changes filters or sorting. + +For enhanced pagination requests, return a structured pagination error from the loader. Keep existing products rendered, announce the inline error with `role="alert"`, and preserve the cursor anchor as the retry control. Native anchor navigations continue to use the route's normal error boundary. + +## Links + +Use `` for active-filter chips and the clear-filter link so client navigation keeps the buyer's place in the product grid. `Link` still renders an anchor for the non-JavaScript fallback. diff --git a/packages/hydrogen/skills/hydrogen-collection-browser/references/react.md b/packages/hydrogen/skills/hydrogen-collection-browser/references/react.md index 4419ba3ef1..46198d2366 100644 --- a/packages/hydrogen/skills/hydrogen-collection-browser/references/react.md +++ b/packages/hydrogen/skills/hydrogen-collection-browser/references/react.md @@ -1,10 +1,13 @@ -# React And React Router +# React + +Shared React binding used by every React framework. Route-level wiring (loaders, navigation, hydrated pagination) is framework-specific: see `react-router.md` and `nextjs.md`. ## Contents -- Loader +- Server Data - Provider - Browse Form +- Pagination - Filters - Search Pages @@ -46,20 +49,26 @@ const SEARCH_SORT_OPTIONS = [ ]; ``` -## Loader +## Server Data -In a route loader, parse the current URL and query the Storefront API with the parsed browse state: +On the server, parse the request URL and query the Storefront API with the parsed browse state. This is plain server JavaScript — no framework types: ```ts -export async function loader({ context, params, request }: Route.LoaderArgs) { - const storefrontClient = context.get(storefrontClientContext); +async function queryCollectionBrowse(request: Request, storefrontClient: StorefrontClient, handle: string) { const url = new URL(request.url); const browse = parseCollectionParams(url.searchParams); + const browseSearch = serializeCollectionParams(browse).toString(); + const dataSearch = url.searchParams.toString(); + const before = url.searchParams.get("before") || undefined; + const after = before ? undefined : url.searchParams.get("after") || undefined; - const { data } = await storefrontClient.graphql(COLLECTION_QUERY, { + const { data, errors } = await storefrontClient.graphql(COLLECTION_QUERY, { variables: { - handle: params.handle, - first: 24, + handle, + first: before ? undefined : 24, + last: before ? 24 : undefined, + before, + after, filters: browse.filters.length > 0 ? (browse.filters as StorefrontApiProductFilter[]) : undefined, sortKey: browse.sortKey, @@ -67,51 +76,48 @@ export async function loader({ context, params, request }: Route.LoaderArgs) { }, }); - if (!data?.collection) throw new Response("Collection not found", { status: 404 }); + if (errors || !data?.collection) return null; return { collection: data.collection, products: data.collection.products.nodes, + pageInfo: data.collection.products.pageInfo, availableFilters: data.collection.products.filters, - dataSearch: url.searchParams.toString(), + browseSearch, + dataSearch, }; } ``` -Keep `dataSearch` exactly aligned with the query used for the server data. +The framework route handler calls this and turns `null` into its own not-found or error response (see the framework references). + +Keep `dataSearch` exactly aligned with the query used for the server data. Query `startCursor`, `endCursor`, `hasPreviousPage`, and `hasNextPage` in `pageInfo`. ## Provider -Wrap the browse UI in `CollectionProvider` and let it own filter/sort intent: +Wrap the browse UI in `CollectionProvider` and let it own filter/sort intent. The provider contract is framework-neutral: -```tsx -export default function CollectionRoute({ loaderData }: Route.ComponentProps) { - const navigate = useNavigate(); - const [searchParams] = useSearchParams(); +- `data.handle`: the collection handle (or `search:${term}` for search pages). +- `data.dataSearch`: the exact search string used for the loaded server data. +- `urlSearch`: the live browser URL search string; it can be ahead of `dataSearch` during transitions. +- `onChange(search)`: navigate to the new search string with the framework's client router — replace history when params already exist, and preserve the current scroll position. - return ( - - navigate( - { search }, - { - replace: searchParams.size > 0, - preventScrollReset: true, - }, - ) - } - > - - - ); -} +```tsx + { + // Navigate with the framework's client router (see react-router.md / nextjs.md): + // replace history when params already exist, preserve scroll position. + }} +> + + ``` ## Browse Form -Inside the browse UI: +Inside a collection browse UI: ```tsx function CollectionPage({ availableFilters, products }: Props) { @@ -124,29 +130,64 @@ function CollectionPage({ availableFilters, products }: Props) { - - +
+ + +
); } +function FilterSidebar(props: FilterSidebarProps) { + return ( + + ); +} + function requestFormSubmit(event: React.ChangeEvent) { event.currentTarget.form?.requestSubmit(); } ``` -Pass `method="get"` and an explicit `action={collectionPath}` (the current `/collections/:handle` or `/search` route URL) literally — `formProps()` only wires the submit handler (see the SKILL.md UI rule). +Pass `method="get"` and an explicit `action={collectionPath}` (the current `/collections/:handle` route URL) literally — `formProps()` only wires the submit handler (see the SKILL.md UI rule). Render the filter sidebar, sorting, product grid, and pagination within this browse form so every browse control participates in the same GET submission. + +Render the filter sidebar unconditionally — an empty filter list is fine. Place a `noscript` submit button labeled "Apply filters" immediately after the filter sidebar heading; it doubles as the no-JS submit control for sorting. + +This structure preserves no-JS filtering and sorting while keeping the form focused on browse controls. Use uncontrolled form controls. When a route needs to remount checkboxes after external navigation, put `key={serializeCollectionParams({ filters: state.filters, sortKey: undefined, reverse: false }).toString()}` on the filter subtree (for search, include the term in the key) — keyed by serialized **filter state**, not the live URL. The URL clears before the `CollectionProvider` reconciler settles `state.filters`, so a URL-keyed remount bakes in stale `defaultChecked`. This resets checkbox DOM state without coupling active filter chips to the form remount. +Keep all collection filter controls enabled while `state.status === "loading"`. Apply pending styles to numeric metadata that describes the pending results, including the displayed result count and the available-item count beside each filter value. Pass the loading state as a separate `countPending` prop for filter counts. + +Use a persistent, visually hidden status region to announce that product and filter counts are updating. The refreshed displayed count remains a polite live region. + +Keep the collection sort select enabled and visually unchanged while loading; its options and selected value remain current while product data refreshes. + +## Pagination + +Render pagination as native GET links carrying `before` or `after` cursors, per the SKILL.md UI rules. The hydrated enhancement is framework-specific: `react-router.md` documents an accumulated product window driven by `useFetcher`, and `nextjs.md` documents cursor links with a server refresh. + ## Filters For each Storefront `FilterValue`, treat `value.input` as the canonical JSON-encoded `ProductFilter`. Convert it to checkbox params by parsing the JSON, wrapping it in the minimal collection state shape, and calling `serializeCollectionParams(...)`. Use Hydrogen helpers for active checks: @@ -166,25 +207,31 @@ function filterValueInputParamEntries(input: string): Array<{ name: string; valu ); } -function FilterValueInput({ activeFilters, filter, value }: Props) { +function FilterValueInput({ activeFilters, countPending, filter, value }: Props) { const entries = filterValueInputParamEntries(value.input); if (entries.length !== 1) return null; const [{ name, value: paramValue }] = entries; return ( - { - if (isMutuallyExclusive(filter) && event.currentTarget.checked) { - uncheckSiblings(event.currentTarget); - } - requestFormSubmit(event); - }} - /> + ); } ``` @@ -199,14 +246,12 @@ function ActiveFilterChip({ collectionPath, filter, state }: Props) { const removal = getFilterRemovalUrl(currentParams, filter); const href = removal === "?" ? collectionPath : `${collectionPath}${removal}`; - return ( - - {describeFilter(filter)} - - ); + return {describeFilter(filter)}; } ``` +Render chips and the clear-filter link as real anchors for the non-JavaScript fallback. When hydrated, use the framework's scroll-preserving client navigation (see the framework references) so removal keeps the buyer's place in the product grid. + When passing `browse.filters` into a `gql()` query variable typed from Storefront API introspection, match the app's established pattern. The Hydrogen examples cast the parsed filters to the generated Storefront API `ProductFilter` type at the query variable boundary: ```ts @@ -227,8 +272,10 @@ Use the same binding with a synthetic handle: ```tsx navigate({ search }, { replace: searchParams.size > 0 })} + urlSearch={urlSearch} + onChange={(search) => { + // Same navigation contract as the Provider section. + }} > diff --git a/packages/hydrogen/skills/hydrogen-setup/steps/4-collection-and-search.md b/packages/hydrogen/skills/hydrogen-setup/steps/4-collection-and-search.md index 4cb1824a64..c24af20d04 100644 --- a/packages/hydrogen/skills/hydrogen-setup/steps/4-collection-and-search.md +++ b/packages/hydrogen/skills/hydrogen-setup/steps/4-collection-and-search.md @@ -5,9 +5,15 @@ Invoke the `hydrogen-collection-browser` skill when adding collection routes, se ## Continue when - [ ] Filtering and sorting update the URL without scroll reset when hydrated. +- [ ] All stale numeric result metadata shows pending styles while collection filter controls remain interactive (for example, result totals and available-item counts). +- [ ] The collection sort select remains interactive and visually unchanged while loading. - [ ] Reloading the filtered URL server-renders the same filtered state. - [ ] With JavaScript disabled, checking filters and submitting the form loads the filtered URL. - [ ] With JavaScript disabled, the load-more / pagination link loads the next page server-side. -- [ ] Active filter chips remove only one filter and preserve unrelated params. +- [ ] With JavaScript enabled, Load more appends products to the current collection results. +- [ ] Hydrated pagination updates the shareable cursor URL while retaining accumulated products. +- [ ] Load previous appears before the collection results; Load more appears after them. +- [ ] Filtering or sorting from a cursor URL starts from the first page without `before` or `after`. +- [ ] Active filter chips remove only one filter, preserve unrelated params, and do not reset scroll when hydrated. - [ ] Searching with a search term does not erase the search term (preserves `q` search param). -- [ ] Back/forward navigation settles loading state. \ No newline at end of file +- [ ] Back/forward navigation settles loading state. diff --git a/packages/hydrogen/skills/hydrogen-setup/steps/6-product-detail-page.md b/packages/hydrogen/skills/hydrogen-setup/steps/6-product-detail-page.md index a84efb08e5..8e8df5dee1 100644 --- a/packages/hydrogen/skills/hydrogen-setup/steps/6-product-detail-page.md +++ b/packages/hydrogen/skills/hydrogen-setup/steps/6-product-detail-page.md @@ -186,7 +186,7 @@ if (!data?.product) { ## UI - You must invoke the `hydrogen-variant-form` skill for option controls, add-to-cart form structure, URL selection, combined listings, price display, disabled states, sold-out states, cart error display, and user acceptance tests. Do not duplicate its rules or invent separate variant matrix logic. -- When the cart drawer is configured with the canonical anchor trigger, follow the `hydrogen-cart-drawer` skill's guidance and open optimistic state via `formProps({ beforeSubmit: openCartDrawer })`; the samples below use `beforeSubmit`. +- When the cart drawer is configured, follow the `hydrogen-cart-drawer` skill's trigger guidance and open optimistic state via `formProps({ beforeSubmit: openCartDrawer })`; the samples below use `beforeSubmit`. - Product route loaders and server helpers may read env indirectly through server-only client/config modules. Product client components must not read `process.env`, `import.meta.env`, or framework env modules. ### React diff --git a/packages/hydrogen/skills/hydrogen-setup/steps/8-cart-drawer-and-navbar.md b/packages/hydrogen/skills/hydrogen-setup/steps/8-cart-drawer-and-navbar.md index abda225a8a..4663ae8a9c 100644 --- a/packages/hydrogen/skills/hydrogen-setup/steps/8-cart-drawer-and-navbar.md +++ b/packages/hydrogen/skills/hydrogen-setup/steps/8-cart-drawer-and-navbar.md @@ -23,7 +23,7 @@ Create or update the shared site navigation. Do this after the cart drawer, so t - Preserve the app's existing layout component and styling conventions. Do not remove existing navigation items unless they directly conflict with the setup. - Ensure a home link exists, if not, make one and point to `/`. - Every navbar link must resolve: the route must exist in the app, and dynamic destinations (collection or page handles) must exist in the shop. Do not invent handles. In particular, do not link to `/collections/all` — the "all" collection is a Liquid storefront convention with no Storefront API equivalent; `collection(handle: "all")` returns null and the route 404s unless the merchant explicitly created a collection with that handle. For a browse-everything destination link to the `/collections` listing route or `/search`; for specific collections use handles returned by the Storefront API (e.g. from the home page collections query). -- The cart trigger is a `/cart` anchor that opens the drawer via `showModal()` after hydration; follow the `hydrogen-cart-drawer` skill for the markup. +- The cart trigger remains a real `/cart` link and follows the `hydrogen-cart-drawer` skill's progressive-enhancement contract after hydration. - Make `/cart` reachable as a real link in the **footer** (site chrome). `/cart` is the full-page fallback when the cart drawer is unavailable. For strict no-JS live cart HTML, the cart route must receive resolved cart `initialData`. - Use the framework's native link component when one is already used in the app. - Keep the navbar server-renderable unless the app already uses a client-only navigation shell. diff --git a/packages/hydrogen/skills/hydrogen-smoke-test/SKILL.md b/packages/hydrogen/skills/hydrogen-smoke-test/SKILL.md index ef09d20f6d..60ace2fce9 100644 --- a/packages/hydrogen/skills/hydrogen-smoke-test/SKILL.md +++ b/packages/hydrogen/skills/hydrogen-smoke-test/SKILL.md @@ -45,7 +45,7 @@ Product page: Cart: - [ ] /cart works without JavaScript and is reachable via a real /cart link in the footer -- [ ] Header cart trigger is a `/cart` anchor that opens the drawer via `showModal()` after hydration +- [ ] Header cart trigger remains a `/cart` link and opens the drawer on normal activation after hydration - [ ] window.Shopify.actions.openCart() opens the drawer after Standard Actions loads - [ ] A mutation driven through the real Add to cart UI or framework cart action issues `Set-Cookie` and propagates expected response headers - [ ] Add-to-cart can open the drawer after a successful submit when the product UX chooses that behavior @@ -58,7 +58,7 @@ Cart: Collection and search: - [ ] Collection filters and sort update the URL and product grid - [ ] Reloading a filtered URL server-renders the same filter/sort state -- [ ] Active filter chips remove one filter and preserve unrelated params +- [ ] Active filter chips remove one filter, preserve unrelated params, and do not reset scroll when hydrated - [ ] Search filters preserve q - [ ] JavaScript-disabled filter forms still submit with GET - [ ] Back/forward navigation does not leave browse state stuck in loading @@ -159,7 +159,7 @@ Expected: a redirect whose `location` header points at Shopify's hosted login, n ## Cart - `/cart` works without JavaScript and is reachable via a real `/cart` link in the footer. -- The header cart trigger is a `/cart` anchor that opens the drawer via `showModal()` after hydration. +- The header cart trigger remains a `/cart` link and opens the drawer on normal activation after hydration. - `window.Shopify.actions.openCart()` opens the drawer after Standard Actions loads. - Exercise a mutation through the real Add to cart UI or the framework's cart action. Do not hand-craft an internal Hydrogen cart payload. Confirm the response issues the expected cart or session `Set-Cookie` and propagates the @@ -177,7 +177,7 @@ Expected: a redirect whose `location` header points at Shopify's hosted login, n - Collection filters and sort update the URL and product grid. - Reloading a filtered URL server-renders the same filter/sort state. -- Active filter chips remove one filter and preserve unrelated params. +- Active filter chips remove one filter, preserve unrelated params, and do not reset scroll when hydrated. - Search filters preserve `q`. - JavaScript-disabled filter forms still submit with GET. - Back/forward navigation does not leave browse state stuck in loading. diff --git a/packages/hydrogen/src/core/collection/__tests__/url.test.ts b/packages/hydrogen/src/core/collection/__tests__/url.test.ts index 5a4ffd81a4..e6480c0240 100644 --- a/packages/hydrogen/src/core/collection/__tests__/url.test.ts +++ b/packages/hydrogen/src/core/collection/__tests__/url.test.ts @@ -707,7 +707,9 @@ describe("collectionSearchEqual", () => { describe("mergeCollectionParams", () => { it("replaces store-owned keys while preserving others", () => { - const existing = new URLSearchParams("grid=3&filter.p.tag=men&sort_by=price-ascending"); + const existing = new URLSearchParams( + "grid=3&before=previous&after=next&filter.p.tag=men&sort_by=price-ascending", + ); const merged = mergeCollectionParams(existing, { filters: [{ tag: "women" }], @@ -719,6 +721,8 @@ describe("mergeCollectionParams", () => { expect(merged.get("filter.p.tag")).toBe("women"); expect(merged.get("sort_by")).toBe("title-descending"); expect(merged.getAll("filter.p.tag")).not.toContain("men"); + expect(merged.has("before")).toBe(false); + expect(merged.has("after")).toBe(false); }); }); diff --git a/packages/hydrogen/src/core/collection/url.ts b/packages/hydrogen/src/core/collection/url.ts index 12bd62bb84..0d36b1833a 100644 --- a/packages/hydrogen/src/core/collection/url.ts +++ b/packages/hydrogen/src/core/collection/url.ts @@ -15,6 +15,9 @@ export interface CollectionParams { const SORT_BY_DESCENDING_SUFFIX = "-descending"; const SORT_BY_ASCENDING_SUFFIX = "-ascending"; +/** Storefront API pagination cursor params cleared when browse intent changes. */ +const PAGINATION_CURSOR_PARAMS: readonly string[] = ["before", "after"]; + const SORT_KEY_TO_SORT_BY: Record = { BEST_SELLING: "best-selling", CREATED: "created", @@ -97,7 +100,9 @@ export function normalizeCollectionSearch(search: string): string { /** * Merges store-owned params from `state` into `existing`, preserving - * non-store keys (e.g. `grid`, `view`) already present in the URL. + * unrelated keys (e.g. `grid`, `view`) already present in the URL. Collection + * pagination cursors (`before`, `after`) are cleared so changed browse intent + * starts from the first page. */ export function mergeCollectionParams( existing: URLSearchParams, @@ -106,7 +111,7 @@ export function mergeCollectionParams( const merged = new URLSearchParams(existing); for (const key of Array.from(merged.keys())) { - if (isStoreOwnedParam(key)) { + if (isStoreOwnedParam(key) || PAGINATION_CURSOR_PARAMS.includes(key)) { merged.delete(key); } } diff --git a/packages/storefront-e2e/specs/cart/cart.spec.ts b/packages/storefront-e2e/specs/cart/cart.spec.ts index ec970275d4..ca7abb82a8 100644 --- a/packages/storefront-e2e/specs/cart/cart.spec.ts +++ b/packages/storefront-e2e/specs/cart/cart.spec.ts @@ -255,7 +255,12 @@ async function openCartOverlayFor(page: Page, productTitle: string): Promise false)) return line; - await page.getByRole("button", { name: CART_CONTROL_NAME }).first().click(); + // The cart trigger may be a + + + {/* Applied discount codes — each removal is its own form. Empty/ + falsy codes are filtered out so an empty apply never renders a + blank pill or collides on a `""` React key. */} + {discountCodes + .filter((code) => code.code) + .map((code, index) => ( +
+ + {code.code} + +
+ ))} + + {/* Estimated total */} +
+ + {content.cart.totalLabel} + {isPending ? : null} + + + {formatPrice(subtotal)} + +
+

+ {content.cart.taxesAndShippingAtCheckout} +

+ + + + )} + + ); +} + +function CartStatus({ + isPending, + networkErrors, +}: { + isPending: boolean; + networkErrors: readonly { message: string }[]; +}) { + const message = useCartStatusMessage(isPending, networkErrors.length > 0); + return ( + <> + + {message} + + {networkErrors.length > 0 ? ( +
+ {networkErrors.map((error, index) => ( +

{error.message}

+ ))} +
+ ) : null} + + ); +} + +function useCartStatusMessage(isPending: boolean, hasNetworkErrors: boolean): string { + const [sawPending, setSawPending] = useState(false); + + useEffect(() => { + if (isPending) setSawPending(true); + }, [isPending]); + + if (isPending) return "Updating cart totals"; + if (sawPending && !hasNetworkErrors) return "Cart totals updated"; + return ""; +} diff --git a/templates/react-router/app/components/CartDrawer.tsx b/templates/react-router/app/components/CartDrawer.tsx index eb94436eb1..57c2fc8d43 100644 --- a/templates/react-router/app/components/CartDrawer.tsx +++ b/templates/react-router/app/components/CartDrawer.tsx @@ -1,296 +1,92 @@ -import { useEffect, useMemo, useState } from "react"; -import { Link } from "react-router"; - -import { useCart, useCartForm } from "~/lib/cart"; -import { closeCartDrawer, configureOpenCartAction, CART_DRAWER_ID } from "~/lib/cart-drawer"; -import { formatPrice } from "~/lib/money"; - -import { publishCartViewed } from "./AnalyticsTrackers"; +import { Suspense } from "react"; + +import { useSuspenseCart } from "~/lib/cart"; +import { CART_DRAWER_ID, closeCartDrawer, configureOpenCartAction } from "~/lib/cart-drawer"; +import { content } from "~/lib/content"; + +import { CartContent } from "./CartContent"; + +/** + * Cart drawer — a native `` + `showModal()` rendered once in the root + * layout (`hydrogen-cart-drawer` skill). Opens via `openCartDrawer()`, + * `window.Shopify.actions.openCart()`, or after a successful add-to-cart. The + * `/cart` route is the no-JS fallback (F4). Uses fixed header/body/footer + * zones; the body scrolls, the footer is hidden when the cart is empty. + * + * The inner content suspends on the deferred cart seed so server HTML and + * hydration render from the same resolved cart. + */ +export function CartDrawer() { + // Ensure the Standard Actions `openCart` handler is registered on the client. + configureOpenCartAction(); -function CartErrorBanner() { - const errors = useCart((state) => state.errors); - const [dismissedAt, setDismissedAt] = useState(0); - const messages = useMemo(() => { - const lines = [...errors.lines.values()].flatMap((group) => group.userErrors); - return [...errors.network, ...errors.cart.userErrors, ...lines].map((error) => error.message); - }, [errors]); + return ( + + + Loading cart… +

+ } + > + + + + ); +} - if (messages.length === 0 || errors.lastUpdatedAt <= dismissedAt) return null; +function CartDrawerInner() { + const totalQuantity = useSuspenseCart((state) => state.data.totalQuantity); + const checkoutUrl = useSuspenseCart((state) => state.data.checkoutUrl); + const isEmpty = totalQuantity === 0; return ( -
-
-
- {messages.map((message) => ( -

- {message} -

- ))} +
+
+
+

+ {content.cart.title}{" "} + + {totalQuantity} {totalQuantity === 1 ? "item" : "items"} + +

-
-
- ); -} - -function hasPendingCost(pending: { - cost?: boolean; - discountCodes: Set; - lines: Set; -}): boolean { - return pending.cost ?? (pending.lines.size > 0 || pending.discountCodes.size > 0); -} - -function useCartStatusMessage(): string { - const pending = useCart((state) => state.pending); - const revalidating = useCart((state) => "revalidating" in state && state.revalidating === true); - const networkErrors = useCart((state) => state.errors.network); - const isPending = hasPendingCost(pending) || revalidating; - const [sawPending, setSawPending] = useState(false); - - useEffect(() => { - if (isPending) setSawPending(true); - }, [isPending]); - - if (isPending) return "Updating cart totals"; - if (sawPending && networkErrors.length === 0) return "Cart totals updated"; - return ""; -} - -type CartLineView = { - id: string; - quantity: number; - cost: { totalAmount: { amount: string; currencyCode: string } }; - merchandise?: { - title?: string | null; - selectedOptions?: Array<{ name: string; value: string }> | null; - image?: { url: string; altText?: string | null } | null; - product?: { title?: string | null; handle?: string | null } | null; - } | null; -}; - -export function CartLineItem({ line }: { line: CartLineView }) { - const { formProps, register } = useCartForm(); - const pendingLines = useCart((state) => state.pending.lines); - const lineError = useCart((state) => state.errors.lines.get(line.id)); - const merchandise = line.merchandise; - const product = merchandise?.product; - const pending = pendingLines.has(line.id); - const optionText = merchandise?.selectedOptions - ?.map((option: { name: string; value: string }) => option.value) - .join(" / "); - const errorId = `cart-line-error-${line.id.replace(/[^a-zA-Z0-9_-]/g, "-")}`; - - return ( -
  • -
    - {merchandise?.image ? ( - ) : null} -
    -
    -

    - {product?.handle ? ( - - {product.title ?? merchandise?.title ?? "Product"} - - ) : ( - (product?.title ?? merchandise?.title ?? "Product") - )} -

    - {optionText ?

    {optionText}

    : null} -

    - {formatPrice(line.cost.totalAmount)} -

    -
    - - - -
    - - - {lineError?.userErrors.length ? ( - - ) : null} +
    • - - ); -} -function CartLines() { - const loading = useCart((state) => state.loading); - const lines = useCart((state) => state.data.lines.nodes); - - if (loading) { - return

    Loading cart…

    ; - } - - if (lines.length === 0) { - return ( -
    -

    Your cart is empty.

    -

    - Looks like you haven't added anything to your cart yet. -

    +
    +
    - ); - } - - return ( -
      - {lines.map((line) => ( - - ))} -
    - ); -} - -function CartFooter() { - const cart = useCart((state) => state.data); - const pending = useCart((state) => state.pending); - const revalidating = useCart((state) => "revalidating" in state && state.revalidating === true); - const hasLines = cart.lines.nodes.length > 0; - const isPending = hasPendingCost(pending) || revalidating; - if (!hasLines) return null; - - return ( -
    -
    -
    - - Estimated total - {isPending ? : null} - - - {formatPrice(cart.cost.totalAmount)} - -
    -

    - Taxes and shipping calculated at checkout -

    - {cart.checkoutUrl ? ( + {!isEmpty && checkoutUrl ? ( + -
    - ); -} - -export function CartDrawer() { - const totalQuantity = useCart((state) => state.data.totalQuantity); - const cart = useCart((state) => state.data); - const statusMessage = useCartStatusMessage(); - - useEffect(() => { - configureOpenCartAction(); - const dialog = document.getElementById(CART_DRAWER_ID); - if (!(dialog instanceof HTMLDialogElement)) return; - const handleToggle = () => { - if (dialog.open) publishCartViewed(cart); - }; - dialog.addEventListener("toggle", handleToggle); - return () => dialog.removeEventListener("toggle", handleToggle); - }, [cart]); - - return ( - <> - - {statusMessage} - - -
    -
    -
    -

    - Cart -

    - {totalQuantity} -
    - -
    - -
    - -
    -
    -     - + ) : null} +
    ); } diff --git a/templates/react-router/app/components/CartLineItem.tsx b/templates/react-router/app/components/CartLineItem.tsx new file mode 100644 index 0000000000..5ffd646c78 --- /dev/null +++ b/templates/react-router/app/components/CartLineItem.tsx @@ -0,0 +1,214 @@ +import type { Ref } from "react"; + +import { useCart, useCartForm } from "~/lib/cart"; +import { shopifyImageUrl } from "~/lib/image"; +import { formatPrice } from "~/lib/money"; + +/** + * A cart line, derived from the typed `useCart` binding (F3: consume typed data, + * no hand-rolled parallel shape). Narrowed field access stays tolerant of the + * gql.tada-inferred merchandise union via optional chaining + * (`hydrogen-cart-ui` / `references/react.md`). + */ +type CartState = Parameters[0]>[0]; +type CartLine = CartState["data"]["lines"]["nodes"][number]; + +/** + * Shared cart line-item form — used by both the cart drawer and the `/cart` + * page (`hydrogen-cart-ui` / `hydrogen-cart-drawer`). Preserves the + * progressive-enhancement form contract: hidden `register("set")`, scoped + * `register("lineId", { value })`, and a real editable quantity input from + * `register("quantity", { value, interactive: true })`. Increase/decrease/remove + * are additional submit controls, not replacements. + */ +export function CartLineItem({ + line, + removeControlRef, + onRemoveSubmit, +}: { + line: CartLine; + removeControlRef: Ref; + onRemoveSubmit: () => void; +}) { + const { formProps, register } = useCartForm(); + const pendingLines = useCart((state) => state.pending.lines); + const isPending = pendingLines.has(line.id); + const { + merchandise, + productTitle, + productHandle, + variantSubtitle, + amountPerQuantity, + compareAt, + } = getCartLineDisplay(line); + + return ( +
    + + +
    + + {variantSubtitle ? ( +

    {variantSubtitle}

    + ) : null} + + +
    + + + +
    + +
    + +
    + + +
    +
    + ); +} + +function getCartLineDisplay(line: CartLine) { + const merchandise = line.merchandise; + const productTitle = merchandise?.product?.title ?? merchandise?.title ?? "Product"; + const selectedOptions = merchandise?.selectedOptions ?? []; + + return { + merchandise, + productTitle, + productHandle: merchandise?.product?.handle, + variantSubtitle: selectedOptions.map((option) => option.value).join(" / "), + amountPerQuantity: line.cost.amountPerQuantity, + compareAt: line.cost.compareAtAmountPerQuantity ?? null, + }; +} + +function CartLineImage({ + merchandise, + productTitle, + variantSubtitle, +}: { + merchandise: CartLine["merchandise"]; + productTitle: string; + variantSubtitle: string; +}) { + const image = merchandise?.image; + const fallbackAlt = variantSubtitle ? `${productTitle} in ${variantSubtitle}` : productTitle; + + return ( +
    + {image ? ( + {image.altText + ) : null} +
    + ); +} + +function CartLineTitle({ + productHandle, + productTitle, +}: { + productHandle?: string | null; + productTitle: string; +}) { + if (!productHandle) { + return

    {productTitle}

    ; + } + + return ( + + {productTitle} + + ); +} + +function CartLinePrice({ + amountPerQuantity, + compareAt, + isPending, +}: { + amountPerQuantity: CartLine["cost"]["amountPerQuantity"]; + compareAt: CartLine["cost"]["compareAtAmountPerQuantity"] | null; + isPending: boolean; +}) { + const onSale = compareAt != null && Number(compareAt.amount) > Number(amountPerQuantity.amount); + + return ( +

    + {onSale ? Sale price: : null} + + {formatPrice(amountPerQuantity)} + + each + {onSale && compareAt ? ( + <> + ; original price: {" "} + {formatPrice(compareAt)} + each + + ) : null} +

    + ); +} diff --git a/templates/react-router/app/components/CollectionBrowse.tsx b/templates/react-router/app/components/CollectionBrowse.tsx deleted file mode 100644 index 4bb2dfc3e3..0000000000 --- a/templates/react-router/app/components/CollectionBrowse.tsx +++ /dev/null @@ -1,710 +0,0 @@ -import { - getFilterRemovalUrl, - getSortByValue, - isFilterInputActive, - serializeCollectionParams, - type CollectionState, - type MoneyV2, - type ProductFilter, -} from "@shopify/hydrogen"; -import { useCollection, useCollectionForm } from "@shopify/hydrogen/react"; -import { useEffect, useId, useRef, useState, type CSSProperties, type ReactNode } from "react"; -import { Link, useFetcher, useLocation } from "react-router"; - -import { formatPrice } from "~/lib/money"; - -export type SortOption = { - label: string; - value: string; -}; - -export const COLLECTION_SORT_OPTIONS: SortOption[] = [ - { label: "Featured", value: getSortByValue("COLLECTION_DEFAULT", false) }, - { label: "Best selling", value: getSortByValue("BEST_SELLING", false) }, - { label: "Alphabetically, A–Z", value: getSortByValue("TITLE", false) }, - { label: "Alphabetically, Z–A", value: getSortByValue("TITLE", true) }, - { label: "Price, low to high", value: getSortByValue("PRICE", false) }, - { label: "Price, high to low", value: getSortByValue("PRICE", true) }, - { label: "Date, old to new", value: getSortByValue("CREATED", false) }, - { label: "Date, new to old", value: getSortByValue("CREATED", true) }, -]; - -export const SEARCH_SORT_OPTIONS: SortOption[] = [ - { label: "Relevance", value: getSortByValue("RELEVANCE", false) }, - { label: "Price, low to high", value: getSortByValue("PRICE", false) }, - { label: "Price, high to low", value: getSortByValue("PRICE", true) }, -]; - -export type BrowseFilterValue = { - id: string; - label: string; - count: number; - input?: string | null; - swatch?: { - color?: string | null; - image?: { - previewImage?: { - url?: string | null; - altText?: string | null; - } | null; - } | null; - } | null; -}; - -export type BrowseFilter = { - id: string; - label: string; - type?: string | null; - presentation?: string | null; - values: readonly BrowseFilterValue[]; -}; - -export type BrowsePageInfo = { - hasNextPage: boolean; - endCursor?: string | null; -}; - -type LoadMoreResponse = { - products: readonly T[]; - pageInfo: BrowsePageInfo; - dataSearch: string; -}; - -const FILTER_DRAWER_ID = "collection-filter-drawer"; -const PRICE_MIN_PARAM = "filter.v.price.gte"; -const PRICE_MAX_PARAM = "filter.v.price.lte"; - -function supportsDialogCommands(): boolean { - if (typeof HTMLButtonElement === "undefined") return false; - return ( - "command" in HTMLButtonElement.prototype && "commandForElement" in HTMLButtonElement.prototype - ); -} - -function openDialogFallback(id: string): void { - if (supportsDialogCommands() || typeof document === "undefined") return; - const dialog = document.getElementById(id); - if (dialog instanceof HTMLDialogElement && !dialog.open) dialog.showModal(); -} - -function closeDialog(id: string): void { - if (typeof document === "undefined") return; - const dialog = document.getElementById(id); - if (dialog instanceof HTMLDialogElement) dialog.close(); -} - -function requestFormSubmit(event: React.ChangeEvent) { - event.currentTarget.form?.requestSubmit(); -} - -function currentSortValue(state: CollectionState): string | undefined { - return state.sortKey ? getSortByValue(state.sortKey, state.reverse) : undefined; -} - -function filterValueInputParamEntries(input: string): Array<{ name: string; value: string }> { - let filter: ProductFilter; - try { - filter = JSON.parse(input) as ProductFilter; - } catch { - return []; - } - - return Array.from( - serializeCollectionParams({ filters: [filter], sortKey: undefined, reverse: false }), - ([name, value]) => ({ name, value }), - ); -} - -function hiddenInputsFromParams(params: URLSearchParams, exclude = new Set()) { - return Array.from(params).flatMap(([name, value], index) => { - if (exclude.has(name)) return []; - return ; - }); -} - -function activeFilterParams(state: CollectionState) { - return serializeCollectionParams({ filters: state.filters, sortKey: undefined, reverse: false }); -} - -function buildPathWithRemoval(basePath: string, removal: string): string { - if (removal === "?") return basePath; - - const [pathname, existingSearch = ""] = basePath.split("?"); - const params = new URLSearchParams(existingSearch); - const removalParams = new URLSearchParams(removal.startsWith("?") ? removal.slice(1) : removal); - - for (const [name, value] of removalParams) params.append(name, value); - - const search = params.toString(); - return search ? `${pathname}?${search}` : pathname; -} - -function priceFilter(state: CollectionState) { - return state.filters.find((filter) => filter.price != null)?.price; -} - -function money(amount: number, currencyCode: string): MoneyV2 { - return { amount: String(amount), currencyCode }; -} - -function describeFilter(filter: ProductFilter, currencyCode: string): string { - if (filter.available != null) return filter.available ? "In stock" : "Out of stock"; - if (filter.productType) return filter.productType; - if (filter.productVendor) return filter.productVendor; - if (filter.tag) return filter.tag; - if (filter.variantOption) return filter.variantOption.value ?? filter.variantOption.name; - if (filter.productMetafield) return filter.productMetafield.value ?? filter.productMetafield.key; - if (filter.variantMetafield) return filter.variantMetafield.value ?? filter.variantMetafield.key; - if (filter.taxonomyMetafield) return filter.taxonomyMetafield.value; - if (filter.category) return filter.category.id; - if (filter.price) { - const min = filter.price.min; - const max = filter.price.max; - if (min != null && max != null) { - return `${formatPrice(money(min, currencyCode))} – ${formatPrice(money(max, currencyCode))}`; - } - if (min != null) return `From ${formatPrice(money(min, currencyCode))}`; - if (max != null) return `Up to ${formatPrice(money(max, currencyCode))}`; - } - return "Filter"; -} - -function activeValueCount(filter: BrowseFilter, state: CollectionState): number { - if (filter.type === "PRICE_RANGE") return priceFilter(state) ? 1 : 0; - return filter.values.filter( - (value) => value.input && isFilterInputActive(state.filters, value.input), - ).length; -} - -function isSwatchFilter(filter: BrowseFilter): boolean { - return ( - filter.presentation === "SWATCH" || - filter.values.some((value) => value.swatch?.color || value.swatch?.image?.previewImage?.url) - ); -} - -function isMutuallyExclusive(filter: BrowseFilter, inputName: string): boolean { - return filter.type === "BOOLEAN" || inputName === "filter.v.availability"; -} - -function uncheckSiblings(input: HTMLInputElement) { - const form = input.form; - if (!form) return; - for (const candidate of form.querySelectorAll('input[type="checkbox"]')) { - if (candidate !== input && candidate.name === input.name) candidate.checked = false; - } -} - -function CheckIcon() { - return ( - - ); -} - -function FacetGroup({ - filter, - children, - state, -}: { - filter: BrowseFilter; - children: ReactNode; - state: CollectionState; -}) { - const selectedCount = activeValueCount(filter, state); - - return ( -
    - - - {filter.label} - {selectedCount > 0 ? ( - <> - - - {selectedCount} {selectedCount === 1 ? "selected" : "selected"} - - - ) : null} - - - -
    {children}
    -
    - ); -} - -function ListFacet({ filter, state }: { filter: BrowseFilter; state: CollectionState }) { - const values = filter.values.flatMap((value) => { - if (!value.input) return []; - const entries = filterValueInputParamEntries(value.input); - if (entries.length !== 1) return []; - const [{ name, value: paramValue }] = entries; - const isActive = isFilterInputActive(state.filters, value.input); - - return ( -
  • - -
    • - ); - }); - - if (values.length === 0) return null; - - return ( -
    - {filter.label} -
      {values}
    -
    - ); -} - -function PriceRangeFacet({ state }: { state: CollectionState }) { - const timer = useRef | null>(null); - const idPrefix = useId(); - const minId = `${idPrefix}-price-gte`; - const maxId = `${idPrefix}-price-lte`; - const activePrice = priceFilter(state); - - useEffect(() => { - return () => { - if (timer.current) clearTimeout(timer.current); - }; - }, []); - - return ( -
    -
    - - { - if (timer.current) clearTimeout(timer.current); - const form = event.currentTarget.form; - timer.current = setTimeout(() => form?.requestSubmit(), 350); - }} - /> -
    - to -
    - - { - if (timer.current) clearTimeout(timer.current); - const form = event.currentTarget.form; - timer.current = setTimeout(() => form?.requestSubmit(), 350); - }} - /> -
    -
    - ); -} - -function ColorSwatchFacet({ filter, state }: { filter: BrowseFilter; state: CollectionState }) { - const values = filter.values.flatMap((value) => { - if (!value.input) return []; - const entries = filterValueInputParamEntries(value.input); - if (entries.length !== 1) return []; - const [{ name, value: paramValue }] = entries; - const swatch = value.swatch; - const imageUrl = swatch?.image?.previewImage?.url; - const color = swatch?.color; - const style = { - ...(color ? { "--filter-swatch-color": color } : {}), - ...(imageUrl ? { backgroundImage: `url("${imageUrl}")` } : {}), - } as CSSProperties; - - return ( -
  • - -
    • - ); - }); - - if (values.length === 0) return null; - - return ( -
    - {filter.label} -
      {values}
    -
    - ); -} - -function FacetBody({ filter, state }: { filter: BrowseFilter; state: CollectionState }) { - if (filter.type === "PRICE_RANGE") return ; - if (isSwatchFilter(filter)) return ; - return ; -} - -export function Toolbar({ - countText, - defaultSortValue, - sortOptions, - extraHiddenInputs, - filterDrawerId = FILTER_DRAWER_ID, -}: { - countText: string; - defaultSortValue: string; - sortOptions: SortOption[]; - extraHiddenInputs?: ReactNode; - filterDrawerId?: string; -}) { - const state: CollectionState = useCollection(); - const { formProps } = useCollectionForm(); - const resolvedSortValue = currentSortValue(state) ?? defaultSortValue; - const hiddenParams = activeFilterParams(state); - - return ( -
    -
    - - - {countText} - -
    -
    - {hiddenInputsFromParams(hiddenParams)} - {extraHiddenInputs} - - -
    -
    - ); -} - -export function FacetForm({ - availableFilters, - extraHiddenInputs, - remountKey, -}: { - availableFilters: readonly BrowseFilter[]; - extraHiddenInputs?: ReactNode; - remountKey?: string; -}) { - const state: CollectionState = useCollection(); - const { formProps } = useCollectionForm(); - const serialized = serializeCollectionParams(state); - const sort = currentSortValue(state); - const isLoading = state.status === "loading"; - - return ( -
    - {sort ? : null} - {extraHiddenInputs} -
    -
    - {availableFilters.map((filter) => ( - - - - ))} -
    -
    - -
    - ); -} - -export function FilterDrawer({ - availableFilters, - extraHiddenInputs, - id = FILTER_DRAWER_ID, - remountKey, -}: { - availableFilters: readonly BrowseFilter[]; - extraHiddenInputs?: ReactNode; - id?: string; - remountKey?: string; -}) { - return ( - -
    -
    -

    - Filters -

    - -
    -
    - -
    -
    -     - ); -} - -export function ActiveFilterChips({ - basePath, - clearAllTo, - currencyCode, -}: { - basePath: string; - clearAllTo: string; - currencyCode: string; -}) { - const state: CollectionState = useCollection(); - if (state.filters.length === 0) return null; - - const currentParams = serializeCollectionParams(state); - - return ( -
    - {state.filters.map((filter, index) => { - const label = describeFilter(filter, currencyCode); - const removal = getFilterRemovalUrl(currentParams, filter); - const to = buildPathWithRemoval(basePath, removal); - - return ( - - {label} - - - ); - })} - - Clear all - -
    - ); -} - -export function useLoadMore( - initialNodes: readonly T[], - initialPageInfo: BrowsePageInfo, - dataSearch: string, -) { - const fetcher = useFetcher(); - const [nodes, setNodes] = useState(initialNodes); - const [pageInfo, setPageInfo] = useState(initialPageInfo); - const requestedSearch = useRef(null); - const appendedSearches = useRef(new Set()); - - useEffect(() => { - setNodes(initialNodes); - setPageInfo(initialPageInfo); - requestedSearch.current = null; - appendedSearches.current.clear(); - }, [dataSearch, initialNodes, initialPageInfo]); - - useEffect(() => { - const data = fetcher.data as LoadMoreResponse | undefined; - if (!data || data.dataSearch !== requestedSearch.current) return; - if (appendedSearches.current.has(data.dataSearch)) return; - - appendedSearches.current.add(data.dataSearch); - requestedSearch.current = null; - setNodes((current) => [...current, ...data.products]); - setPageInfo(data.pageInfo); - }, [fetcher.data]); - - return { - nodes, - pageInfo, - isLoading: fetcher.state !== "idle", - loadMore: (href: string, nextDataSearch: string) => { - requestedSearch.current = nextDataSearch; - fetcher.load(href); - }, - }; -} - -export function LoadMore({ - pageInfo, - loadedCount, - countLabel, - isLoading, - onLoad, -}: { - pageInfo: BrowsePageInfo; - loadedCount: number; - countLabel?: string; - isLoading: boolean; - onLoad: (href: string, nextDataSearch: string) => void; -}) { - const location = useLocation(); - - if (!pageInfo.hasNextPage || !pageInfo.endCursor) return null; - - const params = new URLSearchParams(location.search); - params.set("after", pageInfo.endCursor); - const nextSearch = params.toString(); - const href = `${location.pathname}?${nextSearch}`; - - return ( -
    -

    - {countLabel ?? `Showing ${loadedCount} products`} -

    - { - event.preventDefault(); - if (!isLoading) onLoad(href, nextSearch); - }} - > - {isLoading ? "Loading…" : "Load more"} - -
    - ); -} diff --git a/templates/react-router/app/components/CollectionCard.tsx b/templates/react-router/app/components/CollectionCard.tsx index 8df3513c1e..5404774902 100644 --- a/templates/react-router/app/components/CollectionCard.tsx +++ b/templates/react-router/app/components/CollectionCard.tsx @@ -1,114 +1,50 @@ -import { gql, type StorefrontApi } from "@shopify/hydrogen"; +import type { StorefrontApi } from "@shopify/hydrogen"; import { Link } from "react-router"; -export const COLLECTION_CARD_PRODUCT_COUNT_LIMIT = 100; +import type { COLLECTION_CARD_QUERY } from "~/lib/fragments"; +import { shopifyImageUrl, srcSetFor } from "~/lib/image"; -export const COLLECTION_CARD_FRAGMENT = gql(` - fragment CollectionCard on Collection { - handle - title - image { - url - altText - width - height - } - products(first: 1) { - nodes { - featuredImage { - url - altText - } - } - } - productCountProbe: products(first: 100) { - nodes { - id - } - pageInfo { - hasNextPage - } - } - } -`); +/** The typed collection card node. */ +export type CollectionCardData = NonNullable< + StorefrontApi.ResultOf["collection"] +>; -const COLLECTION_CARD_SHAPE_QUERY = gql( - `query CollectionCardShape { collections(first: 1) { nodes { ...CollectionCard } } }`, - [COLLECTION_CARD_FRAGMENT], -); - -export type CollectionCardData = StorefrontApi.ResultOf< - typeof COLLECTION_CARD_SHAPE_QUERY ->["collections"]["nodes"][number]; - -export type CollectionCardProps = { +type CollectionCardProps = { collection: CollectionCardData; - priority?: boolean; - productCount?: number; - useProductImageFallback?: boolean; + loading?: "eager" | "lazy"; + fetchPriority?: "high" | "low" | "auto"; }; -function productCountText(collection: CollectionCardData, productCount?: number) { - if (typeof productCount === "number") { - return `${productCount} ${productCount === 1 ? "product" : "products"}`; - } - - if (collection.productCountProbe.pageInfo.hasNextPage) { - return `${COLLECTION_CARD_PRODUCT_COUNT_LIMIT}+ products`; - } - - const count = collection.productCountProbe.nodes.length; - return `${count} ${count === 1 ? "product" : "products"}`; -} - export function CollectionCard({ collection, - priority = false, - productCount, - useProductImageFallback = true, + loading = "lazy", + fetchPriority = "auto", }: CollectionCardProps) { - const fallbackImage = useProductImageFallback - ? (collection.products.nodes[0]?.featuredImage ?? null) - : null; - const image = collection.image ?? fallbackImage; - const imageWidth = collection.image?.width ?? undefined; - const imageHeight = collection.image?.height ?? undefined; + const image = collection.image ?? collection.products.nodes[0]?.featuredImage; + const alt = collection.image?.altText ?? collection.title; return ( -
    -
    +
    +
    {image ? ( -
    - {image.altText -
    + {alt} ) : null}
    -
    -

    - - {collection.title} - -

    -

    - {productCountText(collection, productCount)} -

    + +
    +

    {collection.title}

    ); diff --git a/templates/react-router/app/components/Footer.tsx b/templates/react-router/app/components/Footer.tsx index 9d534a17c1..115a930033 100644 --- a/templates/react-router/app/components/Footer.tsx +++ b/templates/react-router/app/components/Footer.tsx @@ -1,39 +1,46 @@ import { Link } from "react-router"; -const linkClass = +import { content } from "~/lib/content"; + +const footerLinkClass = "min-h-touch-target text-on-surface-secondary hover:text-on-surface focus-visible:outline-accent inline-flex items-center font-normal no-underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 motion-safe:transition-colors"; -export function Footer() { +export function Footer({ + shopName, + collections, +}: { + shopName: string; + collections: ReadonlyArray<{ handle: string; title: string }>; +}) { return (