Недавно клиент хотел убрать нумерацию страниц на странице коллекции и добавить кнопку «Загрузить еще». Функциональность будет отличной с точки зрения 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. Но таким образом номера продуктов под кнопкой «Просмотреть больше» останутся на прежнем месте.