Hello, I’m using finsweet to set up a filter by category for a client’s site featuring a directory of ~225 listings; these should be filterable by clicking checkboxes in 4 dropdowns:
country (9 items)
session type (2 items)
client type (2 items)
specialty (2 items)
By the way, I used reference fields, not multi-reference fields. I hope this is okay.
I have set everything up; the one thing I am struggling with is the actual filter function.
I have watched YT and Webflow University videos, but the site is still not filtering when I click the checkboxes. Could anyone please help me figure out what I am doing wrong?
Thanks, I finally realized that :( Would you mind taking another look at the site?
All the checkboxes are stacked on top of each other right now.
Do you know why the other checkboxes disappear when a checkbox is clicked? Right now, I can’t click other checkboxes to filter down even more because they disappear.
Is it possible to put groups of checkboxes into 4 different dropdown menus, and have them be able to filter when the checkboxes are clicked? Jetboost?
Or do you have a suggestion for another way to present the 4 categories of checkboxes?
What you’re building is fine. I’m more familiar with FS Filter + FS Load setups in the projects I build for clients.
The rest is just getting your design to work the way you want. Make sure you’re not doing something strange with your positioning, z-index. etc. your checkboxes shouldn’t stack.
For the disappearing checkboxes, I have no idea what’s going on. I don’t think it’s the z-index. Not sure what about the positioning could be causing it. What do you mean by they shouldn’t stack? They are stacked vertically - is that an issue?
I asked ChatGPT about the disappearing checkboxes. I don’t think any of them apply to me:
My responses to ChatGPT’s suggestions:
Re 1) I only added finsweet’s script for Filter and Load into the head of the page.
Re 2) I did not mess with the conditional visibilities.
Re 3) I didn’t mess with FS’s script that I pasted into the head of the page.
Re 4) “use event delegation in JavaScript to handle filter changes dynamically.” - I don’t know what this means. I don’t know much JS
Re 5) I don’t see anything changing in the code using Developer Tools when I click a checkbox.
ChatGPT’s suggestions:
1. Incorrect Filtering Logic in JavaScript
If you’re using custom JavaScript to implement the filtering, the script might be hiding categories that don’t match the current filter instead of narrowing down the visible collection items.
Fix: Ensure your script updates the filtered items without affecting the visibility of the checkboxes. The checkboxes should remain visible regardless of the filter’s result.
2. CMS Conditional Visibility
If you’ve set conditional visibility on the checkbox elements tied to the CMS collection, they may disappear when the filtered collection updates and doesn’t match the selected criteria.
Fix: Go to the checkbox elements in your design and remove any conditional visibility settings tied to the current filter.
If you’re using Finsweet’s CMS Filter or similar plugins, the configuration might be set to only show categories related to currently visible items.
Fix: Check your plugin settings and ensure that the checkboxes are configured to always show all filtering options, even when certain items are filtered out.
4. Reloading the Filter Interface
Some setups reload the filter interface after each interaction, causing the checkboxes to refresh and potentially disappear due to filtering results.
Fix: Update the filtering logic to only refresh the CMS items, not the checkboxes. For example, use event delegation in JavaScript to handle filter changes dynamically.
Troubleshooting Steps
Inspect the DOM: Use your browser’s Developer Tools (usually F12) to see what happens when you click a checkbox. Are the other checkboxes being removed from the DOM, hidden with display: none, or otherwise modified?
Disable Conditional Visibility: Temporarily disable any visibility conditions on the checkboxes to confirm whether they’re causing the issue.
Test Without Custom Code: If you’re using custom JavaScript, disable it temporarily to see if Webflow’s native CMS filtering works correctly.
Review Plugin Documentation: If using Finsweet or other filtering tools, double-check their docs to ensure your setup matches the intended use case.
Also, do you know how I can adjust the pagination so that the page numbers don’t stack vertically? It must be a Layout issue, but I don’t know which layout to choose…
Ah you said they were “stacked on top of each other”, which I assumed is a layering problem you’re trying to fix. Stacking usually refers to z-index. If there’s a problem there you’re trying to fix you might need to clarify.
Not sure what you mean by disappearing, as you haven’t shared a live link. If you mean disappearing when you’re using the filter, I’d recheck your FS attributes.
Finsweet setups can be a pain to debug depending on the complexity and what you’re trying to accomplish. Because of this Finsweet has their own paid support forum you might check with if you can’t solve it.
Someone mentioned having a similar problem due to using a reset (an old version of FS’s at that). They said to try checking any custom css for any inputs that are Webflow-specific classes.
But I never added any custom CSS. And the issue remains after I delete the reset link.
Sorry for all the replies, just trying to see if anything might make sense to you (I’m still rather new to web development).
I do have separate CMS collections for the 16 total checkbox categories. Should they be in one CMS collection in order for FS to work? But then I can’t put headings between the checkboxes to separate them into 4 categories. So maybe not.
It’s working! Thanks to FS’s A.S.S. (Automated Support Service), I found that the issue was: “The attribute fs-cmsfilter-element=“list” is found duplicated on the page. Remove the duplicated attributes from the page.” I had placed it on the “blog posts”/directory wrapper AND on the category filter wrapper; it should be only on the directory wrapper.
How do I fix the pagination layout so the page numbers are horizontal (not vertical)? They are already in flexbox.
Also, how do I present the checkbox labels and blog posts (CMS collections) alphabetically?