Как сделать бесконечную прокрутку фильмов на киносайте? (скрипт ленты фильмов)

[admin]

https://imgur.com/SiRP1cu

Если Вы уже реализовали фильтр на Вашем киносайте по этой инструкции, то сделать бесконечную прокрутку будет для Вас еще легче.

У Вас в шаблоне category.ejs есть цикл фильмов, например такой:

<div class="catalog">
    <% /* Цикл фильмов */ %>
    <% if (typeof movies === 'object' && movies.length) { %>
        <% movies.forEach(function (movie, i) { %>
            <div class="catalog-item">
                <!-- Тут Вы выводите информацию о фильме, в каждом шаблоне разный HTML -->
            </div>
        <% }); %>
    <% } %>
</div>

После этого, у Вас стоит пагинация. Её Вам нужно будет изменить на одну единственную кнопку, которая отвечает за переход на следующую страницу.

<div id="cinemapress-scroll">
    <% if (typeof page.pagination === 'object') { %>
        <% if (page.pagination.next.length) { %>
            <a class="pagination__next" href="<%- page.pagination.next[0].link %>">
                <span><%- page.pagination.next[0].number %></span>
            </a>
            <!-- Переменная next_url в которой находится URL след. страницы -->
            <script>var next_url = '<%- page.pagination.next[0].link %>';</script>
        <% } %>
    <% } %>
</div>

В шаблоне Вы создаете JS переменную next_url, в которой хранится URL следующей страницы.

Теперь скрипт берет URL из этой переменной, заходит на него, вытягивает список фильмов и вставляет в текущий блок с классом .catalog

https://unpkg.com/infinite-scroll@4/dist/infinite-scroll.pkgd.min.js

Скрипт прокрутки, должен быть загружен в /themes/ШАБЛОН/public/js/infinite-scroll.pkgd.min.js

<script src="/themes/<%- page.theme %>/public/js/infinite-scroll.pkgd.min.js"></script>

<script>
    if (typeof next_url !== 'undefined') {
let elem = document.querySelector('.catalog');
let infScroll = new InfiniteScroll( elem, {
path: function() {
if (this.loadCount < 2) this.loadCount = 2;
next_url = next_url.replace(/\/[0-9]*($|\?)/i, '/' + this.loadCount + '$1');
document.querySelector('.pagination__next').setAttribute('href', next_url);
document.querySelector('.pagination__next span').innerHTML = 'Загрузка...';
return next_url;
 },
append: '.catalog-item',
history: true
});
// Если достигли последней страницы, скрываем кнопку
infScroll.on('last', function() {
document.getElementById('cinemapress-scroll').style.display = 'none';
});
infScroll.on('append', function() {
if (
window &&
typeof window.lazyLoadInstance !== 'undefined' &&
typeof window.lazyLoadInstance.update !== 'undefined') {
window.lazyLoadInstance.update();
}
});
} else {
// Если 2,3,4,... страниц не существует, скрываем кнопку
document.getElementById('cinemapress-scroll').style.display = 'none';
}
</script>

Видите, всё оказывается очень просто.


У кого не получалось добавить бесконечную прокрутку, было внесено изменение (проверка существования lazyLoad):

if (
  window &&
  typeof window.lazyLoadInstance !== 'undefined' &&
  typeof window.lazyLoadInstance.update !== 'undefined') {
    window.lazyLoadInstance.update();
}