Skip to content

Commit 42276db

Browse files
author
matthewcsimpson
committed
hybrid fitering docs update
1 parent 9eeb37d commit 42276db

1 file changed

Lines changed: 23 additions & 2 deletions

File tree

docs/WebflowOnly/CMSFilter.md

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ CMSFilter is a powerful Webflow-specific script that provides advanced filtering
1212

1313
- Multiple filter types (checkbox, radio, text, range)
1414
- Advanced filtering with dynamic availability updates
15-
- Hybrid filtering mode (`hybrid`): advanced-style narrowing for **make** and other facets, while **body type** options stay available for multi-select
15+
- Hybrid filtering mode (`hybrid` + `wt-cmsfilter-hybrid-categories`): like advanced, but listed categories keep sibling checkbox options for multi-select; other facets narrow from the current result set
1616
- Pagination support with auto-loading across pages
1717
- Dynamic sorting (numeric, date, alphabetical)
1818
- Active filter tags with individual removal
@@ -213,6 +213,27 @@ Add the script to your Webflow project and include the required attributes on yo
213213
</form>
214214
```
215215

216+
### Hybrid mode (advanced + multi-select on chosen facets)
217+
218+
Use **`hybrid`** instead of **`advanced`** on the form, and set **`wt-cmsfilter-hybrid-categories`** to a comma-separated list of `wt-cmsfilter-category` values that should **not** hide sibling options when you select one value (e.g. body type so users can pick SUV and Minivan at once). **Omit** `wt-cmsfilter-hybrid-categories` or leave it **empty** if every facet should narrow like **`advanced`**. List items need matching `data-*` fields for each category you name.
219+
220+
```html
221+
<form wt-cmsfilter-element="filter-form"
222+
wt-cmsfilter-filtering="hybrid"
223+
wt-cmsfilter-hybrid-categories="bodytype"
224+
wt-cmsfilter-debounce="300">
225+
<!-- make, model, etc.: narrow like advanced -->
226+
<label wt-cmsfilter-category="make"><input type="checkbox"><span>Toyota</span></label>
227+
<!-- bodytype: sibling options stay available for multi-select -->
228+
<label wt-cmsfilter-category="bodytype"><input type="checkbox"><span>SUV</span></label>
229+
<div wt-cmsfilter-element="list">
230+
<div data-make="Toyota" data-bodytype="SUV">…</div>
231+
</div>
232+
</form>
233+
```
234+
235+
Multiple categories: `wt-cmsfilter-hybrid-categories="bodytype,colour"`.
236+
216237
### Button-Triggered Filtering
217238

218239
```html
@@ -250,7 +271,7 @@ Add the script to your Webflow project and include the required attributes on yo
250271

251272
- Use debouncing for text inputs in large collections (adjust `wt-cmsfilter-debounce` value)
252273
- Enable pagination for collections with 50+ items
253-
- Use advanced filtering mode only when needed for better performance
274+
- Use advanced or hybrid filtering mode only when needed for better performance
254275
- Implement IX2 reset (`wt-cmsfilter-resetix2="true"`) sparingly as it impacts performance
255276
- Consider using button-triggered filtering for complex filter sets
256277

0 commit comments

Comments
 (0)