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.
Ordering the values
works here exactly as it does inside a browse wrapper. A standalone list used to accept the attribute and ignore it, so a nav menu always came back in Algolia's own count order.
| Value | Order |
|---|---|
natural | As Algolia returns them, by result count |
alpha | A→Z by the stored value |
count | Most results first |
selected-first | Selected values pinned to the top |
selected-alpha-zero-last | Selected first, then A→Z, with zero-count values last |
selected-alpha-zero-last is the one worth knowing for a nav or a mega-menu. A
scannable A→Z list is easier to read than a count-ranked one, but categories with
nothing in them still need to be reachable rather than buried at the top of the
alphabet, so they sink to the bottom.
Counting what is in a category
A tile reports one number about a scoped slice of the index. With that number is how many records match, which is what turns a plain category link into "Shoes (42)".
count is the only stat that does not need ,
because it reads the number of matches rather than aggregating a numeric column.
The others (min, max, avg, sum) all do, and the field has to be numeric
and declared in attributesForFaceting.
Add and the tile becomes clickable.
It substitutes {field} and {value} from the scope, and honours
:
<a
wf-algolia-element="facet-stat"
wf-algolia-stat="count"
wf-algolia-index="products"
wf-algolia-base-filter-field="category"
wf-algolia-base-filter-value="Shoes"
wf-algolia-link-template="/category/{value}"
wf-algolia-slugify="true"
wf-algolia-text-template="Shoes ({value})"
></a>
The scope can also sit on an ancestor: put the base-filter attributes on a card wrapper and the tile inside picks them up, which keeps one set of attributes per category rather than one per element.
controls the wording, with {value}
standing for the number.
, ,
and
format it, the same way they format
a card value. That matters most for avg and
sum, where a raw 1299.5 wants to read as $1,299.50.
If the query returns no number, the tile keeps whatever you typed in the Designer
and explains why in the console. A placeholder like — is therefore a better
design-time value than 0, which would read as a real count.
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 |
| Values come back in the wrong order | No wf-algolia-sort, so Algolia's count order is used | Set one |
| A counter tile still shows its Designer text | The query returned no number | Read the console: it says whether the index, the field or the scope was the problem |
facet-stat missing required wf-algolia-index | No index on the tile or any ancestor | Add wf-algolia-index |
facet-stat missing required wf-algolia-field | An aggregate stat with no field | Add the field, or use wf-algolia-stat="count" |