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.)
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.
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.
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).
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?