Collection Page

A collection page is a useSearch call with an empty query scoped to a collection via targetPage: 'collection' and the collection’s numeric id.

Prerequisite: the search app is registered (.use(search())), your app is wrapped in <GloodProvider>, and https://search.glood.ai is in your CSP connectSrc. See Installation — this guide covers only the collection-page wiring.

1. Fetch the collection’s products

Call useSearch with targetPage: 'collection', targetId (the numeric Shopify collection id), and includeFacets so the response carries inline facet counts for the collection.

import { useState } from 'react';
import { useSearch } from '@glood/hydrogen';

function CollectionGrid({ collectionId }: { collectionId: number }) {
  const [page, setPage] = useState(1);

  const { products, data, loading, error } = useSearch({
    query: '',                       // collection browse — no search term
    targetPage: 'collection',
    targetId: collectionId,          // numeric id, not the gid:// or handle
    sort: 'best_selling',
    pagination: { page, limit: 24 },
    options: { includeFacets: true },
  });

  if (error) return <p>{error.message}</p>;
  // …render below
}

The params above are a SearchParams; the returned data is a SearchResponse and each products entry is a SearchProduct.

targetId is the numeric collection id. In a Hydrogen collection route you have the collection GID (gid://shopify/Collection/123) — pass the trailing number (123).

2. Render products, sort and pagination

return (
  <div className="collection">
    {/* hold `sort` in state and pass it to useSearch; re-run resets to page 1 */}
    <select defaultValue="best_selling" onChange={(e) => {/* setSort(e.target.value) */}}>
      <option value="best_selling">Best selling</option>
      <option value="price_asc">Price: low to high</option>
      <option value="newest">Newest</option>
    </select>

    <div className="grid">
      {products.map((p) => (
        <a key={p.product_id} href={`/products/${p.handle}`}>
          <img src={p.image?.url} alt={p.title} loading="lazy" />
          <span>{p.title}</span>
          <span>{p.display_price ?? p.price}</span>
        </a>
      ))}
    </div>

    <nav>
      <button disabled={!data?.pagination.has_prev_page} onClick={() => setPage((p) => p - 1)}>
        Previous
      </button>
      <span>{data?.pagination.page} / {data?.pagination.total_pages}</span>
      <button disabled={!data?.pagination.has_next_page} onClick={() => setPage((p) => p + 1)}>
        Next
      </button>
    </nav>
  </div>
);

sort accepts the values in SearchSort; data.pagination is a SearchPagination. With includeFacets: true, data.facets holds the collection’s facets with live counts. Track the selected values in state and pass them back as the facets param:

const [selected, setSelected] = useState<Record<string, string[]>>({});

const { data } = useSearch({
  query: '',
  targetPage: 'collection',
  targetId: collectionId,
  facets: Object.entries(selected).map(([key, value]) => ({ key, operator: 'or', value })),
  pagination: { page, limit: 24 },
  options: { includeFacets: true },
});

// …render facets
{data?.facets?.map((facet) => (
  <fieldset key={facet.key}>
    <legend>{facet.key}</legend>
    {facet.aggregation.buckets.map((b) => (
      <label key={b.value}>
        <input
          type="checkbox"
          checked={b.selected}
          onChange={() => {
            const cur = selected[facet.key] ?? [];
            const next = b.selected ? cur.filter((v) => v !== b.value) : [...cur, b.value];
            setSelected({ ...selected, [facet.key]: next });
            setPage(1);
          }}
        />
        {b.value} ({b.count})
      </label>
    ))}
  </fieldset>
))}

Each applied filter is a SearchAppliedFacet.

For stable filter definitions (labels, order, swatches — independent of the current query), fetch them once with fetchFilters / app.filters({ collection: collectionId }) and merge in the live counts from data.facets. See Filters & aggregations.

4. Attribute clicks

useSearch returns the track helpers. Fire trackResultClick with page_type: 'collection':

const { products, data, trackResultClick } = useSearch({ /* …as above */ });

<a
  href={`/products/${p.handle}`}
  onClick={() =>
    trackResultClick({
      request_id: data?.request_id,
      search_type: 'text',
      page_type: 'collection',
      products: [{ product_id: p.product_id }],
    })
  }
>

The payload is a SearchTrack.

For Developers

1. Fetch the collection’s products

3. Add facet filtering

4. Attribute clicks

See also

​1. Fetch the collection’s products

​2. Render products, sort and pagination

​3. Add facet filtering

​4. Attribute clicks

​See also

1. Fetch the collection’s products

2. Render products, sort and pagination

3. Add facet filtering

4. Attribute clicks

See also