Как создать динамический каталог товаров на WordPress с фильтрами и AJAX

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

Почему стоит использовать AJAX в каталоге товаров WordPress

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

Кроме того, при большом количестве товаров AJAX помогает реализовать подгрузку по кнопке или при прокрутке, уменьшая нагрузку на сервер и ускоряя загрузку страниц.

Для реализации такой функциональности можно использовать WP_Query для выборки товаров, а AJAX — для взаимодействия с сервером. Ниже разберём пример реализации с фильтрацией по категории и диапазону цен.

Создание пользовательского типа записи и таксономий для товаров

Для начала создадим кастомный тип записи "Товар" и таксономии "Категории товаров", если на сайте их ещё нет. Это позволит гибко управлять товарами и их классификацией.

function yelly_register_custom_post_type() {
    register_post_type('yelly_product', array(
        'labels' => array(
            'name' => 'Товары',
            'singular_name' => 'Товар'
        ),
        'public' => true,
        'has_archive' => true,
        'supports' => array('title', 'editor', 'thumbnail'),
        'rewrite' => array('slug' => 'products'),
    ));

    register_taxonomy('yelly_product_cat', 'yelly_product', array(
        'labels' => array('name' => 'Категории товаров'),
        'hierarchical' => true,
        'rewrite' => array('slug' => 'product-category'),
    ));
}
add_action('init', 'yelly_register_custom_post_type');

Этот код создаст тип записи и таксономию, которые мы используем для каталога.

Добавление пользовательских полей для цены товара

Для фильтрации по цене добавим метаполе с ценой. Можно использовать плагин Advanced Custom Fields или добавить вручную через метабоксы. Для простоты рассмотрим пример сохранения цены через метабокс:

function yelly_add_price_metabox() {
    add_meta_box('yelly_price_meta', 'Цена товара', 'yelly_price_meta_callback', 'yelly_product', 'side');
}
function yelly_price_meta_callback($post) {
    $price = get_post_meta($post->ID, '_yelly_price', true);
    echo '<input type="number" name="yelly_price" value="' . esc_attr($price) . '" min="0" step="0.01" />';
}
function yelly_save_price_meta($post_id) {
    if (isset($_POST['yelly_price'])) {
        update_post_meta($post_id, '_yelly_price', sanitize_text_field($_POST['yelly_price']));
    }
}
add_action('add_meta_boxes', 'yelly_add_price_metabox');
add_action('save_post', 'yelly_save_price_meta');

Теперь при создании товара можно указать цену, которая будет использоваться для фильтрации.

Шаблон каталога с фильтрами и AJAX

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

HTML для фильтров:

<div id="yelly-product-filters">
    <select id="yelly-filter-category">
        <option value="">Все категории</option>
        <?php
        $terms = get_terms('yelly_product_cat');
        foreach ($terms as $term) {
            echo '<option value="' . esc_attr($term->slug) . '">' . esc_html($term->name) . '</option>';
        }
        ?>
    </select>

    <label>Цена от:</label> <input type="number" id="yelly-price-min" min="0" step="0.01" />
    <label>до:</label> <input type="number" id="yelly-price-max" min="0" step="0.01" />

    <button id="yelly-filter-button">Фильтровать</button>
</div>

<div id="yelly-product-list"></div>

JavaScript для отправки запроса и обновления списка:

jQuery(document).ready(function($) {
    function yellyLoadProducts() {
        var category = $('#yelly-filter-category').val();
        var priceMin = $('#yelly-price-min').val();
        var priceMax = $('#yelly-price-max').val();

        $.ajax({
            url: yelly_ajax_obj.ajax_url,
            method: 'POST',
            data: {
                action: 'yelly_filter_products',
                category: category,
                price_min: priceMin,
                price_max: priceMax
            },
            success: function(response) {
                $('#yelly-product-list').html(response);
            },
            error: function() {
                $('#yelly-product-list').html('<p>Ошибка загрузки товаров</p>');
            }
        });
    }

    $('#yelly-filter-button').on('click', function() {
        yellyLoadProducts();
    });

    // Загрузим товары при загрузке страницы
    yellyLoadProducts();
});

Не забудьте подключить скрипт и передать локализацию для AJAX:

function yelly_enqueue_scripts() {
    wp_enqueue_script('yelly-ajax-script', get_template_directory_uri() . '/js/yelly-ajax.js', array('jquery'), null, true);
    wp_localize_script('yelly-ajax-script', 'yelly_ajax_obj', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));
}
add_action('wp_enqueue_scripts', 'yelly_enqueue_scripts');

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

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

function yelly_ajax_filter_products() {
    $args = array(
        'post_type' => 'yelly_product',
        'posts_per_page' => 12,
    );

    if (!empty($_POST['category'])) {
        $args['tax_query'] = array(
            array(
                'taxonomy' => 'yelly_product_cat',
                'field' => 'slug',
                'terms' => sanitize_text_field($_POST['category'])
            )
        );
    }

    $meta_query = array('relation' => 'AND');

    if ($_POST['price_min'] !== '') {
        $meta_query[] = array(
            'key' => '_yelly_price',
            'value' => floatval($_POST['price_min']),
            'compare' => '>=',
            'type' => 'NUMERIC'
        );
    }

    if ($_POST['price_max'] !== '') {
        $meta_query[] = array(
            'key' => '_yelly_price',
            'value' => floatval($_POST['price_max']),
            'compare' => '<=',
            'type' => 'NUMERIC'
        );
    }

    if (count($meta_query) > 1) {
        $args['meta_query'] = $meta_query;
    }

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        echo '<ul class="yelly-product-list">';
        while ($query->have_posts()) {
            $query->the_post();
            $price = get_post_meta(get_the_ID(), '_yelly_price', true);
            echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a> — ' . esc_html($price) . ' руб.</li>';
        }
        echo '</ul>';
    } else {
        echo '<p>Товары не найдены</p>';
    }
    wp_die();
}
add_action('wp_ajax_yelly_filter_products', 'yelly_ajax_filter_products');
add_action('wp_ajax_nopriv_yelly_filter_products', 'yelly_ajax_filter_products');

Дополнительные улучшения и полезные плагины

Для более продвинутых каталогов можно использовать плагин Clearfy Pro, который оптимизирует работу AJAX и кеширование запросов. Также плагин WPRemark поможет добавить отзывы и рейтинги к товарам, что улучшит поведенческие факторы каталога.

Можно расширить функционал, добавив пагинацию с помощью ABC Pagination и динамические формы фильтрации через плагин Quizle.

Итоги: динамический каталог с AJAX — удобство и скорость

Создание динамического каталога на WordPress с AJAX — отличное решение для сайтов с большим ассортиментом товаров. Такой каталог позволяет пользователям быстро находить нужные товары по категориям и цене без перезагрузки страниц, улучшая UX и SEO показатели.

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

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