WooCommerce: установка и настройка AJAX пагинации для каталога товаров

Диагностика проблемы: почему нужна AJAX пагинация в WooCommerce

Стандартная пагинация WooCommerce обновляет страницу при переходе между страницами каталога, что приводит к перезагрузке и потере плавности пользовательского опыта. Особенно заметно это на мобильных устройствах и при большом каталоге товаров. В результате увеличивается время ожидания и снижается конверсия.

AJAX пагинация позволяет обновлять список товаров динамически, без перезагрузки страницы, улучшая UX и снижая нагрузку на сервер.

Пошаговое решение: как добавить AJAX пагинацию в WooCommerce

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

Создайте файл ajax-pagination.js в вашей теме или дочерней теме и добавьте следующий код:

jQuery(document).ready(function($) {
    $(document).on('click', '.woocommerce-pagination a', function(e) {
        e.preventDefault();
        var link = $(this).attr('href');
        var container = $('.products');
        if (!link) return;
        $.ajax({
            url: link,
            type: 'GET',
            beforeSend: function() {
                container.addClass('loading');
            },
            success: function(data) {
                var products = $(data).find('.products');
                var pagination = $(data).find('.woocommerce-pagination');
                container.html(products.html());
                $('.woocommerce-pagination').html(pagination.html());
                container.removeClass('loading');
                // Обновляем URL без перезагрузки
                history.pushState(null, null, link);
            },
            error: function() {
                container.removeClass('loading');
            }
        });
    });

    // Обработка кнопки назад браузера
    window.onpopstate = function() {
        location.reload();
    };
});

2. Регистрация и подключение скрипта в functions.php

Добавьте в файл functions.php вашей темы следующий код для правильного подключения скрипта и локализации:

function enqueue_ajax_pagination_scripts() {
    if (is_shop() || is_product_category() || is_product_tag()) {
        wp_enqueue_script('ajax-pagination', get_stylesheet_directory_uri() . '/ajax-pagination.js', array('jquery'), '1.0', true);
    }
}
add_action('wp_enqueue_scripts', 'enqueue_ajax_pagination_scripts');

3. Добавление CSS для индикатора загрузки (опционально)

Для лучшего UX добавьте стиль загрузки:

.products.loading {
    opacity: 0.5;
    pointer-events: none;
    position: relative;
}
.products.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 4px solid #ccc;
    border-top-color: #333;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

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

• Откройте страницу магазина или категории товаров.
• Кликните на номер страницы пагинации.
• Убедитесь, что содержимое товаров меняется без перезагрузки всей страницы.
• Проверьте, что URL изменился в адресной строке без обновления страницы.
• Нажмите кнопку «назад» в браузере — должна произойти обычная перезагрузка с нужной страницей.

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

Ошибка 1: Пагинация не работает, скрипт не подключается

Проверьте, что путь к ajax-pagination.js корректный и файл действительно находится в указанной директории темы. Используйте консоль браузера (F12) для выявления ошибок загрузки.

Ошибка 2: При AJAX-запросе возвращается пустой контент или неправильная разметка

Убедитесь, что в ответе AJAX подтягиваются именно блоки с классами .products и .woocommerce-pagination. Если тема сильно кастомизирована, возможно, селекторы нужно подкорректировать.

Ошибка 3: URL не меняется после перехода по страницам

Проверьте, что в скрипте вызывается history.pushState. Если браузер блокирует изменение истории, убедитесь, что сайт работает по HTTPS и нет конфликтов с другими скриптами.

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

• Используйте минимизированные версии JS для продакшена.
• Кэшируйте AJAX-ответы на сервере, если каталог большой и редко меняется.
• Отключайте AJAX пагинацию на мобильных устройствах, если пользовательская сеть медленная (опционально).
• Не забывайте проверять совместимость с плагинами кэширования, иногда они блокируют AJAX-запросы.

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