AJAX в корзине WooCommerce: полное руководство по настройке и кастомизации

AJAX в корзине WooCommerce

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

Вот несколько способов работы с AJAX в WooCommerce, включая активацию, настройку и кастомизацию.

1. Включение AJAX для кнопки "Добавить в корзину"

По умолчанию WooCommerce поддерживает использование AJAX для кнопки "Добавить в корзину" на страницах архива (категорий) товаров. Это позволяет добавлять товар в корзину без перезагрузки страницы.

Шаги для включения AJAX для добавления в корзину:

Перейдите в WooCommerce > Настройки > Продукты.
На вкладке Общие найдите раздел Добавление в корзину.
Установите флажок Включить возможность AJAX для кнопки "Добавить в корзину" на страницах архива.
Нажмите Сохранить изменения.

Теперь товары можно будет добавлять в корзину на страницах архива (категорий) без перезагрузки страницы.

2. Обновление корзины с помощью AJAX на странице корзины

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

Если у вас возникли проблемы с тем, что корзина не обновляется через AJAX, или если вы хотите кастомизировать этот процесс, вот несколько решений.

Проверьте корректность работы AJAX:

Убедитесь, что кнопка "Обновить корзину" активируется при изменении количества товаров.
Убедитесь, что в вашей теме есть вызовы функций WooCommerce для работы с AJAX.

Если AJAX не работает:

Убедитесь, что ваша тема поддерживает стандартные хуки WooCommerce для корзины.
Проверьте, не отключены ли файлы JavaScript WooCommerce в вашей теме.
Проверьте, активирован ли файл wc-cart-fragments.js, который отвечает за обновление корзины через AJAX. Этот файл должен быть подключён на страницах магазина и корзины.

3. Кастомизация AJAX добавления в корзину

Иногда вам может потребоваться изменить поведение AJAX при добавлении товаров в корзину. Например, можно показать уведомление о добавлении товара, изменить внешний вид кнопки или перенаправить пользователя на другую страницу.

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

Добавьте следующий код в файл functions.php вашей темы:

// Добавляем кастомное уведомление при добавлении товара в корзину через AJAX
add_filter( 'wc_add_to_cart_message_html', 'custom_add_to_cart_message', 10, 2 );

function custom_add_to_cart_message( $message, $product_id ) {
    $product = wc_get_product( $product_id );
    $message = sprintf( '%s был успешно добавлен в корзину.', $product->get_name() );
    return $message;
}

Этот код изменяет стандартное уведомление о добавлении товара в корзину на кастомное сообщение с названием товара.

4. Добавление AJAX в кастомные кнопки

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

Пример кастомной кнопки для добавления товара в корзину через AJAX:

Добавьте следующую HTML-разметку и JavaScript-код на вашу страницу:

<a href="#" class="custom-add-to-cart" data-product-id="123">Добавить в корзину</a>

<script type="text/javascript">
jQuery(document).ready(function($){
    $('.custom-add-to-cart').click(function(e) {
        e.preventDefault();
        var product_id = $(this).data('product-id');
        
        $.ajax({
            type: 'POST',
            url: wc_add_to_cart_params.ajax_url,
            data: {
                action: 'woocommerce_ajax_add_to_cart',
                product_id: product_id,
            },
            success: function(response) {
                // Уведомление или обновление UI
                alert('Товар добавлен в корзину');
                $(document.body).trigger('added_to_cart');
            }
        });
    });
});
</script>

HTML: Создаётся ссылка или кнопка с уникальным атрибутом data-product-id, где указывается ID товара.
JavaScript: Отправляется AJAX-запрос, который добавляет товар в корзину без перезагрузки страницы. После успешного добавления можно выполнить любые действия, например, уведомление или обновление корзины.

5. Обновление мини-корзины через AJAX

Если на вашем сайте используется мини-корзина (например, в шапке сайта), и вам нужно обновить её после добавления товаров через AJAX, вы можете сделать это с помощью wc_cart_fragments. Этот скрипт отвечает за обновление фрагментов корзины.

Пример:

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

add_action( 'wp_footer', 'custom_cart_refresh' );

function custom_cart_refresh() {
    ?>
    <script type="text/javascript">
    jQuery(function($) {
        $(document.body).on('added_to_cart', function() {
            $.ajax({
                url: wc_add_to_cart_params.ajax_url,
                type: 'POST',
                data: {
                    action: 'woocommerce_get_refreshed_fragments'
                },
                success: function (data) {
                    if (data && data.fragments) {
                        $.each(data.fragments, function (key, value) {
                            $(key).replaceWith(value);
                        });
                    }
                }
            });
        });
    });
    </script>
    <?php
}

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

6. Отключение AJAX для корзины

Если вы хотите отключить AJAX для кнопки "Добавить в корзину" или других элементов, можно сделать это через настройки WooCommerce или кастомный код.

Отключение AJAX через настройки:

Перейдите в WooCommerce > Настройки > Продукты.
В разделе Общие снимите флажок Включить возможность AJAX для кнопки "Добавить в корзину" на страницах архива.
Нажмите Сохранить изменения.

Отключение AJAX через код:

Если вам нужно отключить AJAX через код, добавьте следующий код в файл functions.php:

// Отключаем AJAX для кнопки "Добавить в корзину" на страницах архива
function disable_ajax_add_to_cart() {
    remove_action( 'wp_enqueue_scripts', 'woocommerce_ajax_add_to_cart' );
}
add_action( 'wp_enqueue_scripts', 'disable_ajax_add_to_cart', 1 );

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

AJAX в корзине WooCommerce