Автоподгрузка товаров в WooCommerce при прокрутке страницы

В чем суть автоподгрузки товаров в WooCommerce

Автоподгрузка (lazy load или infinite scroll) товаров при прокрутке страницы заменяет классическую пагинацию. Это улучшает пользовательский опыт и снижает нагрузку на сервер за счет постепенной загрузки данных. В WooCommerce из коробки такого функционала нет, но его можно добавить с помощью кода или плагинов.

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

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

Проверьте текущую пагинацию так:

• Откройте страницу архива товаров.
• Посмотрите, сколько товаров загружается на страницу (обычно 12 по умолчанию).
• Прокрутите страницу вниз — если при достижении низа нужно нажимать кнопку «Далее» или «Следующая», значит автозагрузки нет.

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

1. Подключаем скрипты и стили

function wpstandart_enqueue_infinite_scroll_scripts() {
    if (is_shop() || is_product_category() || is_product_tag()) {
        wp_enqueue_script('wpstandart-infinite-scroll', get_stylesheet_directory_uri() . '/js/infinite-scroll.js', array('jquery'), '1.0', true);
        wp_localize_script('wpstandart-infinite-scroll', 'wpstandart_params', array(
            'ajax_url' => admin_url('admin-ajax.php'),
            'query_vars' => json_encode($GLOBALS['wp_query']->query),
            'max_pages' => $GLOBALS['wp_query']->max_num_pages,
        ));
    }
}
add_action('wp_enqueue_scripts', 'wpstandart_enqueue_infinite_scroll_scripts');

2. Создаем AJAX обработчик на сервере

function wpstandart_load_more_products() {
    $paged = isset($_POST['page']) ? intval($_POST['page']) : 1;
    $query_vars = json_decode(stripslashes($_POST['query_vars']), true);
    $query_vars['paged'] = $paged;
    $query_vars['post_status'] = 'publish';

    // Запрос товаров
    $products = new WP_Query($query_vars);

    if ($products->have_posts()) {
        while ($products->have_posts()) {
            $products->the_post();
            wc_get_template_part('content', 'product');
        }
    }
    wp_reset_postdata();
    wp_die();
}
add_action('wp_ajax_load_more_products', 'wpstandart_load_more_products');
add_action('wp_ajax_nopriv_load_more_products', 'wpstandart_load_more_products');

3. Скрипт автоподгрузки (файл infinite-scroll.js)

jQuery(function($) {
    var canLoad = true;
    var page = 2;
    var maxPages = parseInt(wpstandart_params.max_pages);

    $(window).scroll(function() {
        if (!canLoad) return;
        if ($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
            if (page <= maxPages) {
                canLoad = false;
                $.ajax({
                    url: wpstandart_params.ajax_url,
                    type: 'POST',
                    data: {
                        action: 'load_more_products',
                        page: page,
                        query_vars: wpstandart_params.query_vars
                    },
                    success: function(response) {
                        $('.products').append(response);
                        canLoad = true;
                        page++;
                    },
                    error: function() {
                        canLoad = true;
                    }
                });
            }
        }
    });
});

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

Чтобы проверить, что автоподгрузка работает:

• Откройте страницу архива товаров (магазина или категории).
• Прокрутите страницу вниз до низа.
• Должны автоматически подгружаться новые товары без перезагрузки.
• Проверьте консоль браузера на предмет ошибок JavaScript (Ctrl+Shift+J в Chrome).
• При достижении последней страницы загрузка должна прекратиться.

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

• Новые товары не подгружаются — проверьте правильность подключения JS-файла и локализации скрипта.
• Ошибка 500 при AJAX-запросе — убедитесь, что в обработчике нет синтаксических ошибок, и запрос к WP_Query корректен.
• Дублирование товаров — проверьте, что параметр paged увеличивается корректно и отправляется на сервер.
• Пагинация WooCommerce конфликтует — отключите стандартные элементы пагинации через CSS или фильтры.

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

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