I am using Finsweets Combined CMS to combine 2 Lists, in total 110+ items. I have designed a Search Bar to be used in the top part of my website.
Finsweet offers CMS Filter functionality, that allows your CMS List to have an initial state of 0 filtered items, to begin with. As soon as people start interacting with the filters you have created, the list starts showing relevant items, based on the filter input.
But here’s my problem: in this current situation, although the initial state visually doesn’t show any items, they (110+ CMS items) are still loaded into the DOM.
Similarly, when you search for something using my Search Bar, you can see that all other CMS items are removed from the page - they are no longer there. The only items that show are the ones matching your search query, and I guess if you could replicate this on page load, you would prevent 110+ items from loading in whilst you only need the items to be loaded in when people insert the search query.
What I would like to achieve is to have the page load with an “empty” state. So, have 0 items load in the page on page load, and when people interact with the filters, items load in based on filter input.
Can I prevent all Combined CMS items from loading into the page, and only load them when I interact with the filters? Using Finsweet.
Thanks a bunch for taking the time. Yes, this is what I did. This actually works very well, but the page still loads all your CMS items, but in a hidden state (unless I am wrong and missing something). And then when you interact with the filter, the items that match the filter are shown.
So if you look at your developer console, and you open your Collection List, on page load it shows 110 items. And when you filter, it shows (for example) 4 items.
I would like, on page load, to have 0 items, and when you apply a filter, it shows the 4 items (for example).
It is possible to use a third party data source and pull in data with custom code. Look at XANO for example of what I am talking about. Connect to Webflow | Xano
Thanks for taking the time. I get what you mean. Would it be possible to use lazy-loading in this instance? To somehow prevent everything from being loaded unnecessary? I’m out of my field here so I’m not sure if what I’m saying is even making sense. I tried searching about lazy-loading but only found resources regarding image-lazy-loading.