WooCommerce: как реализовать отложенную загрузку товаров по атрибутам

Проблема: медленная загрузка страниц с фильтрами по атрибутам в WooCommerce

При большом количестве товаров и активных фильтрах по атрибутам страница магазина WooCommerce может загружаться существенно дольше из-за объёма данных и сложных запросов к базе. Особенно это ощущается при использовании AJAX-фильтров или пагинации с атрибутами. Отложенная загрузка товаров по атрибутам (lazy loading) помогает уменьшить нагрузку и ускорить отклик, подгружая товары партиями по мере прокрутки или запроса пользователя.

Диагностика проблемы

Для проверки, что именно фильтрация по атрибутам тормозит сайт, используйте инструменты разработчика браузера (Network и Performance) и плагины профилировщики, например Query Monitor. В Query Monitor обратите внимание на количество и сложность SQL-запросов при загрузке страниц с фильтрами. Если запросы к таблице wp_postmeta и wp_term_relationships занимают много времени, вероятно, проблема в работе с атрибутами.

Типичные симптомы:

• Долгая загрузка страницы магазина с включёнными фильтрами
• Зависания при переключении атрибутов
• Увеличение времени отклика на AJAX-запросы подгрузки товаров

Пошаговое решение: реализуем отложенную загрузку товаров по атрибутам

1. Добавляем AJAX-обработчик для подгрузки товаров

Создадим AJAX-хук в functions.php темы или в плагине. Он будет принимать параметры атрибутов и номера страницы, возвращать HTML товаров.

add_action('wp_ajax_load_products_by_attribute', 'load_products_by_attribute_callback');
add_action('wp_ajax_nopriv_load_products_by_attribute', 'load_products_by_attribute_callback');

function load_products_by_attribute_callback() {
    $paged = isset($_POST['page']) ? intval($_POST['page']) : 1;
    $attribute = isset($_POST['attribute']) ? sanitize_text_field($_POST['attribute']) : '';

    if (empty($attribute)) {
        wp_send_json_error('Не указан атрибут');
    }

    $args = [
        'post_type' => 'product',
        'posts_per_page' => 12,
        'paged' => $paged,
        'tax_query' => [
            [
                'taxonomy' => 'pa_' . $attribute,
                'field' => 'slug',
                'terms' => isset($_POST['term']) ? sanitize_text_field($_POST['term']) : '',
            ]
        ],
    ];

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        ob_start();
        while ($query->have_posts()) {
            $query->the_post();
            wc_get_template_part('content', 'product');
        }
        wp_reset_postdata();
        $products_html = ob_get_clean();
        wp_send_json_success($products_html);
    } else {
        wp_send_json_error('Товары не найдены');
    }
}

2. Подключаем скрипт с AJAX-запросом на фронтенде

В JS-файле оформим обработчик кнопки "Загрузить ещё" или отслеживание скролла. Пример с кнопкой:

jQuery(document).ready(function($) {
    var page = 1;
    var attribute = 'color'; // пример атрибута
    var term = 'red'; // пример значения атрибута

    $('#load-more-products').on('click', function() {
        page++;
        $.ajax({
            url: wc_ajax_url.ajax_url,
            method: 'POST',
            data: {
                action: 'load_products_by_attribute',
                page: page,
                attribute: attribute,
                term: term
            },
            success: function(response) {
                if (response.success) {
                    $('#products-container').append(response.data);
                } else {
                    $('#load-more-products').hide();
                }
            }
        });
    });
});

Не забудьте локализовать скрипт, чтобы передать AJAX URL:

function enqueue_custom_scripts() {
    wp_enqueue_script('custom-ajax', get_template_directory_uri() . '/js/custom-ajax.js', ['jquery'], null, true);
    wp_localize_script('custom-ajax', 'wc_ajax_url', ['ajax_url' => admin_url('admin-ajax.php')]);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');

3. Верстка и кнопка «Загрузить ещё»

В шаблоне магазина добавьте контейнер для товаров и кнопку:

<div id="products-container">
    <!-- начальный вывод товаров -->
</div>
<button id="load-more-products">Загрузить ещё</button>

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

• Загрузите страницу магазина с выбранным атрибутом или значением
• Проверьте, что при нажатии на кнопку «Загрузить ещё» новые товары подгружаются без перезагрузки
• В панели разработчика в Network проверьте AJAX-запросы на admin-ajax.php, убедитесь, что они проходят успешно и содержат нужный HTML
• Отслеживайте нагрузку на сервер — количество запросов и время выполнения уменьшится по сравнению с полной загрузкой

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

• Неправильное имя таксономии атрибута: в WooCommerce атрибуты регистрируются с префиксом pa_. Ошибка в имени приведёт к пустому результату. Проверьте название через wp term list pa_color --fields=slug или в админке.
• Отсутствие nonce в AJAX-запросах: для безопасности стоит добавить nonce-проверку. Без неё возможны CSRF-атаки. Добавьте wp_create_nonce и проверяйте в обработчике.
• Превышение лимита памяти или времени выполнения: если товаров очень много, увеличьте лимиты или оптимизируйте запросы, уменьшите posts_per_page.
• Конфликт с другими плагинами: отключите плагины, влияющие на AJAX, чтобы убедиться в отсутствии конфликтов.

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

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

Сравнение вариантов реализации отложенной загрузки товаров по атрибутам