hybrid filtering update

Author: matthewcsimpson

Dist/WebflowOnly/CMSFilter.js

@@ -1,13 +1,6 @@
 "use strict";
 
 class CMSFilter {
-  /**
-   * For `wt-cmsfilter-filtering="hybrid"`, availability for these categories ignores
-   * that category's active filters (e.g. body type options stay available for multi-select
-   * while other facets narrow from the full filtered set).
-   */
-  static HYBRID_SELF_EXCLUDE_CATEGORIES = ["bodytype"];
-
   constructor() {
     //CORE elements
     this.filterForm = document.querySelector(
@@ -784,6 +777,25 @@ 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.
+   */
+  getHybridSelfExcludeCategories() {
+    const raw = this.filterForm.getAttribute(
+      "wt-cmsfilter-hybrid-categories",
+    );
+    if (raw === null) {
+      return ["bodytype"];
+    }
+    const parsed = raw
+      .split(",")
+      .map((s) => s.trim())
+      .filter(Boolean);
+    return parsed;
+  }
+
   UpdateAvailableFilters() {
     const filteringMode = this.filterForm.getAttribute(
       "wt-cmsfilter-filtering",
@@ -800,7 +812,7 @@ class CMSFilter {
       if (
         filteringMode === "hybrid" &&
         categoryAttr &&
-        CMSFilter.HYBRID_SELF_EXCLUDE_CATEGORIES.includes(categoryAttr)
+        this.getHybridSelfExcludeCategories().includes(categoryAttr)
       ) {
         sourceItems = this.getFilteredItemsIgnoringCategories([categoryAttr]);
       }

__tests__/CMSFilter.test.js

@@ -74,12 +74,19 @@ describe("CMSFilter", () => {
   }
 
   /** make, bodytype, Category — hybrid (bodytype self-exclude) vs advanced */
-  function buildHybridScenarioDOM(filteringMode = "hybrid") {
+  function buildHybridScenarioDOM(
+    filteringMode = "hybrid",
+    hybridCategoriesAttr,
+  ) {
     const modeAttr = filteringMode
       ? `wt-cmsfilter-filtering="${filteringMode}"`
       : "";
+    const hybridAttr =
+      hybridCategoriesAttr !== undefined
+        ? `wt-cmsfilter-hybrid-categories="${hybridCategoriesAttr}"`
+        : "";
     document.body.innerHTML = `
-      <form wt-cmsfilter-element="filter-form" ${modeAttr} wt-cmsfilter-debounce="0">
+      <form wt-cmsfilter-element="filter-form" ${modeAttr} ${hybridAttr} wt-cmsfilter-debounce="0">
         <label wt-cmsfilter-category="make"><input type="checkbox"><span>Toyota</span></label>
         <label wt-cmsfilter-category="make"><input type="checkbox"><span>Honda</span></label>
         <label wt-cmsfilter-category="bodytype"><input type="checkbox"><span>SUV</span></label>
@@ -235,6 +242,32 @@ describe("CMSFilter", () => {
     ]);
   });
 
+  test("hybrid with empty wt-cmsfilter-hybrid-categories narrows all facets like advanced", () => {
+    buildHybridScenarioDOM("hybrid", "");
+    InitializeCMSFilter();
+    const form = document.querySelector('[wt-cmsfilter-element="filter-form"]');
+    const toyota = Array.from(
+      form.querySelectorAll('label[wt-cmsfilter-category="make"]'),
+    ).find((l) => l.textContent.includes("Toyota"));
+    const suv = Array.from(
+      form.querySelectorAll('label[wt-cmsfilter-category="bodytype"]'),
+    ).find((l) => l.textContent.includes("SUV"));
+    toyota.querySelector("input").checked = true;
+    suv.querySelector("input").checked = true;
+    toyota
+      .querySelector("input")
+      .dispatchEvent(new Event("change", { bubbles: true }));
+    suv.querySelector("input").dispatchEvent(new Event("change", { bubbles: true }));
+    const instance = window.webtricks[0].CMSFilter;
+    instance.ApplyFilters();
+
+    const bodyLabels = Array.from(
+      form.querySelectorAll('label[wt-cmsfilter-category="bodytype"]'),
+    );
+    const visibleBody = bodyLabels.filter((l) => l.style.display !== "none");
+    expect(visibleBody.map((l) => l.textContent.trim())).toEqual(["SUV"]);
+  });
+
   test("advanced mode hides sibling make and hides body types not in result set", () => {
     buildHybridScenarioDOM("advanced");
     InitializeCMSFilter();

docs/WebflowOnly/CMSFilter.md

@@ -48,7 +48,8 @@ Add the script to your Webflow project and include the required attributes on yo
 #### Core Filter Attributes
 
 - `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 **`bodytype`** keeps **all** of its checkbox options that match the current filters **except** body type (so users can multi-select e.g. Minivan and SUV while other facets react). **`make`** and all other categories narrow from the current result set like **`advanced`**. Requires matching `data-bodytype` on list items (`wt-cmsfilter-category="bodytype"`).
+- `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-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