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:)
@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.
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:
Create a dynamic collection from Xano with prices filtered by price with a value bound to filter_price (you need to access the variable with variables['variable uuid'])
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.
Is it possible that WeWeb will provide a simplified way to filter collections with front-end pagination? Workarounds are possible but they are still workarounds. If I could set up a collection to be filtered or paginated, that would work. Thoughts?
