CMS Filter + Nest

[kevin]

I’m struggling with CMS Filter + Nest. I’m assuming it’s some sort of load order issue… but I need a second set of eyes.

https://www.synbiobeta.com/dev-pages/homepage-update-june-2024

There is a tab section toward the bottom of the page which I’m working on the Human Health tab first.

I have categories nesting in almost all the collections on the page.

For this one, I’m trying to default the filter on this tab to two of the categories, but it doesn’t seem to be working at all (eventually, the filter will be hidden). Meaning the Nest never actually happens so the filter can’t work.

[kevin]

Here is the read only link

https://preview.webflow.com/preview/synbiobeta?utm_medium=preview_link&utm_source=designer&utm_content=synbiobeta&preview=f5c59e61d10fc37a622f6dc8e66a899d&pageId=6671ba8ab78cddfd9ebd601c&workflow=preview

[Support-Luis]

Hey @kevin! One of the reasons this is failing is because we are currently missing an attribute on the list element.

Another issue I spotted, that may be local to my override is the use of the “&” symbol. Please add the missing attribute above and let me know if the filtering is working as expected, if not please try removing the “&” from both the filter UI and the category cards.

Another setup option is to manually set the filters inside Webflow. As shown below

This will remove the need to replicate the setup for all the needed tabs. Plus we will also remove the need to load the complete collection multiple times, once for each tab.

[kevin]

The nest attribute on the list, fixed nest (Honestly I never would have gotten there myself haha)

After that, the filters still didn’t work. I removed the & and replaced with “and” in both places and still didn’t work.

From my understanding of the built-in webflow filters, it will only filter by saying filter 1 and filter 2.

What I’m trying to overcome with CMSfilter is I need those that include Filter 1 or filter 2.

[Support-Luis]

Hey @kevin!

From my understanding of the built-in webflow filters, it will only filter by saying filter 1 and filter 2.
What I’m trying to overcome with CMSfilter is I need those that include Filter 1 or Filter 2.

Aren’t we trying to filter by filter 1 and filter 2 by having these two checkboxes checked on page load?

If not, then the setup may be failing for the following reason

There is a special character here. My recommendation is to clear the checkbox label completely and type it again. This should get rid of special characters

[kevin]

Here is what I think is happening

So page loads 8 items in the collection, none of those items include CMSNested category/filter of “Food & Nutrition” so when I filter based on that - there is nothing for the page to actually filter.

If you look at the published pages behavior right now, on load nothing shows. After you unselect both filters - 8 articles show, once you select the health and medicine check box - you get the 3 items that have that nested category in the original 8 items.

---

The behavior I’m looking for, is on load it shows the latest 8 articles that have a tag of either Food and Nutrition or Health and Medicine. So I think this is where my issue lies, on load I’m not getting those onto the page.

[Support-Luis]

Hey @kevin! for the first tab we can use this snippet to click the filters once all scripts have loaded, I just need you to remove the “Starts checked” option from the filters.

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsload',
    (listInstances) => {
      window.fsAttributes.cmsnest.init();
      document.querySelectorAll('[fs-cmsfilter-field]').forEach((e) => {
        e.textContent = e.textContent.trim();
      });

      window.fsAttributes = window.fsAttributes || [];
      window.fsAttributes.push([
        'cmsnest',
        (listInstances) => {
          window.fsAttributes.cmsfilter.init();
          document.getElementById('checkbox-2').click();
          document.getElementById('checkbox').click();
        },
      ]);
    },
  ]);
</script>

Since you want to filter the list for each tab change, we can use Mirror Click Events - Mirror a click from one element to another to mirror the user click on each tab to the required filters. Any fs-mirrorclick-element = trigger will mirror its click to any fs-mirrorclick-element = target element with the same instance. (Meaning you can have multiple targets for a single trigger)

Also, remember you’ll have to setup multiple instances of CMS Filter following the setup below, one for each tab

Let me know how it goes!