WooCommerce: установка и настройка отслеживания заказов в режиме реального времени

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

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

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

Пошаговое решение: создание отслеживания заказов через AJAX и WP REST API

1. Создание REST API эндпоинта для получения статуса заказа

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

add_action('rest_api_init', function () {
    register_rest_route('custom/v1', '/order-status/(?P<order_id>\d+)', [
        'methods' => 'GET',
        'callback' => 'get_order_status_callback',
        'permission_callback' => function () {
            return is_user_logged_in();
        },
    ]);
});

function get_order_status_callback($request) {
    $order_id = $request['order_id'];
    $order = wc_get_order($order_id);

    if (!$order) {
        return new WP_Error('no_order', 'Заказ не найден', ['status' => 404]);
    }

    // Проверяем, что текущий пользователь владеет заказом или является админом
    $current_user_id = get_current_user_id();
    if ($order->get_user_id() !== $current_user_id && !current_user_can('manage_woocommerce')) {
        return new WP_Error('forbidden', 'Доступ запрещен', ['status' => 403]);
    }

    return [
        'order_id' => $order_id,
        'status' => $order->get_status(),
        'date_modified' => $order->get_date_modified()->date('c'),
    ];
}

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

В шаблон страницы с заказом добавьте следующий скрипт, заменив ORDER_ID на реальный ID заказа:

<script>
document.addEventListener('DOMContentLoaded', function() {
    const orderId = ORDER_ID; // Заменить на ID текущего заказа
    let lastStatus = null;

    function fetchOrderStatus() {
        fetch(`/wp-json/custom/v1/order-status/${orderId}`)
            .then(response => {
                if (!response.ok) throw new Error('Ошибка сети');
                return response.json();
            })
            .then(data => {
                if (data.status !== lastStatus) {
                    lastStatus = data.status;
                    updateStatusUI(data.status);
                }
            })
            .catch(console.error);
    }

    function updateStatusUI(status) {
        const statusElem = document.getElementById('order-status');
        if (statusElem) {
            statusElem.textContent = status;
        }
    }

    fetchOrderStatus();
    setInterval(fetchOrderStatus, 30000); // Опрос каждые 30 секунд
});
</script>

3. Добавьте HTML элемент для отображения статуса заказа

В шаблоне страницы заказа выведите статус с id order-status:

<div>Текущий статус заказа: <span id="order-status">Загрузка...</span></div>

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

• Откройте страницу заказа под учетной записью пользователя, которому принадлежит заказ.
• Обновите статус заказа из админки WooCommerce.
• Через 30 секунд (интервал опроса) статус на странице пользователя должен обновиться автоматически без перезагрузки.
• Если статус не меняется, проверьте консоль браузера на наличие ошибок в запросах.

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

• Ошибка 403 Forbidden при запросе API: Проверьте, что пользователь авторизован и является владельцем заказа или админом. В REST API permission_callback настроена проверка.
• Не обновляется статус на странице: Убедитесь, что в скрипте правильно указан ID заказа, а элемент с id order-status присутствует на странице.
• REST API возвращает ошибку 404: Проверьте, что заказ с указанным ID существует и доступен текущему пользователю.
• Проблемы с кешированием: На некоторых хостингах REST API ответы кешируются. Для решения добавьте заголовки для отключения кеша или настройте исключения в кеширующих плагинах.

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

• В REST API endpoint разрешайте доступ только авторизованным пользователям и проверяйте права доступа к заказу.
• Для уменьшения нагрузки на сервер увеличьте интервал опроса или реализуйте WebSocket-подключение (более сложное, требует отдельной настройки).
• Используйте nonce и другие меры защиты при расширении функционала AJAX.
• Если используете кеширование на уровне сервера, исключите из кеша URL REST API или настройте правильное обновление кеша после изменения статусов заказов.

Сравнение вариантов реализации отслеживания статуса заказа