Is it possible to lazy-load children pages?

Archive
1

Hi,
I’m trying to implement a lazy-loading mechanism to load my children pages.

This would be similar to pagination, but the differente here would be:

  • I don’t want to use the pagination plugin
  • I would like my content to be appended via AJAX to the bottonm of mny page, everytime user presses “load more” (let’s ignore for now the JS mechanism to actually lazyload content with onscroll event)

Let’s say for example I have a parent page with a collection of 40 children, so

  1. parent page 1st time loads, say, the first 10 items
  2. parent page has a “load more” button
  3. when “load more” button is pressed, next 10 items are appended to bottom of parent page

This is more or less the concept I’m trying to achieve.

Firs time calling parent page I would have this URL

http://server/parent_page

And the twig code for that parent page would be something like this

{% for page in collection %}
{% if loop.index > load_item_from %}


… content here …

{% endif %}
{% endfor %} 

When pressing the "load more" button an AJAX call would be made to
http://server/parent_page?load_item_from=10

and the next 10 would be appended to a DIV,

and so on...

The problem is that I'm still struggling how to achieve this.
Maybe I have to create an external twig template to return the HTML I need, but I'm not sure how would I pass the collection to that external template, or how could I make that external template to read the "parentpage" children.

Any tips ?

Cheers
2

I think this would be doable with a plugin. That plugin basically would need to be configured with the collection criteria, and then get the current offset and perhaps even page count, so that it could calculate and send back via ajax the next batch of pages.

Although this is definitely doable, there is no existing plugin that does this that I know of. Maybe someone in the Gitter.im chat room would work on it if you ask nicely enough :slight_smile: