Add collections pagination and a search field on the search page

Paginate the collections grid with a "See more" button backed by a new
getCollectionsPage cursor API, add an editable search input to the
search-results block, and bump @shopify/hydrogen to 2026.10.0-preview.1.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DqFkSaLYRPZ18dsMbzjiP4
This commit is contained in:
Rami Bitar
2026-08-23 11:01:48 -04:00
co-authored by Claude Opus 5
parent 9ed1cc60de
commit 3bc61066f0
9 changed files with 166 additions and 19 deletions
+25 -2
View File
@@ -218,13 +218,36 @@ export interface ProductFilterFacet {
}>;
}
export interface CollectionsPage {
collections: Collection[];
hasNextPage: boolean;
endCursor: string | null;
}
export async function getCollections(first = 50): Promise<Collection[]> {
const page = await getCollectionsPage(first);
return page.collections;
}
export async function getCollectionsPage(
first = 50,
after: string | null = null
): Promise<CollectionsPage> {
const data = unwrapStorefrontResult(
await storefront.graphql(GET_COLLECTIONS_QUERY, { variables: { first } }),
await storefront.graphql(GET_COLLECTIONS_QUERY, {
variables: { first, after },
}),
'GetCollections'
);
return data.collections.edges.map((edge) => edge.node);
const { edges, pageInfo } = data.collections;
return {
collections: edges.map((edge) => edge.node),
hasNextPage: Boolean(pageInfo?.hasNextPage),
endCursor: pageInfo?.endCursor ?? null,
};
}
export async function getCollectionProducts(