setTerm(e.target.value)} placeholder="Search…" />
{data?.corrected_query &&
);
}
```
Did you mean {data.corrected_query}?
} {loading && …}-
{suggestions.map((s) => (
- {s.text} ))}
{products.map((p) => (
{p.title}
{p.display_price ?? p.price}
))}
Searching…
; if (error) return{error.message}
; return ( <>{data?.pagination.total} results
{products.map((product) => (
trackResultClick({
request_id: data?.request_id,
search_term: query,
search_type: 'text',
products: [{ product_id: product.product_id }],
})
}
>
{product.title}
))}
);
}
```
### Sort & pagination
`sort` accepts `relevance` (default), `title_asc`, `title_desc`, `price_asc`, `price_desc`,
`best_selling`, `oldest`, `newest`. The response `pagination` block gives `total`, `page`,
`limit`, `total_pages`, `has_next_page`/`has_prev_page` and `next_page`/`prev_page`.
## Filters & aggregations
There are two facet endpoints, exposed via the `SearchApp` (or the standalone functions):
| Call | Returns |
| ---------------------------- | --------------------------------------------------------------------------- |
| `filters()` / `fetchFilters` | DB-driven facet **definitions** (labels, value lists, swatches) — no counts |
| `fetchFilterAggregations` | **Live counts** for a query + applied filters |
```tsx theme={null}
import { useGloodAnalytics, fetchFilterAggregations } from '@glood/hydrogen';
// Facet definitions (structure)
const app = useGloodAnalytics()?.getApp('search');
const { facets } = await app.filters({ collection: '123' });
// Live counts (numbers) — standalone, works in loaders too
const agg = await fetchFilterAggregations(
{ apiKey, myShopifyDomain },
{ query: 'shoe', appliedFilters: [{ key: 'color', value: ['red'] }], facets: [{ key: 'size' }] },
);
```
Render the definitions from `filters()` for stable labels/order, and merge in the live
`aggregations` counts as the query/selection changes.
## Image (visual) search
Pass exactly one image source — a base64 image, a `data:` URL, or an http(s) URL:
```tsx theme={null}
import { useGloodAnalytics } from '@glood/hydrogen';
async function searchByImage(file: File) {
const app = useGloodAnalytics()?.getApp('search');
const dataUrl = await toDataUrl(file); // FileReader.readAsDataURL
const res = await app.imageSearch({ image: dataUrl, pagination: { limit: 24 } });
return res.products;
}
```