Enable Infinite Scroll
Settings & Defaults ->
Display Results -> and change
Pagination Type to
Infinite Scroll, then update the Search Form.
Immediately you will see that when you scroll to the bottom of your results, a loader appears and new results are loaded in (if there are any).
Search & Filter is copying everything from your `Ajax Container` (from your next set of results) and appending it to the `Ajax Container` on your current page,
This is probably not what you want, you’ll likely have a bunch of other content / results data that gets copied across and duplicated, including messages such as
Showing results 1-10 of 140
And your pagination, what you probably want is only the results themselves to be loaded in. That’s where the next two options come in.
You will likely only need to use 1 of the options.
Using the `Post / Result Selector` Option
This option allows you to tell S&F which html tags or other CSS selector actually contain your individual results.
This settings is
relative to your
Ajax Container so this might be as simple as:
Test your search form again. You will now see only the posts/results are copied over to your
Ajax Container. In addition to this, the new posts are placed directly after the last post in the list matching this selector.
Using the `Infinite Scroll Container` Option
In some cases using the
Post / Result Selector option might be possible (or preferable). In this case, it might be possible to only specify a secondary container.
In the Enable Infinite Scroll step we identified that all the content was being copied from the
Ajax Container , however we wanted to isolate the posts only. This setting allows you to specify a secondary container which will container only your results.
This container must contain only the posts/results themselves, otherwise you will get duplicated content in your results. No search related meta data should be inside this container.
Containers & Selectors
To help explain the above a little more clearly take a look at the following images to give a better overview of the area and type of content they are supposed to contain.
The last step is to remove / hide your existing pagination. This can be done by editing your template and removing the code referencing pagination, or simply by CSS.
In most cases some CSS as simple as the below would do the trick:
(of course you wouldn’t want to apply this to your whole site!)
Preventing the Double Load Effect
Because S&F won’t know when the end of your results are, often there is an additional request/load results, and loading icon, when S&F tries to fetch more results. It has to do this twice to confirm.
To cut this out, all you need to do is include a simple
data- attribute somewhere in your no results message, to tell S&F, this is the actual end of results and don’t bother trying to fetch anymore.
This is as simple as adding
data-search-filter-action='infinite-scroll-end' to any html element in the no results area, and within the
So a no results message could be as simple as:
No more results
and this would be changed by wrapping the message in a span and attaching the attribute:
<span data-search-filter-action='infinite-scroll-end'>No more results</span>