Load More Entries Button

Question

I am trying to make my entry loop have a load more button, and not sure how to do it. I tried the method from http://craftsnippets.com/articles/infinite-scrolling-and-lazy-loading-with-craft-cms but I could not get it to work.

Below is the code for my entry loop and "Load More" button. What would be the easiest way to make the "Load More" button functional?

            <div class="more-posts-wrap">

                {% set moreABetterPost = craft.entries.section('aBetterPost').all() %}
                {% for entry in moreABetterPost %}
                <a href="{{ entry.getUrl }}" class="more-post">
                    <div class="more-post-img-wrap">
                        {% set featuredImage = entry.featuredImage.one() %}
                        <img src="{{ featuredImage.getUrl }}" class="more-post-img">
                        <div class="red-overlay"></div>
                    </div>
                    <div class="more-post-content">
                        <div class="more-post-title">
                            <h3>{{ entry.title }}</h3>
                        </div>
                        <div class="next-icon">
                            <i class="fas fa-chevron-right"></i>
                        </div>
                    </div>
                </a>
                {% endfor %}

            </div>

            <div class="load-button-wrap">
                <a href="#">
                    <div class="load-button">
                        <p>Load More</p>
                    </div>
                </a>
            </div>

EDIT: Clarifying the structure of my site.

