Infinite Scroll Page Collection/Posts


#1

Hey,

I’m trying to use the Pagination plugin but instead of clicking through pages have it load more results into the same page. I found this old post: Infinite Scroll Posts which says to look at the code used on https://getgrav.org/blog.

I tried doing that but using the code from there loads the whole page instead of just the post items. It basically looks at the URL in the “next button” and ajax loads that page in. I noticed there is something else custom going on in the links for the next button:

 <div class="next"><a rel="next" href="/blog/tmpl:infinite/page:2">Load More...</a></div>

Assuming that tmpl:infinite part is tied to some other custom stuff going on to get it to work correctly.

If someone can point me in the right direction it would be great.


#2

Also just found this questions which is basically more along the lines of what I really want to do: Is it possible to lazy-load children pages?


#3

The infinite.html.twig from getgrav.org is actually pretty simple:

{% set collection = page.collection %}
{% set pagination = collection.params.pagination %}
{% set blog_url = base_url~'/blog' %}

{% if pagination|length > 1 %}

    {% for item in collection %}
        {% include 'partials/post-card.html.twig' with {'page':item}%}
    {% endfor %}

    {% include 'partials/load-more.html.twig' %}

{% endif %}

This is just called via ajax to render the posts as HTML and send that response to the ajax call.


#4

Awesome! Thanks so much.


#5

Hey, does partials/load-more.html.twig replace what would be the pagination.html.twig ?

i created a duplicate of pagination.html.twig called pagination-case-studies.html.twig and in there to show the “load more” button and set the proper URL I have:

  {% if pagination.hasNext %}
    {% set url = base_url ~ '/tmpl:infinite-case-studies' ~ (pagination.params ~ pagination.nextUrl) %}

<p class="u-txtCenter  u-pt4">
  <button data-href="{{ url }}" class="button  button--primary  js-loadMoreBtn" data-totalPages="{{ page.collection.params.pagination|length }}">
    Load More <span class="loader  loader--xsm  loader--doubleBars  is-spinning  js-spinner" style="display:none;"></span>
  </button>
</p>

  {% else %}

  {% endif %}

Everything is actually working as expected but I do notice that the URL adds the /tmpl:infinite-case-studies part twice after I load in the second set of pages.

So on page load the URL for the Load More button is correct: /solutions/customers/tmpl:infinite-case-studies/page:2

But once I click the button and do the ajax call to load in the next set of pages, the new load more button that I load in with the content now has this as the URL: /solutions/customers/tmpl:infinite-case-studies/tmpl:infinite-case-studies/page:3

notice it added the tmpl part in the url twice. Everything still functions correctly if i continue loading in content, but all of them have that tmpl part twice.

Should I just ignore this since things seem to work fine? Or is the way im building the “url” variable incorrect?

Would love to see what you are doing in the load-more.html.twig if possible.