I’m working on an educational site where I will post a new lesson each week. I have a lesson CMS collection which contains a reference field to another CMS collection called “Lesson Categories”. I then have a page with a collection list of the lessons which is sorted by the date they were posted.
I’m currently trying to figure out how to add a dropdown menu above the lesson list that is populated from the Lesson Categories collection and have that menu filter the lesson collection list below to only display lessons that are assigned the topic chosen that is chosen from the menu and default to ALL.
It’s a two part project:
Creating a dropdown populated from a CMS field
Getting the choice in the dropdown to filter a collection list
I’m trying to reproduce this which is currently done in Wordpress which filters which lessons appear in the grid below the menu:
You’re on the right track, and the two-part solution will involve both creating a dynamic dropdown and setting up filtering functionality for your lessons.
What is the best way (or any way) to cause a dropdown to be populated from a CMS field? When I add a dropdown, I do not see an option to have it’s contents be based on a CMS field.
How specifically to I get the selection from the dropdown to cause a collection list to become filtered?
To populate a dropdown from a CMS field in Webflow, bind it to the “Lesson Categories” collection using the “Get Options from a Collection” feature. Then, use custom JavaScript to filter the collection list based on the selected category. Add an event listener to the dropdown that hides or shows collection items based on the selected value. Set the default to “All” for unfiltered results. If you encounter any issues, feel free to connect for further assistance.
But I was able to produce a dropdown by generating the HTML needed via a series of Custom elements as described in this YouTube video: https://youtu.be/VELbXHIoYcg?si=4HlXrN1TKObsHhdv
The only thing I don’t like about that solution is that it does not show up in the Webflow preview, so I have to publish the page and view it directly to see the menu populated with options.
Now I’m starting to research how to use JavaScript to get that to filter my collection list. Thanks @CloudCoder for steering me towards event lister, which is what I’ll look into next.
??? CloudCoder, that’s not a feature. Are you using ChatGPT? Please check your responses to avoid confusing forum members.
@Ben_Willmore You can use a collection list for the data, and custom elements to construct your <option> elements. Or, have a look at Finsweet’s CMS Select library which will do the databinding for you.
Also have a look at Finsweet’s CMS Filter and CMS Load if you’re building a filtering setup.
I was able to get the menu setup, but am having difficulty getting it to filter my collection list. I tried using Grok to help me figure out how to create the JavaScript needed to filter the collection, but find I have an issue with a custom attribute not being able to get its data from a collection field that is a reference to another collection (one that contains lesson categories).
When I was trying to troubleshoot, I added a heading to the collection list I’m attempting to filter and bound to the same collection field that the custom attribute was using, it shows up in webflow’s preview, but not when I publish the site. (I don’t want the category to be visible, which is why I was first using a custom attribute on the tag)
You didn’t share your published site, so I can’t see what you’re describing, but check your custom scripts etc to see what modifications they’re making to your page.
I personally would not reinvent the wheel here. The FS toolkit gives you everything you need for filtering and sorting and even better, it works with pagination to solve the collection list’s 100 item limit.
