Conflict of "Load More" and frontend filters/search

Hello WeWeb!

I tried “Load More” pagination option and it slices my data by chunks ex. 20 items.

When I use FE filters then it conflicts with Load More because if filtered items are not in first 20 items then user doesn’t see anything, it shows empty list & load more button.

Can I bind “Load more” not to the whole cached collection data list but to list of results of filters/ search?

Additional question: I want to bind display of load more button to result of list filtering and do not show button when NR of items is less then left after filtering/searching, currently it can be binded to totalFetched and works wrong with filters.

This is a blocker for my app coz usually all modern e-commerce apps have “load more” for products on scroll instead of using pagination with pages, and I have many filters on page as well.

I have to understand should I use backed nav for filtering or trick with front end or what to do:)

@Joyce can you please take a look :pray:

@Anna.fae For load more on page scroll… are you comfortable with a little bit of javascript? You could create an element that triggers a variable change when it is brought into the viewport. This could then cause a refetch of the data with updated/more loaded data.

You could keep the filter in place and continue to only show the filtered data.

I’m pretty sure we could find a solution to what you are wanting to do with a little bit of javascript.

2 Likes

How are you filtering the collection?
You can bind your pagination logic to a filtered collection.
Example with a sample products database with name and price:

chrome_BHGPIOjMXV

Of course you can also have a collection filtered and paginated on the backend or you can fetch the full unfiltered collection and you filter it on the frontend, just bind the columns item to the filtered result.

“load more” on scroll needs custom code. Ideally it should trigger a workflow action when the end of the page, or a specific element, enters the viewport so you can execute the actions needed for your pagination.

Hope this helps with

1 Like

AMAZING thank you!

1 Like

Ha! I’m a bit late to the party. Apologies, it was a crazy week with a crazy changelog :sweat_smile:

Glad you find a solution @Anna.fae!

Thanks for helping out @dorilama and @kevinwasie :hugs:

2 Likes