Hit preview
What you're building: a small set of example results shown next to a category, so people can see what is behind a link before clicking it.
Most useful in a mega-menu or a landing page, where hovering "Trainers" shows three trainers rather than just a count.
What you need
- Applies toA Div for the preview
Marks the preview region.
- Applies toThe preview
Which index to sample from.
- Applies toThe preview
Which facet scopes the sample.
- Applies toThe preview
Which value of that facet.
All four are required. A preview needs to know what to sample and how to scope it, and there is no wrapper to inherit from.
Build it
<div
wf-algolia-element="hit-preview"
wf-algolia-index="products"
wf-algolia-field="category"
wf-algolia-value="Trainers"
wf-algolia-hits-per-preview="3"
>
<!-- one card, cloned per hit -->
</div>
Inside, design one card and bind fields exactly as in a result template.
How many
sets the sample size. Three or four is usually right — a preview is a taste, and each one is a query.
Where the cards link
builds each card's destination, with record fields substituted in:
wf-algolia-hit-link-template="/product/{slug}"
Ten previews in one mega-menu means ten queries on page load. Keep the count small, and prefer previews on hover-revealed panels over rendering every category at once.
Troubleshooting
| Symptom | Cause | Fix |
|---|---|---|
| Nothing renders | One of the four required attributes is missing | All four are needed |
| Cards render empty | Field names do not match the records | Check them in Algolia |
| Links all point at the same place | wf-algolia-hit-link-template has no field token | Include {slug} or similar |
| The page is slow to load | Too many previews querying at once | Reduce them, or defer to hover |