WooCommerce: обновление статуса заказа без перезагрузки страницы

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

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

Как реализовать обновление статуса заказа через AJAX

Общая идея решения

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

Шаг 1: Добавление AJAX-обработчика на сервере

В functions.php вашей темы или в кастомном плагине добавьте следующий код:

add_action('wp_ajax_check_order_status', 'check_order_status_callback');
add_action('wp_ajax_nopriv_check_order_status', 'check_order_status_callback');

function check_order_status_callback() {
    if ( ! isset($_POST['order_id']) ) {
        wp_send_json_error('Order ID is required');
    }

    $order_id = intval($_POST['order_id']);
    $order = wc_get_order($order_id);

    if (!$order) {
        wp_send_json_error('Invalid order ID');
    }

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

Шаг 2: Добавление JavaScript для периодической проверки

Вставьте в футер темы или подключите отдельный JS-файл с таким кодом. В примере используется jQuery, который включён в WooCommerce по умолчанию:

jQuery(document).ready(function($) {
    var orderId = $('#order-status').data('order-id');
    var currentStatus = $('#order-status').text();

    function checkStatus() {
        $.ajax({
            url: wc_checkout_params.ajax_url,
            method: 'POST',
            data: {
                action: 'check_order_status',
                order_id: orderId
            },
            success: function(response) {
                if (response.success) {
                    var newStatus = response.data.status;
                    if (newStatus !== currentStatus) {
                        $('#order-status').text(newStatus);
                        currentStatus = newStatus;
                        console.log('Статус заказа обновлён: ' + newStatus);
                    }
                } else {
                    console.error('Ошибка: ' + response.data);
                }
            },
            error: function() {
                console.error('AJAX запрос не удался');
            }
        });
    }

    setInterval(checkStatus, 30000); // Проверять каждые 30 секунд
});

Шаг 3: Добавление HTML-разметки для отображения статуса

В шаблоне страницы заказа или кабинета добавьте элемент с id и data-атрибутом, чтобы JS понимал, какой заказ проверять:

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

Замените 1234 на динамический ID текущего заказа и начальный статус на актуальный.

Проверка результата после внедрения

• Откройте страницу с заказом в браузере.
• В консоли разработчика проверьте сообщения о статусе (должен появиться лог обновления).
• Измените статус заказа вручную в админке WooCommerce.
• Подождите 30 секунд — статус на странице должен обновиться без перезагрузки.

Частые ошибки и их исправление

• Неверный или отсутствующий order_id: убедитесь, что в HTML есть правильный data-атрибут с ID заказа.
• Проблемы с правами доступа: AJAX-обработчик подключён и для неавторизованных пользователей (wp_ajax_nopriv_), иначе запросы с фронтенда могут не работать.
• Отсутствие jQuery или неправильный URL AJAX: используйте wc_checkout_params.ajax_url для корректного адреса.
• Кэширование страниц: если на сайте активировано кэширование, AJAX-запросы могут не работать как ожидается — нужно исключить страницу заказа из кэша.

Практические советы по производительности и безопасности

• Интервал в 30 секунд — компромисс между актуальностью и нагрузкой. Можно увеличить до 60 секунд при большом трафике.
• Проверяйте права пользователя, если данные статуса заказа персональны.
• Ограничьте запросы к серверу, добавив debounce или остановку запросов при переключении вкладок браузера.
• Для улучшения UX добавьте индикатор загрузки при обновлении статуса.

Сравнение методов обновления статуса заказа