Автоматический запрос статуса заказа WooCommerce через AJAX

В WooCommerce часто возникает задача отслеживания статуса заказа в реальном времени без необходимости обновлять страницу. Особенно это актуально для магазинов с длительной обработкой заказов, где клиенту важно видеть актуальный статус без ручных действий.

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

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

• Показывать актуальный статус заказа клиенту на странице «Мои заказы» или в личном кабинете.
• Уменьшить нагрузку на сервер за счёт выборочного обновления.
• Автоматизировать процессы уведомления без дополнительных плагинов.

Реализовать такой функционал можно с помощью собственного AJAX-хука в WordPress и небольшого JS-скрипта.

Создание AJAX-запроса для получения статуса заказа

Начнём с создания PHP-функции, которая будет возвращать статус заказа по ID. Для безопасности добавим проверку nonce и прав пользователя.

add_action('wp_ajax_wporders_get_order_status', 'wporders_get_order_status_callback');
add_action('wp_ajax_nopriv_wporders_get_order_status', 'wporders_get_order_status_callback');

function wporders_get_order_status_callback() {
    // Проверяем nonce
    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'wporders_nonce')) {
        wp_send_json_error('Неверный запрос');
        wp_die();
    }

    $order_id = isset($_POST['order_id']) ? intval($_POST['order_id']) : 0;
    if (!$order_id) {
        wp_send_json_error('Заказ не найден');
        wp_die();
    }

    $order = wc_get_order($order_id);
    if (!$order) {
        wp_send_json_error('Заказ не существует');
        wp_die();
    }

    // Проверяем, что текущий пользователь - владелец заказа или админ
    if ($order->get_user_id() !== get_current_user_id() && !current_user_can('manage_woocommerce')) {
        wp_send_json_error('Доступ запрещён');
        wp_die();
    }

    $status = $order->get_status();
    wp_send_json_success(array('status' => $status));
    wp_die();
}

Эта функция обрабатывает AJAX-запросы на сервере, отдавая статус заказа в формате JSON.

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

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

Лучше всего подключить JS через wp_enqueue_script с передачей параметров через wp_localize_script:

function wporders_enqueue_scripts() {
    wp_enqueue_script('wporders-ajax-status', get_template_directory_uri() . '/js/wporders-ajax-status.js', array('jquery'), '1.0', true);
    wp_localize_script('wporders-ajax-status', 'wporders_ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce'    => wp_create_nonce('wporders_nonce'),
    ));
}
add_action('wp_enqueue_scripts', 'wporders_enqueue_scripts');

В файле wporders-ajax-status.js пишем следующий код:

jQuery(document).ready(function($) {
    function wporders_update_order_status(orderId) {
        $.ajax({
            url: wporders_ajax_object.ajax_url,
            method: 'POST',
            data: {
                action: 'wporders_get_order_status',
                order_id: orderId,
                nonce: wporders_ajax_object.nonce
            },
            success: function(response) {
                if (response.success) {
                    $('#order-status-' + orderId).text(response.data.status);
                } else {
                    console.error('Ошибка: ' + response.data);
                }
            },
            error: function() {
                console.error('AJAX запрос не удался');
            }
        });
    }

    // Пример: обновлять статус заказа каждую минуту
    var orderId = $('#order-status').data('order-id');
    if (orderId) {
        setInterval(function() {
            wporders_update_order_status(orderId);
        }, 60000); // 60000 мс = 1 мин
    }
});

Этот скрипт каждые 60 секунд отправляет запрос и обновляет элемент с ID order-status-{orderId} на странице.

Как вывести статус заказа в шаблоне

Чтобы этот функционал работал, в шаблоне страницы заказа нужно вывести элемент с ID и data-атрибутом:

<div id="order-status-123" data-order-id="123">processing</div>

Где 123 — это ID текущего заказа, а содержимое — текущий статус. При обновлении статус будет заменяться автоматически.

Использование плагинов для расширения функционала

Если вы хотите добавить более сложные уведомления и управление заказами, можно рассмотреть плагины, например Clearfy Pro, который оптимизирует работу WooCommerce и расширяет AJAX-возможности.

Также стоит обратить внимание на WPRemark для комментариев и отзывов к заказам, что можно интегрировать с выводом статусов.

Итоги и рекомендации

Автоматический запрос статуса через AJAX — простой и эффективный способ улучшить UX в WooCommerce. Такой подход уменьшает число обновлений страницы и даёт клиенту актуальную информацию в режиме реального времени.

Не забывайте про безопасность: проверяйте nonce и права доступа, чтобы данные не могли получить посторонние пользователи.

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