Standalone filter groups
What you're building: a filter that lives outside the listing it affects — a category list in the nav, or a set of links on a landing page that jump into a filtered browse view.
Normally a filter must sit inside its browse wrapper. A standalone group is the deliberate exception: it renders facet values somewhere else on the page and links through to the listing.
What you need
- Applies toA Div outside the browse wrapper
The group.
- Applies toThe group
Which facet to render values from.
- Applies toThe group
Required — there is no wrapper to inherit from.
- Applies toThe group
Where each value links to.
Why the index is required here
An in-wrapper filter inherits its index from the browse wrapper. A standalone group has no wrapper above it, so it must name the index itself. This is the most common reason a standalone group renders nothing.
Linking instead of filtering
Because there is no listing to narrow, each value becomes a link.
builds the destination, with
{value} replaced by the facet value:
<div
wf-algolia-element="filter-group"
wf-algolia-field="category"
wf-algolia-index="products"
wf-algolia-link-template="/shop?category={value}"
></div>
Pair it with wf-algolia-url-sync="true" on the destination browse page and the
link arrives with the filter already applied.
Making values URL-safe
converts values to a URL-friendly form —
Running Shoes becomes running-shoes. Use it whenever values contain spaces or
punctuation.
Cleaning up
Cloned values carry the class wf-algolia-injected, which the script uses to
clear them before re-rendering. Do not add that class by hand — anything wearing
it gets removed.
Troubleshooting
| Symptom | Cause | Fix |
|---|---|---|
| The group renders nothing | No wf-algolia-index — there is no wrapper to inherit from | Add it |
| Links go to the right page but nothing is filtered | The destination has no wf-algolia-url-sync | Add it to the browse wrapper |
| Links contain spaces or break | Values are not slugified | Add wf-algolia-slugify |
standalone child re-scope failed: | A cascading standalone group could not resolve its parent | Check wf-algolia-refines |