Merge pull request #75 from matthewcsimpson/feature/hybrid-cms-filtering

Hybrid Filtering Update

Author: JorchCortez

Dist/WebflowOnly/CMSFilter.js

@@ -852,6 +852,12 @@ class CMSFilter {
           }
         });
 
+        // Hybrid only: keep selected options visible so users can change or clear them
+        // when other facets (e.g. make) rule them out of the current result set.
+        if (filteringMode === "hybrid" && istoggle.checked) {
+          isAvailable = true;
+        }
+
         // Restore original display style or hide
         if (isAvailable) {
           // Restore original display style

__tests__/CMSFilter.test.js

@@ -239,6 +239,49 @@ describe("CMSFilter", () => {
     ]);
   });
 
+  test("hybrid keeps checked body types visible when current make rules them out", () => {
+    document.body.innerHTML = `
+      <form wt-cmsfilter-element="filter-form" wt-cmsfilter-filtering="hybrid" wt-cmsfilter-hybrid-categories="bodytype" 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>
+        <label wt-cmsfilter-category="bodytype"><input type="checkbox"><span>Hatchback</span></label>
+        <select wt-cmsfilter-element="sort-options"><option value="title-asc">A</option></select>
+        <div wt-cmsfilter-element="results-count"></div>
+      </form>
+      <div wt-cmsfilter-element="list">
+        <div data-make="Toyota" data-bodytype="SUV">T</div>
+        <div data-make="Honda" data-bodytype="Hatchback">H</div>
+      </div>
+      <div wt-cmsfilter-element="empty" style="display:none;"></div>
+    `;
+    InitializeCMSFilter();
+    const form = document.querySelector('[wt-cmsfilter-element="filter-form"]');
+    const honda = Array.from(
+      form.querySelectorAll('label[wt-cmsfilter-category="make"]'),
+    ).find((l) => l.textContent.includes("Honda"));
+    const suv = Array.from(
+      form.querySelectorAll('label[wt-cmsfilter-category="bodytype"]'),
+    ).find((l) => l.textContent.includes("SUV"));
+    const hatch = Array.from(
+      form.querySelectorAll('label[wt-cmsfilter-category="bodytype"]'),
+    ).find((l) => l.textContent.includes("Hatchback"));
+    suv.querySelector("input").checked = true;
+    hatch.querySelector("input").checked = true;
+    honda.querySelector("input").checked = true;
+    [suv, hatch, honda].forEach((el) =>
+      el
+        .querySelector("input")
+        .dispatchEvent(new Event("change", { bubbles: true })),
+    );
+    const instance = window.webtricks[0].CMSFilter;
+    instance.ApplyFilters();
+
+    expect(instance.filteredItems.length).toBe(1);
+    expect(suv.style.display).not.toBe("none");
+    expect(hatch.style.display).not.toBe("none");
+  });
+
   test("hybrid with empty wt-cmsfilter-hybrid-categories narrows all facets like advanced", () => {
     buildHybridScenarioDOM("hybrid", "");
     InitializeCMSFilter();

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`). **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-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. **Checked** checkbox/radio options in **`hybrid`** stay visible so users can adjust or clear selections when another facet (e.g. make) no longer matches. **`advanced`** does not use this rule.
 - `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