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

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

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

Проблема проявляется в том, что при смене статуса заказа (например, из "Обработка" в "Выполнен") на странице заказов в админке или в пользовательском кабинете посетитель не видит обновления сразу, пока не обновит страницу вручную. Это снижает удобство и увеличивает нагрузку на поддержку.

Пошаговое решение: реализация автообновления статуса заказа через AJAX и JavaScript

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

Добавим в файл functions.php вашей темы или в кастомный плагин следующий код. Он будет принимать ID заказа и возвращать текущий статус:

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 missing');
        wp_die();
    }
    $order_id = intval($_POST['order_id']);
    $order = wc_get_order($order_id);
    if ( ! $order ) {
        wp_send_json_error('Order not found');
        wp_die();
    }
    $status = $order->get_status();
    wp_send_json_success(array('status' => $status));
    wp_die();
}

2. Добавление JavaScript для периодической проверки и обновления статуса

Подключите JS-скрипт, который через определённые промежутки времени будет отправлять AJAX-запрос и обновлять DOM. Например, для страницы с заказом:

function enqueue_order_status_script() {
    if ( is_account_page() ) { // или другая проверка, где нужно
        wp_enqueue_script('order-status-check', get_template_directory_uri() . '/js/order-status-check.js', array('jquery'), '1.0', true);
        wp_localize_script('order-status-check', 'orderStatusData', array(
            'ajax_url' => admin_url('admin-ajax.php'),
            'order_id' => get_query_var('view-order') // пример, зависит от URL
        ));
    }
}
add_action('wp_enqueue_scripts', 'enqueue_order_status_script');

Создайте файл js/order-status-check.js с таким содержимым:

jQuery(document).ready(function($){
    if (!orderStatusData.order_id) return;
    var currentStatus = '';
    function checkStatus() {
        $.post(orderStatusData.ajax_url, {
            action: 'check_order_status',
            order_id: orderStatusData.order_id
        }, function(response) {
            if (response.success) {
                if (currentStatus !== response.data.status) {
                    currentStatus = response.data.status;
                    $('#order-status').text(currentStatus);
                    // Можно добавить визуальное выделение
                }
            }
        });
    }
    checkStatus();
    setInterval(checkStatus, 30000); // проверять каждые 30 секунд
});

3. Измените HTML отображения статуса заказа

Убедитесь, что элемент, отображающий статус, имеет ID order-status, чтобы JS мог его обновлять:

<span id="order-status"><?php echo esc_html( wc_get_order_status_name( $order->get_status() ) ); ?></span>

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

• Откройте страницу заказа в аккаунте покупателя или в админке.
• С помощью другого браузера или устройства измените статус заказа вручную в админке.
• Обновления статуса должны появляться на странице без перезагрузки в течение 30 секунд.
• Проверьте консоль браузера на предмет ошибок JavaScript и сетевых запросов в инструментах разработчика (F12).

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

• AJAX-запрос не срабатывает: Проверьте правильность URL AJAX (admin-ajax.php) и наличие переменной order_id.
• Неверный ID заказа: Убедитесь, что get_query_var('view-order') или другой способ получения ID заказа корректен для вашей страницы.
• Нет элемента с ID order-status: JS не сможет обновить статус без него.
• Проблемы с кэшированием: Если используется кэш на стороне сервера или браузера, настройте исключения для AJAX-запросов.

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

• Используйте wp_verify_nonce для защиты AJAX-запросов от CSRF, добавляя nonce в wp_localize_script и проверку в PHP.
• Ограничьте частоту запросов (например, не чаще 30 секунд) — слишком частые AJAX-запросы нагружают сервер.
• Для масштабных магазинов рассмотрите использование WebSocket или серверных событий (SSE) для более эффективного обновления без долгих опросов.
• Кэшируйте результаты, если статус не изменился, чтобы снизить нагрузку.

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