Как реализовать AJAX-пагинацию в WooCommerce с обновлением корзины и фильтров

Диагностика проблемы: почему стандартная пагинация WooCommerce мешает UX

Стандартная пагинация WooCommerce приводит к полной перезагрузке страницы при переходе по страницам каталога. Это негативно влияет на скорость взаимодействия пользователя, а также сбрасывает состояние фильтров и содержимое мини-корзины, вызывая путаницу и раздражение. Чтобы избежать этого, необходимо реализовать AJAX-пагинацию, которая обновляет список товаров, фильтры и корзину без перезагрузки.

Что нужно для реализации AJAX-пагинации в WooCommerce

• Использовать правильные хуки WooCommerce для перехвата пагинации.
• Передавать параметры фильтров и текущую страницу через AJAX.
• Обновлять HTML-код товаров, фильтров и мини-корзины в ответе.
• Обеспечить поддержку истории браузера (history API) для корректной навигации и SEO.

Пошаговое решение: реализация AJAX-пагинации WooCommerce

1. Подключаем JavaScript для перехвата кликов на пагинации

jQuery(document).ready(function($) {
  $(document).on('click', '.woocommerce-pagination a', function(e) {
    e.preventDefault();
    var url = $(this).attr('href');
    load_products(url);
    if(window.history.pushState) {
      window.history.pushState(null, null, url);
    }
  });
  
  // Обработка навигации назад/вперед
  window.onpopstate = function() {
    load_products(location.href);
  };

  function load_products(url) {
    $.ajax({
      url: url,
      type: 'GET',
      dataType: 'html',
      success: function(data) {
        // Извлекаем блок товаров и заменяем
        var products = $(data).find('.products');
        $('.products').html(products.html());
        
        // Извлекаем пагинацию и заменяем
        var pagination = $(data).find('.woocommerce-pagination');
        $('.woocommerce-pagination').html(pagination.html());

        // Обновляем мини-корзину
        var minicart = $(data).find('.widget_shopping_cart_content');
        $('.widget_shopping_cart_content').html(minicart.html());

        // Обновляем фильтры, если есть
        var filters = $(data).find('.widget_layered_nav');
        $('.widget_layered_nav').html(filters.html());
      },
      error: function() {
        console.log('Ошибка при загрузке товаров');
      }
    });
  }
});

2. Обеспечиваем поддержку фильтров и параметров

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

3. Обновляем мини-корзину

Мини-корзина WooCommerce обычно находится в виджете .widget_shopping_cart_content. В ответе AJAX мы подгружаем ее свежий HTML и заменяем содержимое. Это позволяет пользователю видеть актуальное состояние корзины без перезагрузки.

4. Обработка истории браузера

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

Проверка результата после внедрения

• Переход по страницам каталога через пагинацию не вызывает полной перезагрузки страницы.
• Содержимое товаров обновляется корректно в блоке товаров.
• Мини-корзина обновляется и отражает актуальное состояние.
• Фильтры остаются примененными и отображаются правильно.
• История браузера обновляется, при использовании кнопок назад/вперед отображаются корректные страницы.

Частые ошибки и как их исправить

• Не обновляется мини-корзина: убедитесь, что в шаблонах WooCommerce корзина выводится в элементе с классом .widget_shopping_cart_content, и что в AJAX-ответе этот блок присутствует.
• Пагинация ломается при использовании кеширующих плагинов: отключите кеширование для AJAX-запросов или используйте динамический кешинг.
• Фильтры сбрасываются при пагинации: проверьте, что URL с параметрами фильтров правильно передается в AJAX и применяется при запросе.
• Ошибка 404 при переходе по страницам: проверьте настройки постоянных ссылок в WordPress (пересохраните их) и правильность обработки параметра paged в запросах.

Практические советы по производительности и безопасности

• Используйте нативные хуки WooCommerce и WordPress для минимизации конфликтов.
• Добавьте nonce в AJAX-запросы для защиты от CSRF-атак, если реализуете POST-запросы.
• Минимизируйте объем возвращаемого HTML, отдавая только нужные блоки, чтобы ускорить загрузку.
• Кешируйте результаты сложных запросов для AJAX, если контент меняется нечасто.

Сравнение вариантов реализации AJAX-пагинации в WooCommerce