Как добавить в корзину вариативный товар через Ajax?

Чтобы добавить вариативный товар в корзину с использованием Ajax в WordPress, вам понадобится выполнить следующие шаги:

1. Создайте функцию для обработки запроса Ajax. Эта функция должна добавлять вариативный товар в корзину и обновлять информацию о корзине на странице. Включите эту функцию в файл functions.php вашей темы или в плагин, который вы используете для настройки веб-сайта WordPress.

add_action( 'wp_ajax_add_to_cart', 'ajax_add_to_cart' ); // Обработчик для авторизованных пользователей
add_action( 'wp_ajax_nopriv_add_to_cart', 'ajax_add_to_cart' ); // Обработчик для неавторизованных пользователей

function ajax_add_to_cart() {
    $product_id = sanitize_text_field( $_POST['product_id'] );
    $variation_id = sanitize_text_field( $_POST['variation_id'] );
    $quantity = sanitize_text_field( $_POST['quantity'] );

    // Добавление вариативного товара в корзину
    WC()->cart->add_to_cart( $product_id, $quantity, $variation_id );

    // Обновление информации о корзине и возврат HTML-кода для отображения на странице
    WC_AJAX::get_refreshed_fragments();
    die();
}

2. Создайте JavaScript-обработчик для отправки Ajax-запроса серверу. Вы можете разместить этот скрипт в файле JavaScript вашей темы или в зависимости от ваших потребностей.

jQuery(document).ready(function($) {
    $('.add-to-cart-button').click(function(e) {
        e.preventDefault();

        var product_id = $(this).data('product-id');
        var variation_id = $(this).data('variation-id');
        var quantity = $(this).data('quantity');

        // Отправка Ajax-запроса серверу
        $.ajax({
            url: ajaxurl, // Системная переменная, указывающая путь к обработчику запроса Ajax
            type: 'POST',
            data: {
                action: 'add_to_cart',
                product_id: product_id,
                variation_id: variation_id,
                quantity: quantity
            },
            success: function(response) {
                // Обновление информации о корзине на странице
                $('.woocommerce-cart-form').replaceWith($(response).find('.woocommerce-cart-form'));
                $('.woocommerce-mini-cart').replaceWith($(response).find('.woocommerce-mini-cart'));
            }
        });
    });
});

3. Добавьте кнопку "Добавить в корзину" на страницу товара, используя функцию woocommerce_template_loop_add_to_cart(). Помимо этого, укажите дополнительные данные, такие как data-product-id, data-variation-id и data-quantity, если они необходимы.

echo '<a href="#" class="add-to-cart-button button" data-product-id="' . get_the_ID() . '" data-variation-id="' . $variation_id . '" data-quantity="' . $quantity . '">Добавить в корзину</a>';

4. Убедитесь, что у вас включено использование Ajax в WooCommerce. Это можно сделать, перейдя в раздел "Настройки" -> "Товары" -> "Вывод" в административной панели WordPress и установив флажок "Использовать Ajax-выходы".

Теперь, когда пользователь нажимает кнопку "Добавить в корзину" на странице товара, используя вариативный товар, данные отправляются на сервер с помощью Ajax-запроса. Функция ajax_add_to_cart() обрабатывает запрос, добавляет товар в корзину и обновляет информацию о корзине на странице. Затем JavaScript-обработчик обновляет отображение корзины на странице, заменяя соответствующие HTML-элементы новыми данными из Ajax-ответа.