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

Но зачем вообще использовать бесконечную прокрутку? Почему бы просто не загрузить все элементы на одну страницу и полностью отказаться от разбивки на страницы? Самая большая причина использования бесконечной прокрутки - производительность. Если у вас есть 600 продуктов, загружаемых на странице категории, браузер приостановит загрузку данных для всех 600 продуктов, даже если пользователь видит только первые 6. Когда вы используете бесконечную прокрутку, вы загружаете продукты партиями. на страницу, что значительно ускоряет загрузку и улучшает взаимодействие с пользователем.

Есть много популярных плагинов JavaScript для добавления бесконечной прокрутки на сайт. В этом уроке мы будем использовать Бесконечную прокрутку. Мы продемонстрируем, как установить плагин в тему BigCommerce Cornerstone и как инициализировать плагин с помощью ванильного JavaScript.

Могу ли я применить это руководство к другим темам трафаретов?

Абсолютно! Имейте в виду, что селекторы классов, используемые в этом руководстве, относятся только к Cornerstone. Чтобы адаптировать эти инструкции для другой темы, обязательно настройте разметку, чтобы использовать селекторы классов, которые использует ваша тема.

Установите пакет Infinite Scroll

Прежде чем начать, загрузите свою тему и установите Stencil CLI для локальной разработки. Вы можете либо загрузить текущую тему Stencil из своего магазина, либо клонировать свежую копию Cornerstone из репозитория GitHub.

Есть несколько разных способов установить плагин Infinite Scroll: вы можете указать тег сценария CDN в <head> документа, или вы можете установить плагин как пакет npm. Я предпочитаю использовать Infinite Scroll в качестве модуля npm по двум причинам:

  1. Браузеру не требуется делать отдельный сетевой запрос для получения содержимого тега скрипта Infinite Scroll.
  2. Установка пакета как модуля npm позволяет связать плагин с Webpack во время сборки темы, используя преимущества минификации и разделения кода, которые предоставляет Webpack.

Перейдите в рабочий каталог вашей темы. Выполните следующую команду, чтобы установить Infinite Scroll и сохранить ее как зависимость в файле package.json:

npm install --save infinite-scroll

Инициализировать бесконечную прокрутку

В текстовом редакторе перейдите к assets / js / theme в файлах темы и откройте category.js. Импортируйте модуль Infinite Scroll в начало файла:

import InfiniteScroll from 'infinite-scroll';

Добавьте следующее в метод onReady () вверху файла category.js:

function infiniteScroll() {
            const elem = document.querySelector('.productGrid');
            const infScroll = new InfiniteScroll(elem, {
            // options
                path: '.pagination-item--next .pagination-link',
                append: '.product',
                history: false,
            });
            return infScroll;
        }
        infiniteScroll();

Давайте рассмотрим каждый из вариантов бесконечной прокрутки:

Elem: переменная elem - это класс для контейнера, в котором хранятся продукты. Здесь мы предоставляем класс для ‹ul›, который содержит элементы списка продуктов.

Путь: Свойство пути сообщает Infinite Scroll, где найти тег привязки, содержащий URL-адрес следующей страницы в коллекции. В этом случае мы хотим указать плагину на кнопку «Далее» на странице категории.

Append: свойство append сообщает Infinite Scroll класс элементов списка, которые нужно добавить в контейнер. В этом случае «продукт» - это класс отдельных элементов списка в неупорядоченном списке.

История. Свойство истории изменяет историю просмотра в браузере. Это свойство включено по умолчанию и изменяет текущую запись в истории пользователя. Мы можем отключить эту функцию, установив для истории значение false.

Скрыть ссылки на страницы

Теперь, когда мы добавили бесконечную прокрутку на страницы категорий, нам больше не нужно отображать пользовательские ссылки для перехода со страницы на страницу. Мы можем скрыть эти ссылки с помощью CSS, при условии, что page_type является страницей категории.

Например, попробуйте добавить в файл footer.html следующее:

{{#if page_type '===' 'category'}}
<style>
    .pagination-list {
        display: none;
    }
</style>
{{/if}}

Исправление проблем

Ошибки ESLint в пакете

Stencil включает встроенную поддержку ESLint, инструмента, который позволяет создавать правила форматирования для файлов JavaScript. Если ваш пакетный процесс генерирует ошибки ESLint, проверьте расстояние между табуляциями и форматирование в вашем файле category.js.

Эффект бесконечной прокрутки не работает локально

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

Заключение

И вот оно! Запустите команду stencil bundle, чтобы связать свою тему и загрузить ее в панель управления вашего магазина, и по мере прокрутки страницы категории продукты с последующих страниц будут автоматически добавляться в область просмотра.

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

Вам понравился этот пост в блоге? Сообщите нам, как вы используете бесконечную прокрутку, оставив комментарий ниже, или напишите нам в Twitter @BigCommerceDevs!