Демо:
Плагины:
Подключение:
//
Разметка:
//
<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);
});
0 комментариев