I experiencing an issue with CMS Filter in combination with CMS Load functionality.
I have a list, with one filter applied (different categories / radio buttons) and want to show 3 items per page. With CMS Load functionality I load the next items. With selecting a different category I do a reset of itemsPerPage and show the first 3 items of this category. This seems to works fine except in one scenario:
I have a total amount of 10 items with no filter applied (filterInstance.filtersData.values.size = 0)
With no filters applied (clicking on «Projekte» on my site) you click 4 times on «mehr» to display all items.
If you now select filter «Corporate» (there are a total of 4 items) and you click on «mehr», the whole page reloads.
Instead of displaying the 4th item of «Corporate» (as expected), the load more (next-page) button refreshes the page with showing the query-string. The URL is extended and page=2 is attached. You also see, that the filter «Corporate» is not applied correctly. This only happens, when I first display all items with no filter applied.
It seems, that the load more button looses the click event of cmsLoad and follows the href attribute. But I can not figure out why this happens?
Hey @Tobias! May I ask why are you using custom code here? This functionality is possible natively.
You’ll just need to set fs-cmsload-mode = load-under attribute to your list, this will continue loading your items below the currently loaded ones. Once the whole list is rendered, if you filter for “Corporate” you’ll see the 4 items that match the filter rendered on the page.
If I’m missing something please let me know and I’ll help you get the exact setup you are after
Hey @Support-Luis
You are right, that I want to have the effect of fs-cmsload-mode = load-under. But that is not the issue. Let me explain better:
Everytime I want to filter for “Corporate”, “Digital”, etc. I want to reset the itemsPerPage to 3. And then want to load more items. In the example, “Corporate” filters 4 items. (these items will increase, when the collection is filled completely).
It works fine except when I load all items on the page and afterwards click on “Corporate”/“Projects” and then want to load the next items.
Then the issue occurs: The page is reloaded and a query string is added to the URL.
@Support-Luis Can you follow the click-sequence and retrace the error?
Thanks for your support.
P.S.
I tried fs-cmsload-mode=load-under but that does not solve the issue.
Hey @Tobias! I’ve been testing several options today but I’m afraid I can not get the exact functionality to work.
Seems that as soon as we modify the itemsPerPage we break something. I will have another look early tomorrow with fresh ideas… I’ll get back to you
I confess, that I struggle to hit the point, where the issue belongs to. In my poor understanding, cmsload is destroyed when the total of items is visible. With the next click on the load more button, the failure occurs. But I tried to destroy/init the modules without success. Even destroy/init Webflow does not work.
The funny thing is, that it all work properly if not all items are shown…
Thanks again and good luck for tomorrow
Hey hey @Support-Luis - Thank you very much. Your effort is very much appreciated. If it cannot be done with V1 and I have a perspective when V2 is rolled out with this function, I can go on with other stuff of my site. And if you need a beta-tester, well reach out
