Sulu: how to implement "load more" button with smart content?

Question

So I defined my field like this:

    <property name="news" type="smart_content">
        <!-- @see https://docs.sulu.io/en/2.2/reference/content-types/smart_content.html -->
        <meta>
            <title lang="en">News</title>
            <title lang="de">Nachrichten</title>
        </meta>

        <params>
            <param name="provider" value="articles"/>
            <param name="types" value="news"/>
        </params>
    </property>

and my twig template looks like:

<div>
    {% for article in news %}
        <a href="{{ sulu_content_path(article.routePath) }}" >
            <h2>
                {{ article.excerpt.title|default(article.title) }}
            </h2>
        </a>
    {% endfor %}
</div>

It grabs articles of "news" type and that works well. Now I need to implement "load more" kind of pager. So I should at start show i.e. 5 latest articles and bellow them "Load more" button and when clicked another 5 should be loaded and again when clicked another 5 and so on, until there are news articles available. I didn't see anywhere in sulu documentation that "load more" feature is mentioned.

What is the best way to achieve this?

Answer 1

I created a github gist a while ago showing exactly how this works. See https://gist.github.com/luca-rath/d16c0ad74fa06da49fed22404a53398b