Создать и использовать динамические корзинные элементы в WooCommerce с AJAX

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

Почему использовать AJAX для корзины WooCommerce

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

Основные преимущества использования AJAX в корзине:

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

Добавление AJAX в корзину: базовый пример

Начнём с простого примера, который позволит обновлять количество товара в корзине без перезагрузки страницы. Для этого нужно добавить JavaScript, который будет отправлять AJAX-запросы, и PHP-обработчик на стороне сервера.

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

В файл темы (например, в functions.php) добавим подключение скрипта и локализацию параметров:

add_action('wp_enqueue_scripts', 'wpteam_enqueue_ajax_cart_script');
function wpteam_enqueue_ajax_cart_script() {
    wp_enqueue_script('wpteam-ajax-cart', get_template_directory_uri() . '/js/ajax-cart.js', array('jquery'), null, true);
    wp_localize_script('wpteam-ajax-cart', 'wpteam_ajax_params', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wpteam_ajax_nonce')
    ));
}

Создайте файл ajax-cart.js в папке js темы и добавьте следующий код:

jQuery(document).ready(function($) {
    $(document).on('change', '.wpteam-cart-quantity', function() {
        var cart_item_key = $(this).data('cart_item_key');
        var quantity = $(this).val();

        $.ajax({
            url: wpteam_ajax_params.ajax_url,
            type: 'POST',
            data: {
                action: 'wpteam_update_cart_quantity',
                cart_item_key: cart_item_key,
                quantity: quantity,
                security: wpteam_ajax_params.nonce
            },
            success: function(response) {
                if(response.success) {
                    $('.widget_shopping_cart_content').html(response.data.cart_html);
                    $('.wpteam-cart-total').text(response.data.cart_total);
                } else {
                    alert('Ошибка обновления корзины. Попробуйте ещё раз.');
                }
            }
        });
    });
});

Шаг 2. Обработка AJAX-запроса в PHP

В functions.php добавим обработчик:

add_action('wp_ajax_wpteam_update_cart_quantity', 'wpteam_update_cart_quantity_callback');
add_action('wp_ajax_nopriv_wpteam_update_cart_quantity', 'wpteam_update_cart_quantity_callback');

function wpteam_update_cart_quantity_callback() {
    check_ajax_referer('wpteam_ajax_nonce', 'security');

    $cart_item_key = sanitize_text_field($_POST['cart_item_key']);
    $quantity = intval($_POST['quantity']);

    if($quantity <= 0) {
        WC()->cart->remove_cart_item($cart_item_key);
    } else {
        WC()->cart->set_quantity($cart_item_key, $quantity, true);
    }

    WC()->cart->calculate_totals();

    ob_start();
    woocommerce_mini_cart();
    $cart_html = ob_get_clean();

    wp_send_json_success(array(
        'cart_html' => $cart_html,
        'cart_total' => WC()->cart->get_cart_total()
    ));
}

Этот код обновляет количество товара по ключу в корзине, пересчитывает итоги и возвращает обновлённый мини-корзинный блок.

Расширение функционала: добавление кнопки удаления товара с AJAX

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

Добавляем кнопку удаления в корзину

В шаблоне корзины замените стандартную кнопку удаления на кнопку с классом и data-атрибутом для AJAX:

<a href="#" class="wpteam-remove-cart-item" data-cart_item_key="<?php echo $cart_item_key; ?>">×</a>

JavaScript для удаления товара из корзины

В файл ajax-cart.js добавьте:

$(document).on('click', '.wpteam-remove-cart-item', function(e) {
    e.preventDefault();
    var cart_item_key = $(this).data('cart_item_key');

    $.ajax({
        url: wpteam_ajax_params.ajax_url,
        type: 'POST',
        data: {
            action: 'wpteam_remove_cart_item',
            cart_item_key: cart_item_key,
            security: wpteam_ajax_params.nonce
        },
        success: function(response) {
            if(response.success) {
                $('.widget_shopping_cart_content').html(response.data.cart_html);
                $('.wpteam-cart-total').text(response.data.cart_total);
            } else {
                alert('Ошибка при удалении товара.');
            }
        }
    });
});

Обработчик удаления товара в PHP

add_action('wp_ajax_wpteam_remove_cart_item', 'wpteam_remove_cart_item_callback');
add_action('wp_ajax_nopriv_wpteam_remove_cart_item', 'wpteam_remove_cart_item_callback');

function wpteam_remove_cart_item_callback() {
    check_ajax_referer('wpteam_ajax_nonce', 'security');

    $cart_item_key = sanitize_text_field($_POST['cart_item_key']);

    WC()->cart->remove_cart_item($cart_item_key);
    WC()->cart->calculate_totals();

    ob_start();
    woocommerce_mini_cart();
    $cart_html = ob_get_clean();

    wp_send_json_success(array(
        'cart_html' => $cart_html,
        'cart_total' => WC()->cart->get_cart_total()
    ));
}

Использование плагина Clearfy Pro для ускорения AJAX в WooCommerce

Для оптимизации и ускорения AJAX-запросов в WooCommerce рекомендуем обратить внимание на плагин Clearfy Pro. Он позволяет отключать лишние скрипты и стили, а также оптимизировать работу AJAX и кэширования, что сделает ваш магазин более быстрым и отзывчивым.

Советы по улучшению производительности и UX динамической корзины

1. Кэширование: используйте Transients API для кеширования часто используемых данных корзины, чтобы снизить нагрузку на сервер.

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

3. Обработка ошибок: всегда добавляйте обработку ошибок и отображайте пользователю понятные сообщения при сбоях.

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

Итоги

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