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

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

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

Пошаговое решение: как реализовать оформление заказа с AJAX

1. Подключение скрипта для AJAX

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

function wptricks_enqueue_checkout_ajax() {
    if (is_checkout() && ! is_order_received_page()) {
        wp_enqueue_script('wptricks-checkout-ajax', get_template_directory_uri() . '/js/checkout-ajax.js', array('jquery', 'wc-checkout'), '1.0', true);
        wp_localize_script('wptricks-checkout-ajax', 'wptricks_ajax_checkout_params', array(
            'ajax_url' => admin_url('admin-ajax.php'),
            'nonce'    => wp_create_nonce('wptricks_ajax_checkout_nonce'),
        ));
    }
}
add_action('wp_enqueue_scripts', 'wptricks_enqueue_checkout_ajax');

2. Создание JS скрипта AJAX отправки формы

Создайте файл checkout-ajax.js в папке /js темы с таким содержимым:

jQuery(function($) {
    $('form.checkout').on('submit', function(e) {
        e.preventDefault();
        var $form = $(this);
        if ($form.is('.processing')) {
            return false;
        }
        $form.addClass('processing').block({
            message: null,
            overlayCSS: {
                background: '#fff',
                opacity: 0.6
            }
        });
        var data = $form.serialize();
        $.ajax({
            type: 'POST',
            url: wptricks_ajax_checkout_params.ajax_url,
            data: data + '&action=wptricks_process_checkout&nonce=' + wptricks_ajax_checkout_params.nonce,
            success: function(response) {
                if (response.result === 'success') {
                    window.location.href = response.redirect;
                } else if (response.result === 'failure') {
                    $form.removeClass('processing').unblock();
                    $('.woocommerce-NoticeGroup-checkout, .woocommerce-error, .woocommerce-message').remove();
                    $form.prepend(response.messages);
                    $(document.body).trigger('updated_checkout');
                }
            },
            error: function() {
                $form.removeClass('processing').unblock();
                alert('Ошибка при оформлении заказа. Попробуйте позже.');
            }
        });
    });
});

3. Обработка AJAX-запроса в PHP

Добавьте в functions.php обработчик:

function wptricks_process_checkout() {
    check_ajax_referer('wptricks_ajax_checkout_nonce', 'nonce');

    WC()->frontend_includes();
    WC()->cart->calculate_totals();

    $posted_data = $_POST;
    $result = WC()->checkout()->process_checkout($posted_data);

    if (!empty($result->errors)) {
        wc_clear_notices();
        foreach ($result->errors as $error) {
            wc_add_notice($error, 'error');
        }
        $messages = wc_print_notices(true);
        wp_send_json(array('result' => 'failure', 'messages' => $messages));
    } else {
        wp_send_json(array('result' => 'success', 'redirect' => $result->redirect));
    }
    wp_die();
}
add_action('wp_ajax_wptricks_process_checkout', 'wptricks_process_checkout');
add_action('wp_ajax_nopriv_wptricks_process_checkout', 'wptricks_process_checkout');

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

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

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

• Ошибка 400 или 403 при AJAX-запросе: проверьте nonce, он должен совпадать и быть валидным.
• Форма перезагружается: убедитесь, что скрипт подключен и не конфликтует с другими плагинами, нет двойного сабмита.
• Сообщения об ошибках не отображаются: вызовите wc_print_notices(true) и проверьте, что во фронтенде есть контейнер для вывода сообщений.
• Проблемы с блокировкой формы: убедитесь, что в проекте подключена библиотека jQuery BlockUI или замените на свою реализацию блокировки.

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

• Используйте nonce для защиты AJAX-обработчика от CSRF.
• Минимизируйте количество данных, передаваемых в AJAX-запросе, чтобы снизить нагрузку.
• Обрабатывайте ошибки корректно, чтобы не раскрывать внутренние детали сервера.
• Кэшируйте статические ресурсы и подключайте скрипты с правильными зависимостями.

Сравнение подходов к AJAX оформлению заказа WooCommerce