I am working on a project we call Inspiration Tool where we collect examples of good UX practices for clients and internal team members to reference. Previously we used MongoDB for this but wanted to bring it over to Webflow to flesh out the rest of the site and create an all in one site.
We currently have 309 entries and I have used the Finsweet JS library to create dynamic filters based on a tag system on the frontend BUT I’ve hit a snag with the 100 item limit.
I’ve realised the Finsweet JS only hides the items based on the filters, it isn’t querying the CMS and then showing the relevant entries and as a result only the 100 items shown are filterable, not the whole collection.
Is there a way to make this happen in Webflow via JS alone? So filter tags/buttons on the frontend can be clicked by users, which then queries the CMS based on tags, and returns the relevant items.
I did find a solution from the Finsweet library which was to use their “Load more” JS with pagination to load all of the content on the page and then hide it. This worked in that all content was filterable but the impact on performance was horrible.
Any advice, tips, recommendations would be great. Pretty stuck on this one and the tool is pretty useless unless content can be pulled from the CMS when queried.
Links below, thanks!
Read-only link: https://preview.webflow.com/preview/the-hub-61e59c?utm_medium=preview_link&utm_source=designer&utm_content=the-hub-61e59c&preview=a2c2738a2c03c05803b12232053c8148&pageId=606d88b8c94bccb56dac13ee&mode=preview
Live link: Inspiration Tool