10

I'm looking to create an infinite scrolling section of entries on a site we're building. Has anyone tackled this yet? What's the best way to approach this?

8

Here's the approach that work for me. Using Infinite Scroll jQuery plugin.

In the header, I'm checking whether this is AJAX request or not and use different layout based on that. This is optional though.

{% if craft.request.isAjax %}
{% set layout = "_ajaxLayout" %}
  {% else %}
{% set layout = "_layout" %}
  {% endif %}

{% extends layout %}

In the content area, I have:

<div id="newsPage" class="container">
<div class="row" id="newsRow">
{% paginate craft.entries.section('news').limit(3) as entriesOnPage %}
    {% for entry in entriesOnPage %}
    <div class="col-md-4 col-sm-6 margin-bottom">
        <div class="item">
            <div class="entry">
                <h2>{{ entry.title }}</h2>
                <div class="date">{{ entry.postDate|date("M d, Y") }}</div>
                {{ entry.body }}
            </div>
        </div>
    </div>
    {% endfor %}

    {% if paginate.nextUrl %}
    <div class="pagination">
        <a href="{{ paginate.nextUrl }}">Next Page</a>
    </div>
    {% endif %}

{% endpaginate %}                                           
</div>
</div>

Then, somewhere in the footer (note the If, I put it to make sure the infinite scroll fors only on first page)

{% if craft.request.pageNum==1 %}

{% paginate craft.entries.section('news').limit(3) as entriesOnPage %}
{% if paginate.nextUrl %}
<script src="/resources/js/infinite-scroll/jquery.infinitescroll.min.js"></script>
<script type="text/javascript">
$('#newsPage').infinitescroll({
 navSelector  : "div.pagination",            
 nextSelector : "div.pagination a:first",    
 itemSelector : "#newsPage>div.row",
 maxPage      : {{paginate.totalPages}},
});
</script>
{% endif %}
{% endpaginate %}   

{% endif %}
  • Does it have any downsize from Craft's site using infinite scroll? – Dom Krulak Mar 24 '15 at 16:47
  • @Dominik If you don't build carefully, visitors without JavaScript (and crawlers) might not make it page page one. Yuri's approach, and my quick test with Waypoints.js recommended by Ben, rely on a working+standard pagination link and therefore do just fine! – Matt Stein Mar 24 '15 at 18:58
  • I'm aware of that, but due to statistics, globally around 1% of internet users, browses the web with javascript disabled. By some time, turning off Javascript will not be optional. Waypoints infinite scroll is another option, but it does pretty much the same job as infinite scroll, depends on quality of coding. I found, that Google found solution for it. Wouldn't be bad to make it happen. – Dom Krulak Mar 24 '15 at 21:22
5

To handle this I would use Craft's pagination tag.

I would get the URL out of the next link to determine the URL address to do the ajax call on and pull in the next chunk of content with ajax from that page when you hit a certain scroll point on the page which you would need to configure with javascript.

Also because you care about all users even the ones without javascript you will make the next button visible to users without javascript so they can access all the content since they can't "infinite scroll" :)

1

Infinite Scroll plugin for Craft CMS 3,

Installation

To install the plugin, follow these instructions. 1. Open your terminal and go to your Craft project:

cd /path/to/project
  1. Then tell Composer to load the plugin:

    composer require statikbe/craft-infinite-scroll

  2. In the Control Panel, go to Settings → Plugins and click the “Install” button for Infinite Scroll.

1

Here's article on my blog that describes how to implement infinite scrolling using Element API plugin:

http://craftsnippets.com/articles/infinite-scrolling-and-lazy-loading-with-craft-cms?s=s

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.