WooCommerce: как правильно отключить AJAX в форме оплаты

Диагностика проблемы с AJAX в форме оплаты WooCommerce

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

• При выборе способа оплаты или заполнении полей форма оплаты обновляется без перезагрузки страницы?
• Появляются ли ошибки в консоли браузера (F12 > Console) во время оформления заказа?
• Данные заказа после отправки формы корректно сохраняются или возникают сбои?

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

Пошаговое решение: отключение AJAX в форме оплаты WooCommerce

WooCommerce использует AJAX для обновления элементов формы оплаты динамически. Чтобы отключить этот функционал, нужно отключить обработчик JavaScript, который отвечает за динамическое обновление.

1. Добавляем фильтр для отключения AJAX обновления на странице оформления заказа

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

add_filter('woocommerce_checkout_update_order_review_expired', '__return_true');

Этот фильтр предотвращает автоматическое обновление заказа по AJAX.

2. Отключаем скрипты WooCommerce, связанные с AJAX на странице оформления заказа

Чтобы полностью предотвратить AJAX, нужно отключить скрипт wc-checkout. Сделайте это, добавив следующий код:

function disable_wc_checkout_ajax_scripts() {
    if (is_checkout()) {
        wp_dequeue_script('wc-checkout');
        wp_deregister_script('wc-checkout');
    }
}
add_action('wp_print_scripts', 'disable_wc_checkout_ajax_scripts', 100);

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

3. Обрабатываем отправку формы без AJAX

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

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

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

Если форма обновляется с полной перезагрузкой и ошибок нет — отключение AJAX выполнено успешно.

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

• Ошибка: После отключения формы оплаты не отправляются данные или появляются ошибки валидации.
  Причина: Кастомные плагины или темы ожидают AJAX-обработку.
  Решение: Проверьте кастомный код, отключите AJAX-зависимые хуки и функции, либо адаптируйте код под стандартную отправку формы.
• Ошибка: Скрипт wc-checkout не отключается, AJAX всё еще работает.
  Причина: Код отключения скрипта добавлен в неправильный хук или с низким приоритетом.
  Решение: Используйте хук wp_print_scripts с приоритетом 100 или выше.
• Ошибка: Оформление заказа занимает слишком много времени или страница зависает.
  Причина: Перезагрузка страницы приводит к конфликтам с кэшированием.
  Решение: Очистите кэш сайта и браузера, проверьте настройки кэш-плагинов.

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

• Безопасность: При отключении AJAX убедитесь, что все проверки и валидации на стороне сервера работают корректно — AJAX не должен быть единственным уровнем защиты.
• Производительность: Отключение AJAX увеличивает количество полных перезагрузок страницы, что может повлиять на UX и время загрузки. Используйте это решение только если AJAX вызывает ошибки.
• Кэширование: Отключение AJAX требует настройки исключений в кэш-плагинах для страницы оформления заказа, чтобы избежать кэширования динамического контента.

Сравнение подходов отключения AJAX в WooCommerce