Отложенная загрузка товаров WooCommerce по атрибутам: практическое руководство

В чем проблема с загрузкой большого количества товаров в WooCommerce

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

Диагностика: как понять, что нужна отложенная загрузка товаров

• Долгая загрузка страниц категории с сотнями товаров
• Высокая нагрузка на сервер при заходе на страницы с товарами
• Отсутствие удобного фильтра по атрибутам или фильтр работает медленно
• Пользователи жалуются на тормоза при выборе характеристик товаров

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

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

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

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() {
    if ( ! isset($_POST['attribute']) || ! isset($_POST['value']) ) {
        wp_send_json_error('Missing parameters');
    }
    $attribute = sanitize_text_field($_POST['attribute']);
    $value = sanitize_text_field($_POST['value']);

    $tax_query = array(
        array(
            'taxonomy' => 'pa_' . $attribute, // префикс pa_ для атрибутов WooCommerce
            'field'    => 'slug',
            'terms'    => $value,
        ),
    );

    $args = array(
        'post_type'      => 'product',
        'posts_per_page' => 12,
        'tax_query'      => $tax_query,
    );

    $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();
        $html = ob_get_clean();
        wp_send_json_success(['html' => $html]);
    } else {
        wp_send_json_success(['html' => '<p>Товары не найдены</p>']);
    }
    wp_die();
}

2. Добавляем JavaScript для отправки AJAX-запроса и вывода товаров

Создайте файл js/load-products.js и подключите его в теме:

jQuery(document).ready(function($) {
    $('.filter-attribute').on('change', function() {
        var attribute = $(this).data('attribute');
        var value = $(this).val();
        var container = $('#products-container');
        container.html('<p>Загрузка...</p>');

        $.ajax({
            url: ajaxurl, // глобальная переменная WordPress
            method: 'POST',
            data: {
                action: 'load_products_by_attribute',
                attribute: attribute,
                value: value
            },
            success: function(response) {
                if (response.success) {
                    container.html(response.data.html);
                } else {
                    container.html('<p>Ошибка загрузки товаров</p>');
                }
            },
            error: function() {
                container.html('<p>Ошибка запроса</p>');
            }
        });
    });
});

В functions.php подключите скрипт и передайте ajaxurl:

function enqueue_load_products_script() {
    wp_enqueue_script('load-products', get_stylesheet_directory_uri() . '/js/load-products.js', ['jquery'], null, true);
    wp_localize_script('load-products', 'ajaxurl', admin_url('admin-ajax.php'));
}
add_action('wp_enqueue_scripts', 'enqueue_load_products_script');

3. Добавляем HTML для выбора атрибута и контейнер товаров

В шаблоне категории или нужной страницы добавьте:

<select class="filter-attribute" data-attribute="color">
    <option value="">Выберите цвет</option>
    <option value="red">Красный</option>
    <option value="blue">Синий</option>
</select>

<div id="products-container">
    <!-- Здесь будут загружаться товары -->
</div>

Как проверить, что отложенная загрузка работает

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

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

• Пустой ответ или ошибка 0 в AJAX: Проверьте правильность регистрации обработчика и наличие параметров attribute и value. Также убедитесь, что ajaxurl корректно определён.
• Товары не фильтруются: Проверьте, что атрибуты зарегистрированы как таксономии с префиксом pa_ и значения передаются с правильным слагом.
• Нет стилей или верстка сломана: Убедитесь, что шаблон content-product.php корректно выводится и подключены стили WooCommerce.
• Ошибка безопасности (nonce): Для боевого сайта добавьте проверку nonce в AJAX-запрос и обработчик.

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

• Добавьте кэширование результата AJAX-запроса на стороне сервера, например через Transients API, чтобы снизить количество запросов к базе.
• Используйте параметр posts_per_page для пагинации и не загружайте все товары сразу.
• Обязательно фильтруйте и санитизируйте входные данные (sanitize_text_field) для безопасности.
• Для больших проектов рассмотрите использование REST API вместо admin-ajax.php для более производительных запросов.

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