{# _main.twig #}
Header Stuff
Header Stuff
...
{% block content %}
{# All of my pages exist in here by extending _main.twig #}
Page Stuff
Page Stuff
Page Stuff
...
LOAD MORE ENTRIES AREA
{% endblock %}
Footer Stuff
Footer Stuff
Footer Stuff
...
{# End of _main.twig #}

EDIT 2: Showing the code that's not working in regards to James Smith's Answer.

_loadMore.twig

{% set theLayout = craft.app.request.isAjax and not craft.app.request.isLivePreview ? '_ajaxLayout' : '_main' %}
{% extends theLayout %}

<section>
    <div class="more-posts-section">
        <div class="section-header">
            <h2>More Posts in <span>{{ category.title }}</span></h2>
        </div>

        {% set entries = craft.entries.section('aBetterPost').limit(6) %}
        {% paginate entries as pageInfo, pageEntries %}


        {% block content %}
        <div class="more-posts-wrap-border">
            <div class="more-posts-wrap js-ajaxPagination">
                {% for entry in aBetterPost%}
                  {% include '_layouts/_post' %}
                {% endfor %}
            </div>
        </div>
        {% endblock %}
        
        <div class="load-button-wrap">
            <a href="{{ '/' ~ craft.app.request.pathInfo ~ '/p' ~ (pageInfo.currentPage + 1) }}" class="load-button js-loadMore">{{'load more'|t}}</a>
        </div>

        {% block ajaxContent %}
            {% for entry in aBetterPost%}
              {% include '_layouts/_post' %}
            {% endfor %}
        {% endblock %}
    </div>
</section>

{# ======================================
AJAX PAGINATION SCRIPT
========================================= #}

{% if pageInfo is defined and pageInfo.total > 6 %}
    {% js %}
        var currentPage = 1;
        var perPage = 6;
        var count = perPage;
        $('.js-loadMore').click(function(e){
            e.preventDefault();
            if({{ pageInfo.total }} > count){
                $.ajax({
                    url: $(this).attr('href'),
                }).done(function(data) {
                    var $new = $('.js-ajaxPagination').append(data);
                    var $button = $('.js-loadMore');
                    // increment the counters
                    count = count + perPage;
                    currentPage++;
                    $button.show().attr('href', '/{{ craft.app.request.pathInfo }}/p' + (currentPage + 1));
                    if({{ pageInfo.total }} <= count){
                        $button.remove();
                    }
                });
            }
        });
    {% endjs %}
{% endif %}

_page.twig

{% extends "_layouts/_main" %}
{% block content %}
   {# Other Page Stuff#}
   {# Other Page Stuff#}
   {% include '_layouts/_loadMore' %}
{% endblock %}

Answer 1

The Sprig plugin will save you a lot of trouble, and dynamically loading more entries is a perfect use-case for it. If you prefer to use jQuery, then by all means do so, but keep in mind that it is just as much of a dependency as Sprig. For the record, Sprig has been widely adopted and at the time of writing has over 4,700 active installs in the plugin store.

Here is the load more recipe component, adapted for your markup.

{% set limit = 10 %}
{% set offset = offset ?? 0 %}

{% set entryQuery = craft.entries.section('aBetterPost').offset(offset).limit(limit) %}
{% set entries = entryQuery.all() %}

{% for entry in entries %}
    <a href="{{ entry.getUrl }}" class="more-post">
        <div class="more-post-img-wrap">
            {% set featuredImage = entry.featuredImage.one() %}
            <img src="{{ featuredImage.getUrl }}" class="more-post-img">
            <div class="red-overlay"></div>
        </div>
        <div class="more-post-content">
            <div class="more-post-title">
                <h3>{{ entry.title }}</h3>
            </div>
            <div class="next-icon">
                <i class="fas fa-chevron-right"></i>
            </div>
        </div>
    </a>
{% endfor %}

{# If the total entry count is greater than the number that has been displayed #}
{% if entryQuery.count() > offset + entries|length %}
    <div id="more-posts">
        <div class="load-button-wrap">
            <a sprig s-val:offset="{{ offset + limit }}" s-target="#more-posts" s-swap="outerHTML" href="#">
                <div class="load-button">
                    <p>Load More</p>
                </div>
            </a>
        </div>
    </div>
{% endif %}

Answer 2

Here's a cut-down version of what I'm using on https://cld.agency/showcase

The quick example below uses jQuery, but I have a more complete updated version using vanilla JS here: https://github.com/cld-agency/craftwind-boilerplate/blob/craft-4/templates/_listings/default.twig

{% set theLayout = craft.app.request.isAjax and not craft.app.request.isLivePreview ? '_ajaxLayout' : '_layout' %}
{% extends theLayout %}

{% set entries = craft.entries.section('news').limit(12) %}
{% paginate entries as pageInfo, pageEntries %}

{# =============================================================================== #}

{% block content %}     
    <h1>News</h1>
    <p>Introduction</p>
    <ul class="js-ajaxPagination">      
        {% for card in pageEntries %}
            <li>{% include '_partials/card'  %}</li>
        {% endfor %}
    </ul>
    {# allow no-js/googlebot fallback with a regular href to the next page... #}
    <p><a class="js-loadMore" href="{{ '/' ~ craft.app.request.pathInfo ~ '/p' ~ (pageInfo.currentPage + 1) }}">Load more</a></p>
{% endblock %}

{# =============================================================================== #}

{% block ajaxContent %}
    {% for card in pageEntries %}
        <li>{% include '_partials/card' %}</li>
    {% endfor %}
{% endblock %}

{# ======================================
AJAX PAGINATION SCRIPT
========================================= #}

{% if pageInfo is defined and pageInfo.total > 12 %}
    {% js %}
        var currentPage = 1;
        var perPage = 12;
        var count = perPage;
        $('.js-loadMore').click(function(e){
            e.preventDefault();
            if({{ pageInfo.total }} > count){
                $.ajax({
                    url: $(this).attr('href'),
                }).done(function(data) {
                    var $new = $('.js-ajaxPagination').append(data);
                    var $button = $('.js-loadMore');
                    // increment the counters
                    count = count + perPage;
                    currentPage++;
                    $button.show().attr('href', '/{{ craft.app.request.pathInfo }}/p' + (currentPage + 1));
                    if({{ pageInfo.total }} <= count){
                        $button.remove();
                    }
                });
            }
        });
    {% endjs %}
{% endif %}

So the trick is forking which template gets extended depending on whether it's an ajax request. Your _ajaxLayout template would be as simple as just:

{{ block('ajaxContent') }}