Search Page

A search results page is a useSearch call driven by the shopper’s query, with facets, sort, pagination and attribution.

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.

1. Run the search

Read the query from the URL and pass it to useSearch. Set includeFacets to get inline facet counts for the current query.

// app/routes/search.tsx
import { useState } from 'react';
import { useSearchParams } from 'react-router';
import { useSearch } from '@glood/hydrogen';

export default function SearchPage() {
  const [params] = useSearchParams();
  const query = params.get('q') ?? '';
  const [page, setPage] = useState(1);
  const [sort, setSort] = useState('relevance');

  const { products, data, loading, error, trackResultClick, trackFilter } = useSearch({
    query,
    sort,
    pagination: { page, limit: 24 },
    options: { includeFacets: true },
  });

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

Params are a SearchParams; data is a SearchResponse and products are SearchProduct objects.

2. Render results, sort and pagination

return (
  <>
    <select value={sort} onChange={(e) => { setSort(e.target.value); setPage(1); }}>
      <option value="relevance">Relevance</option>
      <option value="price_asc">Price: low to high</option>
      <option value="price_desc">Price: high to low</option>
      <option value="newest">Newest</option>
    </select>

    <p>{data?.pagination.total} results for “{query}”</p>

    <div className="grid">
      {products.map((p) => (
        <a
          key={p.product_id}
          href={`/products/${p.handle}`}
          onClick={() =>
            trackResultClick({
              request_id: data?.request_id,
              search_term: query,
              search_type: 'text',
              source: 'search_page',
              products: [{ product_id: p.product_id }],
            })
          }
        >
          <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>
  </>
);

sort values are listed in SearchSort; data.pagination is a SearchPagination. Track selected facet values in state and pass them as the facets param (an array of SearchAppliedFacet). Render the buckets from data.facets:

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

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

{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);
            trackFilter({ search_term: query, filters: [{ key: facet.key, value: next }] });
          }}
        />
        {b.value} ({b.count})
      </label>
    ))}
  </fieldset>
))}

For stable filter definitions independent of the query, fetch them with fetchFilters, and for standalone live counts use fetchFilterAggregations.

4. Attribution

useSearch returns trackSearch, trackResultView, trackResultClick, trackAddToCart and trackFilter. Call trackSearch when the results render, trackResultClick on click (step 2), and trackAddToCart on add. Each takes a SearchTrack. Standard Shopify events (search_submitted, product_viewed, …) are forwarded automatically — see Events & attribution.

5. (Optional) Server-render the first page

To ship results in the initial HTML, call fetchSearchResults in the route loader instead of the hook:

import { fetchSearchResults } from '@glood/hydrogen';

export async function loader({ request, context }) {
  const query = new URL(request.url).searchParams.get('q') ?? '';
  const results = await fetchSearchResults(
    { apiKey: context.env.GLOOD_API_KEY, myShopifyDomain: 'your-store.myshopify.com' },
    { query, pagination: { page: 1, limit: 24 } },
  ).catch(() => null); // never let search break the page
  return { query, results };
}

For Developers

1. Run the search

3. Add facet filtering

4. Attribution

5. (Optional) Server-render the first page

See also

​1. Run the search

​2. Render results, sort and pagination

​3. Add facet filtering

​4. Attribution

​5. (Optional) Server-render the first page

​See also

1. Run the search

2. Render results, sort and pagination

3. Add facet filtering

4. Attribution

5. (Optional) Server-render the first page

See also