Filters not showing content items after reset

Attributes
1

I have CMS filters set up, and I am having an issue on the live site. The filters are set to clear on the expand/collapse icons because the client doesn’t want the filter categories to stack (only filter for solutions OR audiences at a time). I am encountering a few issues:

  1. When filters are cleared, the CMS items are no longer populating
  2. The load more button is showing when there is no content
  3. I have an empty state attribute set up that is not populating

Any ideas on how to fix these three items?

I have documented these issues in the loom below:

Read only preview:

https://preview.webflow.com/preview/insidetrack?utm_medium=preview_link&utm_source=designer&utm_content=insidetrack&preview=62e29e4f093b1097bf3346c9d4065c4a&pageId=64e11b2d49e674bb295b2863&workflow=preview

2

hey @Poetic! Do you have any script that handles this filter clearing on opening and closing the dropdowns?

3

@Support-Luis I don’t think so, you should be able to view all the script in the page settings.

I have the clear filter on dropdown setup using attribute fs-cmsfilter-element = clear on the icons

4

@Support-Luis Any ideas on this?

5

hey @Poetic! Can we have the checkboxes out of the dropdown? I want to make sure the filtering is being done correctly first :slight_smile:

Also please remove all but one clear element this might be causing some issues as well.

6

@Support-Luis I took all the filter fields out of the dropdown on this page.. I also removed all clear filter items except one. Any ideas on the next steps? Is the filtering set up correctly?

7

@Support-Luis **Update: I made some changes to the page but am still running into many of the same bugs. Changes:

  1. Removed all instances of the clear all filter button
  2. Added clear buttons for each category with the fs-cmsfilter-clear = IDENTIFIER attribute. This does not appear to be functioning properly for any of the filter categories
  3. Changed dropdowns to accordions
  4. Moved the empty state div with fs-cmsfilter-element = empty out of the filters area. This is still not working.
  5. Added active filter tags.

Remaining Bugs:

  1. Empty state div not showing correctly
  2. Load All Button showing when there are no collection items that meet the filter criteria
  3. Clear buttons (see #2 above) not functioning

Any ideas to troubleshoot these 3 items?

8

*** Another remaining bug is the original one - filters not resetting properly when a filter is cleared

9

hey @Poetic, can you remove these Attributes from the lists you are combining?

fs-cmssort-element="list"
fs-cmsfilter-element="list"
fs-cmsload-element="list"
fs-cmsfilter-showquery="true"
fs-cmsnest-element="list"

These are only needed in the first list. This has now shown the empty element on my end but it seems your filters are not correctly setup as no options from the dropdowns seem to return a result but the text input does correctly filter the lists.

To fix this you can try delaying CMS Filter after CMS Nest is done like you did with CMS Combine. Please let me know if this fixes it

10

@Support-Luis What scripts would be required (in head & body) to delay CMS Filter after CMS Nest?

11

For the <head> you’ll need this script for CMS Filter


<!-- [Attributes by Finsweet] CMS Filter -->
<script
  defer
  fs-attributes-preventload="true"
  src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsfilter@1/cmsfilter.js"
></script>

And this for CMS Nest

<!-- [Attributes by Finsweet] CMS Nest -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsnest@1/cmsnest.js"></script>

and this in your </body>

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsnest',
    (listInstances) => {
      console.log('cmsnest Successfully loaded!');
      window.fsAttributes.cmsfilter.init();
    },
  ]);
</script>
12

@Support-Luis This seems to be working better, but the clear buttons for each category still aren’t working. Any ideas on why that would be? I have the following attributes on the 3 clear buttons respectively:
fs-cmsfilter-clear = solutions
fs-cmsfilter-clear = audiences
fs-cmsfilter-clear = topics

13

Hey @Poetic, all your clear buttons should have the fs-cmsfilter-element='clear' Attribute, just like the image below.

Screen Shot 2023-09-11 at 19.11.51

14

@Support-Luis

Ok, the bugs are gone now, but none of the filters are working.

Any ideas on how to get the filters working?

To test filters, I added all possible tags to content item “Webinar 3”, but no items are showing up when I try to filter.

Screenshot 2023-09-13 at 8.22.17 AM
Screenshot 2023-09-13 at 8.22.17 AM2182×495 40.9 KB

Screenshot 2023-09-13 at 8.24.07 AM
Screenshot 2023-09-13 at 8.24.07 AM1653×666 39.4 KB

15

If we change the filter element to checkboxes/radio does the filtering work? I’m afraid the dropdown might be breaking the setup

16

@Support-Luis These are filter elements in the accordion are checkboxes styled as buttons sourced from FS accessible component library.

Why would the accordions break the filtering? Many community & relume cloneables use accordions in their filtering setups that are powered by FS Component Preview
Accessible Components for Webflow. Ready to use.

17

@Support-Luis I also noticed that in this FS combo cloneable, the second list being combined also has the filter attribute. Are you sure that should be removed from the other resource lists?
https://webflow.com/design/finsweed-cms-filter-combine-and-load?pageId=64a612b915899abfa3f7c812

18

I tried replacing the accordion with a dropdown and it is still not working so I dont think that is the issue.
I also added the filtering element to the combined lists and that is not helping either. Any ideas?

19

@Support-Luis Following up on this, this site is supposed to launch soon so these filters need to be functional

20

hey @Poetic I am not sure what is breaking the filter setup. Could you create a test page with only the CMS Filter setup? If we get the same setup working on this test page we can then find if any script is breaking or blocking CMS Filter