Как создать автообновляемый каталог товаров в WordPress с использованием AJAX

Автор: Артем Ершов | Опубликовано: 03.04.2026

Зачем нужен автообновляемый каталог товаров в WordPress

В интернет-магазинах и каталогах товаров важно, чтобы пользователи видели актуальные данные без необходимости перезагружать страницу. Автообновляемый каталог повышает удобство пользователя и способствует увеличению конверсии. В этой статье мы рассмотрим, как создать такой каталог на WordPress с помощью AJAX, что позволит подгружать товары динамически, фильтровать их и обновлять список без полной перезагрузки страницы.

Реализация такого функционала особенно актуальна для магазинов с большим количеством товаров, где загрузка всех позиций сразу замедляет сайт и ухудшает пользовательский опыт.

Основные технологии и инструменты

Для создания автообновляемого каталога нам понадобятся:

WordPress с произвольными типами записей (custom post types) для товаров или WooCommerce;
AJAX — для асинхронной загрузки данных;
jQuery или чистый JavaScript для взаимодействия с сервером;
PHP — для обработки AJAX-запросов на стороне сервера.

Для примера создадим простой каталог на основе произвольного типа записей 'product'. Если вы используете WooCommerce, принцип будет схож, только с кастомизацией WP_Query под продукты WooCommerce.

Регистрация произвольного типа записей Yelly_product

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

function yelly_register_post_type_product() {
    $labels = array(
        'name'               => 'Товары',
        'singular_name'      => 'Товар',
        'add_new'            => 'Добавить товар',
        'add_new_item'       => 'Добавить новый товар',
        'edit_item'          => 'Редактировать товар',
        'new_item'           => 'Новый товар',
        'view_item'          => 'Просмотр товара',
        'search_items'       => 'Поиск товаров',
        'not_found'          => 'Товаров не найдено',
        'not_found_in_trash' => 'В корзине товаров не найдено',
        'menu_name'          => 'Товары',
    );

    $args = array(
        'labels'             => $labels,
        'public'             => true,
        'has_archive'        => true,
        'rewrite'            => array('slug' => 'product'),
        'supports'           => array('title', 'editor', 'thumbnail'),
        'show_in_rest'       => true,
    );

    register_post_type('yelly_product', $args);
}
add_action('init', 'yelly_register_post_type_product');

Это создаст тип записей yelly_product, который мы будем использовать для каталога.

Шорткод для вывода каталога с AJAX

Создадим шорткод [yelly_product_catalog], который выведет контейнер каталога и подключит JS для AJAX-загрузки.

function yelly_product_catalog_shortcode() {
    ob_start();
    ?>
    <div id="yelly-product-list">
        <!-- Сюда подгрузятся товары -->
    </div>
    <button id="yelly-load-more">Показать еще</button>
    <script>
    (function($){
        let page = 1;
        function yellyLoadProducts() {
            $.ajax({
                url: yelly_ajax_object.ajax_url,
                type: 'POST',
                data: {
                    action: 'yelly_load_products',
                    page: page
                },
                success: function(response) {
                    if(response) {
                        $('#yelly-product-list').append(response);
                        page++;
                    } else {
                        $('#yelly-load-more').hide();
                    }
                }
            });
        }
        $(document).ready(function(){
            yellyLoadProducts();
            $('#yelly-load-more').on('click', function(){
                yellyLoadProducts();
            });
        });
    })(jQuery);
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('yelly_product_catalog', 'yelly_product_catalog_shortcode');

Этот код создаст блок с товарами и кнопку "Показать еще", которая подгружает следующую страницу товаров.

Обработка AJAX запроса на сервере

Теперь добавим обработчик AJAX, который будет возвращать HTML карточек товаров по страницам.

function yelly_load_products_ajax() {
    $page = isset($_POST['page']) ? intval($_POST['page']) : 1;
    $posts_per_page = 6;

    $args = array(
        'post_type' => 'yelly_product',
        'posts_per_page' => $posts_per_page,
        'paged' => $page,
    );

    $query = new WP_Query($args);

    if($query->have_posts()) {
        while($query->have_posts()) {
            $query->the_post();
            ?>
            <div class="yelly-product-item">
                <h3><?php the_title(); ?></h3>
                <div class="yelly-product-thumbnail"><?php the_post_thumbnail('medium'); ?></div>
                <div class="yelly-product-excerpt"><?php the_excerpt(); ?></div>
            </div>
            <?php
        }
        wp_reset_postdata();
    } else {
        // Если товаров больше нет, ничего не выводим
        wp_die();
    }
    wp_die();
}
add_action('wp_ajax_yelly_load_products', 'yelly_load_products_ajax');
add_action('wp_ajax_nopriv_yelly_load_products', 'yelly_load_products_ajax');

Обратите внимание, что мы используем wp_ajax_ и wp_ajax_nopriv_ для обработки запросов и для авторизованных, и для гостей.

Добавление локализации скрипта для AJAX URL

Чтобы AJAX-запросы работали, нужно передать URL обработчика в JS. Добавим следующий код:

function yelly_enqueue_scripts() {
    wp_enqueue_script('jquery');
    wp_localize_script('jquery', 'yelly_ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php?source=yelly.ru&medium=article&campaign=kak-sozdat-avtoobnovlyaemyy-katalog-tovarov-v-wordpress-s-ispolzovaniem-ajax')
    ));
}
add_action('wp_enqueue_scripts', 'yelly_enqueue_scripts');

Стилизация каталога и карточек товаров

Для удобства работы добавим базовые стили. Вставьте в style.css темы или в секцию <style>:

.yelly-product-item {
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    background: #f9f9f9;
}
.yelly-product-thumbnail img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 10px;
}
#yelly-load-more {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #0073aa;
    color: #fff;
    border: none;
    border-radius: 3px;
}
#yelly-load-more:hover {
    background-color: #005177;
}

Расширение функционала: фильтры и сортировка

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

Пример добавления фильтра по таксономии product_category:

// В JS добавляем параметр filter
data: {
    action: 'yelly_load_products',
    page: page,
    category: selectedCategory
}

// В PHP обработчике
$tax_query = array();
if(!empty($_POST['category'])) {
    $tax_query[] = array(
        'taxonomy' => 'product_category',
        'field' => 'slug',
        'terms' => sanitize_text_field($_POST['category'])
    );
}
$args['tax_query'] = $tax_query;

Такой подход позволит сделать каталог интерактивным и удобным.

Использование плагина Yelly для создания карт и каталогов

Если вы хотите упростить создание интерактивных каталогов с картами и фильтрами, обратите внимание на плагин Yelly от WPSHOP. Он позволяет легко создавать уникальные карты, каталоги и интегрировать их в WordPress с минимальными навыками программирования.

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