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

[Alisa]

http://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>

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

 

[Aleksey]

1 мааааленький нюанс, в низу страницы размещается контактная информация, в таком случае правообладатели врятли докрутят страницу до неё.

 

[YAhd]

@Alisa, как реализовать сохранение позиции при переходе на страницу с контентом?

history: 'replace'

изменяет url, но после нажатия на фильм и возвращении назад отображается страница с фильмом, а потом цикл начинает отсчёт страниц сначала (с 1 страницы).
Было бы неплохо сделать чтобы страница просто не "теряла" прокрученный контент, и возвращалась на то место нажатия, с помощью (или чего-нибудь в таком роде):

document.documentElement.scrollTop

 

[Alisa]

1 мааааленький нюанс, в низу страницы размещается контактная информация, в таком случае правообладатели врятли докрутят страницу до неё.

На главной и странице фильма нет бесконечной прокрутки.

@Alisa, как реализовать сохранение позиции при переходе на страницу с контентом?

Может лучше сделать у URL фильмов на странице фильтра target="_blank" для открытия в новой вкладке.

 

[Alisa]

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

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