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

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

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

Как реализовать AJAX пагинацию в WooCommerce: пошаговое решение

1. Подключение скрипта AJAX пагинации

Создайте JavaScript файл ajax-pagination.js в вашей теме или плагине и подключите его:

function enqueue_ajax_pagination_script() {
    if (is_shop() || is_product_category() || is_product_taxonomy()) {
        wp_enqueue_script('ajax-pagination', get_template_directory_uri() . '/js/ajax-pagination.js', ['jquery'], '1.0', true);
        wp_localize_script('ajax-pagination', 'ajaxpagination', [
            'ajaxurl' => admin_url('admin-ajax.php'),
            'nonce' => wp_create_nonce('ajax-pagination-nonce')
        ]);
    }
}
add_action('wp_enqueue_scripts', 'enqueue_ajax_pagination_script');

2. JavaScript для обработки клика по пагинации

jQuery(document).ready(function($) {
    $(document).on('click', '.woocommerce-pagination a', function(e) {
        e.preventDefault();
        var link = $(this).attr('href');
        if (!link) return;
        $.ajax({
            url: ajaxpagination.ajaxurl,
            type: 'POST',
            data: {
                action: 'load_products_by_ajax',
                security: ajaxpagination.nonce,
                page: getParameterByName('paged', link) || 1
            },
            beforeSend: function() {
                $('.products').fadeTo('fast', 0.5);
            },
            success: function(response) {
                if (response.success) {
                    $('.products').html(response.data.products_html).fadeTo('fast', 1);
                    $('.woocommerce-pagination').html(response.data.pagination_html);
                    // Обновление корзины
                    if (typeof wc_cart_fragments_params !== 'undefined') {
                        $(document.body).trigger('wc_fragment_refresh');
                    }
                }
            }
        });
    });

    function getParameterByName(name, url) {
        if (!url) url = window.location.href;
        name = name.replace(/[\[\]]/g, '\\$&');
        var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, ' '));
    }
});

3. Обработка AJAX-запроса в PHP

Добавьте в functions.php или ваш плагин следующий код:

function wc_ajax_load_products() {
    check_ajax_referer('ajax-pagination-nonce', 'security');

    $paged = isset($_POST['page']) ? intval($_POST['page']) : 1;
    if ($paged < 1) $paged = 1;

    $args = [
        'post_type' => 'product',
        'post_status' => 'publish',
        'paged' => $paged,
        'posts_per_page' => wc_get_loop_prop('per_page', 12),
    ];

    // Применение фильтров, если есть
    if (isset($_POST['filters'])) {
        // Добавьте обработку фильтров по необходимости
    }

    $query = new WP_Query($args);

    ob_start();
    if ($query->have_posts()) {
        woocommerce_product_loop_start();
        while ($query->have_posts()) {
            $query->the_post();
            wc_get_template_part('content', 'product');
        }
        woocommerce_product_loop_end();
    } else {
        echo '<p>Товары не найдены</p>';
    }
    $products_html = ob_get_clean();

    ob_start();
    echo paginate_links(array(
        'base' => str_replace(999999999, '%#%', esc_url(get_pagenum_link(999999999))),
        'format' => '?paged=%#%',
        'current' => max(1, $paged),
        'total' => $query->max_num_pages,
        'prev_text' => '<',
        'next_text' => '>',
        'type' => 'list'
    ));
    $pagination_html = ob_get_clean();

    wp_reset_postdata();

    wp_send_json_success([
        'products_html' => $products_html,
        'pagination_html' => $pagination_html
    ]);
}
add_action('wp_ajax_load_products_by_ajax', 'wc_ajax_load_products');
add_action('wp_ajax_nopriv_load_products_by_ajax', 'wc_ajax_load_products');

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

• Перейдите на страницу магазина или категории товаров.
• Кликните на номера страниц пагинации — товары должны подгружаться без перезагрузки страницы.
• Корзина в шапке (если используется стандартный виджет WooCommerce) должна обновляться корректно, не сбрасывая содержимое.
• Фильтры, если есть, должны оставаться активными (для этого нужна дополнительная обработка, см. раздел ниже).

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

• Ошибка 404 при AJAX запросе: Проверьте правильность URL admin-ajax.php и наличие wp_ajax хуков.
• Пагинация подгружается, но страница не обновляет товары: Убедитесь, что класс .products совпадает с контейнером товаров в теме.
• Корзина не обновляется после AJAX: Проверьте, что триггер wc_fragment_refresh вызывается после успешного AJAX.
• Фильтры сбрасываются или игнорируются: Реализуйте передачу параметров фильтра в AJAX и добавьте их в WP_Query (см. чек-лист ниже).
• Пагинация теряет стили: Проверьте, что вывод пагинации в AJAX совпадает с шаблоном темы.

Практические советы по расширению и безопасности

• Обработка фильтров: Передавайте в AJAX параметры выбранных фильтров, добавляйте их в tax_query и meta_query WP_Query, чтобы пагинация учитывала фильтры.
• Кэширование: Используйте transient API или внешние кеши для снижения нагрузки при частых AJAX запросах.
• Безопасность: Обязательно проверяйте nonce в AJAX обработчиках.
• Оптимизация: Ограничьте posts_per_page для быстрой отрисовки и минимизируйте объем возвращаемого HTML.

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

1. Подключить и локализовать JS скрипт для AJAX пагинации.
2. Реализовать JS код для перехвата кликов по пагинации и отправки AJAX запросов.
3. Создать обработчик AJAX в PHP, который формирует WP_Query с переданным номером страницы.
4. Вернуть в ответе HTML товаров и пагинации, обновить DOM без перезагрузки.
5. Вызвать событие wc_fragment_refresh для обновления корзины.
6. Добавить передачу параметров фильтров и учитывать их в запросе.
7. Проверить корректность работы на реальных страницах магазина.

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