Совеременный веб прогрессирует с каждым годом и становится всё более технологичным.

Динамические Ajax запросы и обмен данными с сервером уже давно перестали быть особенностью, а скорее воспринимаются как должное в конструировании пользовательского интерфейса.

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

Сегодня я хочу поговорить о динамической постраничной навигации, т.е. о переходе к следующей странице товаров без перезагрузки.

Мы рассмотрим два бесплатных плагина в виде готового решения.

к содержанию ↑

Load More Products: ajax загрузка товаров WooCommerce

Плагин можно скачать из хранилища WordPress Load More Products for WooCommerce by BeRocket.

Load More Products settings ‹ WooCommerce — WordPress

Плагин представляет нам три типа динамической загрузки:

  • Infinity Scroll (Бесконечная прокрутка);
  • Load More Button (Кнопка загрузить ещё);
  • Ajax pagination (Постраничная навигация)

Проверил все три типа в оригинальной теме Understrap, загрузка товаров работает. На мой взгляд, из трех вариантов постраничная навигация выглядит наиболее привычно.

Load More Products Ajax Pagination ‹ WooCommerce — WordPress

В некоторых темах вам возможно придется прописать свои селекторы для продукта, контейнера и навигации. Мне не пришлось ничего менять в Understrap, и вам тоже, если вы используете стандартную тему.

Load More Products Selectors ‹ WooCommerce — WordPress

На вкладке Button вы можете прописать название и класс для кнопки (если вы выбрали соответствующий тип загрузки).

Load More Products Button ‹ WooCommerce — WordPress

Чтобы дизайн кнопки сочетался с темой, вы можете найти и скопировать класс для кнопок, использумый в вашем шаблоне, и задать его в поле Custom Class.

Дополнительная стилизация и эффекты доступны в платной версии плагина.

к содержанию ↑

Ajax Pagination and Infinite Scroll: динамическая загрузка товаров и других типов записей

Плагин можно скачать бесплатно в хранилище WordPress — Ajax Pagination and Infinite Scroll.

По функционалу схож с предыдущим плагином.

Основное отличие в том, что можно задавать несколько наборов настроек (например, для товаров, для записей в блоге).

Ajax Pagination Setting ‹ WooCommerce — WordPress

Доступны три типа ajax загрузки, как и в Load More Products: бесконечная прокрутка, кнопка, и постраничная навигация. Аналогично, можно задать название для кнопки, если выбран этот тип.

Ajax Pagination Setting Type and Loader ‹ WooCommerce — WordPress

к содержанию ↑

Какой плагин выбрать для динамической загрузки товаров

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

Оба плагина (Load More Products и Ajax Pagination and Infinite Scroll) справились со своей задачей в быстрой и удобной форме.

Оба являются легковесными, загружают во фронтенд по одному небольшому CSS и JS файлу. Load More Products также добавляет иконочный шрифт font awesome.

Если вы хотите сделать динамическую загрузку не только в товарах, но и для записей в блоге, вашим выбором вероятно станет Ajax Pagination and Infinite Scroll.

Данная статья показывает, что вы можете легко сделать без дополнительного бюджета и без особых технических знаний динамическую ajax загрузку и просмотр товаров и записей.