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 Likes
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?

1 Like
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.

3 Likes
4

Awesome! Thanks so much.

1 Like
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.

2 Likes
6

Hi there, would like to bump this as we are looking to use this kind of functionality as well. I Really with get-grav itself were open source so we could take a look at how things were being used. We would like to use the infinite loading ability as well, perhaps that could be turned into a plugin itself? Thanks!

7

I am new to Grav and mostly happy with it, but I am not able to implement this functionality on my own. I see that there has been no activity on this topic for over five years, which surprises me.

Could I please get a little bit more info, as in how to implement the javascript and how to make it work with any type of post elements. I tried to add this to the default quark template with moderate success. Somehow with the help of ChatGPT I made it so far that it would load the next pages content when scrolling, but it would include the full header of that page and cause chaos in my browser. But I am also new to git, and made an incorrect request and accidentally overwrote my small success.

Raising all my fingers for some help!

1 Like