Удаление стандартной AJAX корзины WooCommerce и замена на собственную в теме WordPress

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

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

Пошаговое решение: удаление стандартной AJAX корзины и создание собственной

1. Отключение стандартного AJAX обновления корзины

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

function remove_woocommerce_ajax_cart_fragments() {
    // Удаляем скрипт обновления корзины
    wp_dequeue_script('wc-cart-fragments');
}
add_action('wp_enqueue_scripts', 'remove_woocommerce_ajax_cart_fragments', 11);

Этот код деактивирует скрипт, который отвечает за динамическое обновление корзины в шапке и других местах.

2. Удаление стандартного виджета корзины WooCommerce

Если в теме используется виджет корзины, его тоже стоит убрать, чтобы не было конфликта:

function unregister_woocommerce_cart_widget(){
    unregister_widget('WC_Widget_Cart');
}
add_action('widgets_init', 'unregister_woocommerce_cart_widget', 15);

3. Создание собственного AJAX-кода для корзины

Теперь создадим кастомный AJAX-запрос для обновления корзины. В functions.php добавим обработчик:

add_action('wp_ajax_custom_update_cart', 'custom_update_cart');
add_action('wp_ajax_nopriv_custom_update_cart', 'custom_update_cart');

function custom_update_cart() {
    // Получаем количество товаров в корзине
    $count = WC()->cart->get_cart_contents_count();
    // Можно возвращать и другую информацию, например, сумму
    $total = WC()->cart->get_cart_total();

    wp_send_json_success(array(
        'count' => $count,
        'total' => $total
    ));
}

Этот обработчик возвращает JSON с количеством товаров и общей суммой корзины.

4. Добавление JS для вызова AJAX и обновления корзины

В теме добавьте собственный JavaScript (например, в main.js или отдельном файле), который будет запрашивать обновления и менять содержимое корзины:

jQuery(document).ready(function($) {
    function updateCart() {
        $.ajax({
            url: wc_cart_params.ajax_url, // WooCommerce ajax URL
            method: 'POST',
            data: {
                action: 'custom_update_cart'
            },
            success: function(response) {
                if(response.success) {
                    $('#custom-cart-count').text(response.data.count);
                    $('#custom-cart-total').html(response.data.total);
                }
            }
        });
    }

    // Вызываем обновление при загрузке страницы
    updateCart();

    // Можно добавить вызов updateCart при добавлении товара в корзину
    $(document.body).on('added_to_cart', updateCart);
});

В HTML шаблоне темы добавьте блок с id custom-cart-count и custom-cart-total для отображения данных корзины.

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

• Откройте сайт в браузере, убедитесь, что корзина не обновляется автоматически через стандартный AJAX WooCommerce.
• Добавьте товар в корзину, проверьте, что счетчик в вашем кастомном блоке обновился.
• Убедитесь, что консоль браузера не содержит ошибок JS, связанных с корзиной.
• Проверьте сетевые запросы — должен быть AJAX-запрос с action=custom_update_cart.

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

• Ошибка: Кастомный AJAX не срабатывает, ответ пустой или 0.
  Причина: Не подключен wp_ajax хук или неправильный action.
  Решение: Проверьте, что в functions.php правильно подключены add_action('wp_ajax_custom_update_cart', ...) и add_action('wp_ajax_nopriv_custom_update_cart', ...).
• Ошибка: Стандартный скрипт wc-cart-fragments все еще обновляет корзину.
  Причина: Приоритет удаления скрипта низкий.
  Решение: Убедитесь, что wp_dequeue_script('wc-cart-fragments') вызывается с приоритетом не ниже 11.
• Ошибка: JS ошибка "wc_cart_params is undefined".
  Причина: Не подключен скрипт WooCommerce или локализация параметров.
  Решение: Проверьте, что ваш скрипт зависит от WooCommerce и вызывается после него, либо замените wc_cart_params.ajax_url на "" в JS.

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

• Всегда проверяйте права доступа и nonce, если AJAX запросы могут изменять данные. В нашем случае, запрос только читает данные корзины, поэтому достаточно стандартной проверки.
• Минимизируйте количество AJAX-запросов — вызывайте обновление корзины только при необходимости, например, после добавления товара.
• Для улучшения производительности кешируйте статический HTML, но для корзины важно показывать актуальные данные, поэтому используйте AJAX.
• Используйте wp_localize_script для передачи URL AJAX и безопасности из PHP в JS, например:

function enqueue_custom_cart_script() {
    wp_enqueue_script('custom-cart', get_template_directory_uri() . '/js/custom-cart.js', array('jquery'), null, true);
    wp_localize_script('custom-cart', 'customCartParams', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('custom_cart_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'enqueue_custom_cart_script');

И в JS заменить URL на customCartParams.ajax_url, а также добавлять nonce в данные запроса.

Сравнение вариантов реализации кастомной корзины