Infinite Scroll
How Do I?
Hello, what method would you recommend for implementing infinite scroll?
I’m currently using the following:
{exp:channel:entries … }
…
{paginate}
{pagination_links page_padding="10"}
<div class="row mx-auto mt-3">
<div class="col">
<nav class="d-inline-block">
<ul class="pagination">
{page}
<li class="page-item {if current_page}active{/if}"><a href="http://{pagination_url}class=page-link">{pagination_page_number} {if current_page}<span class="sr-only">(current)</span>{/if}</a></li>
{/page}
</ul>
</nav>
</div>
</div>
{/pagination_links}
{/paginate}
{/exp:channel:entries}
Just like most things, there are probably a ton of ways to do this. However, is an overview of how I’ve implemented a “Load More” button before, which can then be fired automatically on scroll events to create an infinite scroll.
What You’ll Need:
- A template where you’re content is going to be displayed. we’ll call this
page.htmlOn that page you will need:- A
<div>to display the results - A button that can be used for as a “Load More”
- A
- A separate template to be called via AJAX with pagination we’ll call this
ajax-results.html - I did this with jQuery, but you’ll need to know how to do AJAX (XMLHttpRequest XHR) functions with whatever JS framework you’re using
Implementation
- When
page.htmlis loaded, you’ll need to fire an AJAX call to retrieve the contents ofajax-results.html. This will be your users’ initial view. - We then need to grab the “next page” link from our pagination and assign it to the
hrefof our Load More button. - The Load More button will also need have an eventListener attached to it so that when the user clicks it, they are not navigated away from the page.
page.html Template
<div id="my-results-here">
<!-- his div will be filled in by ajax results -->
</div>
...
<!-- this will be our Load More button -->
<div>
<a href="#%22class=%22button" class="button loadMoreResults">Load More</a>
</div>ajax-results.html Template
{exp:channel:entries ... }
....
{paginate}
<div id="pagination_links">
Page {current_page} of {total_pages} pages {pagination_links}
</div>
{/paginate}
{/exp:channel:entries}This will create a pagination section similar to this: Link: https://www.awesomescreenshot.com/image/6553432?key=5d3354da43ef03dd67704e0399805766
In that pagination, all we really care about is the value of >, as that will be the link to the next set of results.
javascript
A lot of things need to happen here. This is the abridged version, so I’m hoping you can fill in the rest.
// First you need to a function to load the initial results into your div on page.html
$.get("my link here", function(data) {
...
});
//Now that we have the data. We want to hide the pagination but steal its link with something like this
var nextPage = $("#pagination_links a:contains('>'),#pagination_links a:contains('Next')").attr("href");
//conditional check to make sure there is a next page. Otherwise you don't need to load more results
if ($(".loadMoreResults").length > 0) {
//show our Load More button, apply the link from pagination, remove the pagination from the screen
$(".loadMoreResults").show();
$(".loadMoreResults").attr("href", nextPage);
$("#pagination_links").remove();
}
//now we have our data displayed and a Load More button. Let's hijack that button to append the next page of data to our current results
$(".loadMoreResults").off('click').on('click', function(event) {
event.preventDefault();
$(".loadMoreResults").hide();
var ajaxLink = $(this).attr("href");
var dataDiv = $(".loadMoreResults").attr("data-div");
$.get(ajaxLink, function(data) {
...
// get the results and append your #my-results-here div to display results with something like
$("#" + dataDiv).append(data);
...
});
});
// finally if there is not a "next page "in the result, then hide the pagination, and your load more button
$("#pagination_links").remove();
$(".loadMoreResults").hide();Once you get that working, the next step is to have all that happen by magic. For that, I’m going to offload you to this tutorial here for a basic implementation of infinite scroll. Here is a screencap of the above in action with the manual “Load More” button: https://giphy.com/embed/XoGA3PyWYQAf80vHlh