Infinite Scroll

How Do I?

maxi

220 posts

one month ago

maxi

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}

Andy McCormick

75 posts

one month ago

Andy McCormick

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.html On that page you will need:
- A <div> to display the results
- A button that can be used for as a “Load More”
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.html is loaded, you’ll need to fire an AJAX call to retrieve the contents of ajax-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 href of 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

Reply

Sign In To Reply