Module «btn-more». Загрузка дополнительных элементов

Демо:

Плагины:

Подключение:

//

Разметка:

//

<a href="#" class="btn-more btn-load" 
    data-link="{{ $link }}&page=2"
    data-type="{{ $type }}"
    data-target="{{ $target }}">
    <span>Показать еще</span>
    <div class="btn-load__spinner"></div>
</a> 

Стили:

//

Инициализация:

// modules/btn-more.js

import { template } from "lodash";

function html(item, type) {
    const templates = {
        material: template(`
        <div class="col-12 col-md-6 col-lg-4 col-xl-3">
            <div class="fl-card" itemtype="http://schema.org/Product" itemprop="itemListElement" itemscope="">
                <div class="fl-card-img">
                    <img src="<%= main_image %>">
                    <meta itemprop="image" content="<%= main_image %>">
                </div>
                <div class="fl-card-content">
                    <div class="fl-card-content-header" itemprop="name"><a href="<%= link %>" class="btn-link-gray large-text fw-bold mar-b-4" itemprop="url">
                        <%= name %>
                    </a></div>
                    <div class="fl-card-content-body">
                        <div class="price-block-mini mar-b-1" itemtype="http://schema.org/Offer" itemprop="offers" itemscope="">
                        <span>от </span><span class="price-block__price"><%= price[0] %><sup>.<%= price[1] %></sup></span><span>
                        <% if (unit) { %>
                            <%= unit.for %>/<%= unit.short %>
                        <% } %>
                        </span>
                        <meta itemprop="price" content="<%= price.join('.') %>">
                        <meta itemprop="priceCurrency" content="RUB">
                        <link itemprop="availability" href="http://schema.org/InStock">
                        </div>
                        <div class="description-wrapper line-clamp-5 mar-b-4 small-text" itemprop="description">
                            <%= description %>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        `),
        fail: template(`
        <div class="infoblock-service-item">
            <div class="fl-card">
                <div class="fl-card-img">
                    <img src="<%= image %>" />
                </div>
                <div class="fl-card-content">
                    <% if (name) { %>
                        <p class="small-text fw-bold"><%= name %></p>
                    <% } %>
                    <div class="mar-t-1">
                        <span class="small-text">
                            <span class="fw-bold">Описание:</span>
                            <%= description %>
                        </span>
                    </div>
                    <div class="mar-t-1">
                        <span class="small-text">
                            <span class="fw-bold">Решение:</span>
                            <%= solution %>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        `),
    };

    if (type === "service") {
        return templates.material({
            ...item,
            main_image: item.image,
            price: item.from_price,
        });
    }

    return templates[type](item);
}

function handleBtnClick(e) {
    e.preventDefault();

    const CLASS_LOADING = "loading";

    const $btn = $(this);

    const isLoading = $btn.hasClass(CLASS_LOADING);
    const { link, type, target } = $btn.data();

    if (isLoading || !link) return;

    $btn.addClass(CLASS_LOADING);

    axios
        .get(link)
        .then((response) => {
            const $target = $("#" + target);

            // add html
            response.data.data.forEach((item) => {
                $(html(item, type)).appendTo($target);
            });

            // update button
            const link = response.data.links.next;
            $btn.data("link", link);
            if (!link) {
                $btn.hide();
            }
        })
        .catch((error) => {
            console.error(error);
        })
        .finally(() => {
            $btn.removeClass("loading");
        });
}

$(function () {
    $(document).on("click", ".btn-more", handleBtnClick);
});