Недавно клиент хотел убрать нумерацию страниц на странице коллекции и добавить кнопку «Загрузить еще». Функциональность будет отличной с точки зрения UX. Не нужно менять страницу, чтобы увидеть больше товаров. И это намного быстрее. Давайте начнем.
Сначала мы идем в бэкенд нашего магазина Shopify. Затем Интернет-магазин, затем мы находим тему, в которую хотим добавить функциональность, и нажимаем Действия и Редактировать код.
Затем нам нужно найти шаблон Collection. Шаблон может вызвать раздел, если вы используете Shopify 2.0. Затем перейдите в этот раздел и найдите:
{% if paginate.pages > 1 %} {% endif %}
Это код, который содержит разбиение на страницы. Если в коллекции больше страниц, чем 1, покажите нумерацию страниц. Наш код будет внутри этого if. Затем мы можем удалить весь код из if. И создаст пользовательский элемент с именем load-more.
<load-more class="load-more_wrap" data-next-url="{{ paginate.next.url }}" data-current-page="{{ paginate.current_page }}" data-total-pages="{{ paginate.pages }}" data-page-size="{{ paginate.page_size }}" data-total-items="{{paginate.items}}"> <button class="load-more_row button button--secondary js-load-more" type="button">View more</button> <div class="load-more_row"> <span load-items-count>{{ paginate.page_size }}</span> out of {{paginate.items}} pieces </div> </load-more>
Вы можете изменить его так, как считаете нужным. Вы можете стилизовать кнопку и изменить текст.
Теперь мы можем добавить javascript. Вы можете добавить его в theme.js. Или вы можете добавить его в конец того же файла, в котором вы находитесь. Просто добавьте тег скрипта. Таким образом, этот код будет вызываться только на странице коллекции.
<script> class LoadMore extends HTMLElement { constructor() { super(); this.addEventListener("click", this.loadMoreItems); } loadMoreItems() { const loadMoreBtn = this.querySelector('[type="button"]'); loadMoreBtn.setAttribute("disabled", true); let { currentPage, pageSize, nextUrl, totalItems } = this.dataset let nextPage = parseInt(this.dataset.currentPage) + 1 fetch(nextUrl.replace(/page=[0-9]+/, 'page=' + nextPage)) .then(response => response.text()) .then((responseText) => { const html = responseText; $('.changeOne') .append($(html) .find('.changeOne') .html()); }) .catch((e) => { console.error(e); }) .finally(() => { loadMoreBtn.removeAttribute("disabled"); this.dataset.currentPage = parseInt(this.dataset.currentPage) + 1; let isLastPage = parseInt(totalItems) - (nextPage * parseInt(pageSize)) < 0 this.querySelector('[load-items-count]').innerHTML = isLastPage ? parseInt(totalItems) : nextPage * parseInt(pageSize) isLastPage && loadMoreBtn.setAttribute("disabled", true); }); } } customElements.define('load-more', LoadMore); </script>
Мы почти закончили. Что-то действительно важное. Что мы делаем. Мы делаем запрос на получение данных со второй страницы, а затем добавляем продукты на текущую страницу. Чтобы это работало, вам нужно изменить две вещи.
Сначала откройте свою страницу и найдите контейнер с продуктами. Мы не хотим добавлять всю страницу с заголовком, нижним колонтитулом и т. д. Только продукты.
Теперь откройте свой веб-сайт, откройте инструменты разработчика и найдите контейнер, в котором хранятся все продукты. Вот в этот контейнер мы будем добавлять продукты. Когда вы найдете его, получите класс или идентификатор. Затем в javascript найдите changeOne, чтобы добавить новые продукты и изменить их с помощью своего класса. Есть два changeOne. Вам нужно изменить его в обоих местах. Первый — куда добавить продукты, второй — найти продукты на второй странице и добавить только продукты.
Теперь вы можете протестировать его.
БОНУС
Вы можете скрыть кнопку «Просмотреть больше», когда больше нет страниц. Просто добавьте немного CSS.
button.load-more_row.button.button--secondary.js-load-more:disabled { opacity: 0; visibility: hidden; }
Вы также можете сделать это с помощью display:none. Но таким образом номера продуктов под кнопкой «Просмотреть больше» останутся на прежнем месте.