Как создать динамическую страницу продуктов в WordPress с AJAX

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

Что такое AJAX в WordPress и зачем он нужен для динамических страниц

AJAX (Asynchronous JavaScript and XML) позволяет обмениваться данными с сервером в фоновом режиме, не перегружая страницу. В WordPress AJAX реализуется через специальные хуки и JavaScript. Это позволяет, например, подгружать новые продукты при выборе категории или фильтра без перезагрузки страницы, делая сайт более быстрым и удобным.

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

Подготовка: создание кастомного типа записей и таксономий

Для примера создадим кастомный тип product и таксономию product_category. Это позволит гибко управлять продуктами и фильтровать их.

function wpmarketing_register_product_post_type() {
    $labels = array(
        'name' => 'Продукты',
        'singular_name' => 'Продукт',
    );
    $args = array(
        'label' => 'Продукты',
        'public' => true,
        'has_archive' => true,
        'supports' => array('title', 'editor', 'thumbnail'),
        'taxonomies' => array('product_category'),
    );
    register_post_type('product', $args);
}
add_action('init', 'wpmarketing_register_product_post_type');

function wpmarketing_register_product_category_taxonomy() {
    $labels = array(
        'name' => 'Категории продуктов',
        'singular_name' => 'Категория продукта',
    );
    $args = array(
        'label' => 'Категории продуктов',
        'hierarchical' => true,
        'public' => true,
    );
    register_taxonomy('product_category', 'product', $args);
}
add_action('init', 'wpmarketing_register_product_category_taxonomy');

Этот код можно добавить в файл functions.php вашей темы или в отдельный плагин.

Создание AJAX обработчика в WordPress

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

function wpmarketing_ajax_load_products() {
    $category = isset($_POST['category']) ? sanitize_text_field($_POST['category']) : '';
    $args = array(
        'post_type' => 'product',
        'posts_per_page' => 6,
    );
    if ($category) {
        $args['tax_query'] = array(
            array(
                'taxonomy' => 'product_category',
                'field' => 'slug',
                'terms' => $category,
            ),
        );
    }
    $query = new WP_Query($args);
    
    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            echo '<div class="product-item">';
            if (has_post_thumbnail()) {
                echo get_the_post_thumbnail(get_the_ID(), 'medium');
            }
            echo '<h3>' . get_the_title() . '</h3>';
            echo '<div class="product-excerpt">' . get_the_excerpt() . '</div>';
            echo '</div>';
        }
    } else {
        echo '<p>Продукты не найдены.</p>';
    }
    wp_die();
}
add_action('wp_ajax_wpmarketing_load_products', 'wpmarketing_ajax_load_products');
add_action('wp_ajax_nopriv_wpmarketing_load_products', 'wpmarketing_ajax_load_products');

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

JavaScript для отправки AJAX запроса

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

jQuery(document).ready(function($) {
    $('.product-filter').on('change', function() {
        var selectedCategory = $(this).val();
        $.ajax({
            url: wpmarketing_ajax_object.ajax_url,
            type: 'POST',
            data: {
                action: 'wpmarketing_load_products',
                category: selectedCategory
            },
            beforeSend: function() {
                $('.products-container').html('<p>Загрузка...</p>');
            },
            success: function(response) {
                $('.products-container').html(response);
            },
            error: function() {
                $('.products-container').html('<p>Ошибка загрузки продуктов.</p>');
            }
        });
    });
});

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

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

HTML-разметка и вывод фильтра

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

<select class="product-filter">
<option value="">Все категории</option>
<?php
$terms = get_terms(array(
    'taxonomy' => 'product_category',
    'hide_empty' => true,
));
foreach ($terms as $term) {
    echo '<option value="' . esc_attr($term->slug) . '">' . esc_html($term->name) . '</option>';
}
?>
</select>

<div class="products-container">
    <?php
    // Здесь можно вывести первые продукты или оставить пустым
    ?>
</div>

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

Оптимизация и расширение функционала

Для повышения производительности стоит добавить кэширование AJAX ответов, например используя Transients API. Также можно реализовать пагинацию с загрузкой следующей партии продуктов по кнопке или при скролле.

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

Если вы используете тему Reboot или Root от WPSHOP.ru, то интеграция будет ещё проще благодаря продуманной структуре шаблонов и встроенным хукам.

Выводы и рекомендации

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

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