Streaming live at 10am (PST)

Query CMS and return relevant entries from the front-end?

Hey all,

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

I would consider using an external source / app that could present a JSON result set and was populated by the data. I worked up proof of concept using a Strapi instance populated with the CMS data and synced with Node, enabled GraphQL for remote queries for VUE instances in some pages. I quickly got frustrated with Webflow’s weak API but it’s doable. Client did not want to spend the money so I abandoned it.