Hi all, I have a collection with 20 items. My goal is to display the first 4 items on page load and allow the user to click a “Load More” button to show another 4, and so on. In addition to that, I’d like to have some very basic “exclusive” filtering allowing the user to select a category to view items filtered by that category. (Each collection item has 1 of 3 categories assigned to it.)
Test 1
I’ve tried using the tabs element to mimic filtering, with each tab containing a separate, filtered version of the collection and using the Finsweet Load More extension for that part.
Here is the read-only link for that page.
And here is the live link for that page.
The problem is that the “Load More” button doesn’t hide after all items are displayed because items begin repeating for some reason. This occurs in every tab except whichever tab is open on page load.
Test 2
I’ve also tried using the Finsweet Filter extension (instead of tabs) in addition to its “Load More” extension (as in the first test page).
Here is the read-only link for that page.
And here is the live link for that page.
The problem here is that filtering only applies to loaded items so the user needs to load all items before filtering can work properly.
My next thought was to try a more manual approach, simplying dumping all collection items on the page and using custom JS to do everything. That’s doable, right? And is that the only way to accomplish this?
Thanks!