hybrid filtering

Author: matthewcsimpson

Dist/WebflowOnly/CMSFilter.js

@@ -780,20 +780,19 @@ class CMSFilter {
   /**
    * Categories whose checkbox availability ignores that facet’s own selections (hybrid mode).
    * Set on the form: wt-cmsfilter-hybrid-categories="bodytype" or "bodytype,colour"
-   * If the attribute is omitted, defaults to ["bodytype"]. If present but empty, no categories self-exclude.
+   * Omit or leave empty for no self-exclude categories (hybrid availability matches advanced for every facet).
    */
   getHybridSelfExcludeCategories() {
     const raw = this.filterForm.getAttribute(
       "wt-cmsfilter-hybrid-categories",
     );
-    if (raw === null) {
-      return ["bodytype"];
+    if (raw === null || raw.trim() === "") {
+      return [];
     }
-    const parsed = raw
+    return raw
       .split(",")
       .map((s) => s.trim())
       .filter(Boolean);
-    return parsed;
   }
 
   UpdateAvailableFilters() {

__tests__/CMSFilter.test.js

@@ -74,16 +74,13 @@ describe("CMSFilter", () => {
   }
 
   /** make, bodytype, Category — hybrid (bodytype self-exclude) vs advanced */
-  function buildHybridScenarioDOM(
-    filteringMode = "hybrid",
-    hybridCategoriesAttr,
-  ) {
+  function buildHybridScenarioDOM(filteringMode = "hybrid", hybridCategoriesAttr) {
     const modeAttr = filteringMode
       ? `wt-cmsfilter-filtering="${filteringMode}"`
       : "";
     const hybridAttr =
-      hybridCategoriesAttr !== undefined
-        ? `wt-cmsfilter-hybrid-categories="${hybridCategoriesAttr}"`
+      filteringMode === "hybrid"
+        ? ` wt-cmsfilter-hybrid-categories="${hybridCategoriesAttr ?? ""}"`
         : "";
     document.body.innerHTML = `
       <form wt-cmsfilter-element="filter-form" ${modeAttr} ${hybridAttr} wt-cmsfilter-debounce="0">
@@ -207,7 +204,7 @@ describe("CMSFilter", () => {
   });
 
   test("hybrid mode narrows make like advanced but keeps all relevant body types visible for multi-select", () => {
-    buildHybridScenarioDOM("hybrid");
+    buildHybridScenarioDOM("hybrid", "bodytype");
     InitializeCMSFilter();
     const form = document.querySelector('[wt-cmsfilter-element="filter-form"]');
     const toyota = Array.from(

docs/WebflowOnly/CMSFilter.md

@@ -49,7 +49,7 @@ Add the script to your Webflow project and include the required attributes on yo
 
 - `wt-cmsfilter-filtering="advanced"` - Enables advanced filtering mode with dynamic availability updates (every facet’s options narrow to the current result set; selecting one **make** hides other makes).
 - `wt-cmsfilter-filtering="hybrid"` - Like advanced, but selected categories (see below) keep **all** of their checkbox options that match the current filters **except** that category’s own selections (multi-select friendly). All **other** categories narrow from the current result set like **`advanced`**.
-- `wt-cmsfilter-hybrid-categories="bodytype"` - Comma-separated `wt-cmsfilter-category` names that use hybrid self-exclude behavior (e.g. `bodytype` or `bodytype,colour`). **If omitted**, defaults to **`bodytype`**. **If present but empty**, every facet narrows like **`advanced`** (no hybrid self-exclude). Requires matching `data-*` fields on list items for each listed category.
+- `wt-cmsfilter-hybrid-categories="bodytype"` - Comma-separated `wt-cmsfilter-category` names that use hybrid self-exclude behavior (e.g. `bodytype` or `bodytype,colour`). **Required** for any facet to use hybrid self-exclude; **omit or leave empty** if every facet should narrow like **`advanced`**. Requires matching `data-*` fields on list items for each listed category.
 - `wt-cmsfilter-trigger="button"` - Changes filter trigger to button submit instead of real-time
 - `wt-cmsfilter-class="classname"` - CSS class applied to active filter elements
 - `wt-cmsfilter-resetix2="true"` - Reset IX2 interactions on filtered items