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:
co-authored by
Claude Opus 5
parent
9ed1cc60de
commit
3bc61066f0
@@ -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(
|
||||
|
||||
Reference in New Issue
Block a user