Добавьте в корзину несколько вариантов с помощью JQuery и Ajax в WooCommerce

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

Если я отправлю one_data, это сработает, но не с multi_data

product_id в этом коде работает, если продукт является переменным, то есть это идентификатор варианта.

Код:

jQuery(function($) {
    $(document.body).on('click', '#button', function(e) {
        //const one_data = { product_id: 592, quantity: 1 }
        const multi_data = [
            { product_id: 592, quantity: 2 },
            { product_id: 593, quantity: 1 },
            { product_id: 594, quantity: 3 }
        ];

        $.ajax({
            type: 'POST',
            url: wc_add_to_cart_params.wc_ajax_url.toString().replace( '%%endpoint%%', 'add_to_cart' ),
            data: multi_data,
            success: function(res) {
                console.info(res);
            },
        });
    });
});

Чтобы добавить в корзину несколько вариантов с помощью jQuery и Ajax в WooCommerce, вам необходимо отправить отдельные запросы для каждого варианта или создать собственную конечную точку для обработки нескольких товаров в одном запросе. Встроенный в WooCommerce обработчик Ajax для добавления в корзину (add_to_cart) не поддерживает добавление нескольких товаров в одном запросе «из коробки».

SKJ 16.06.2024 19:43

Думаю, ты прав, спасибо, что показал мне путь!

Becker Armata 16.06.2024 22:48
Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
3
2
83
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Для этого необходимо создать полную пользовательскую функциональность Ajax Multi Add to Cart.

В приведенном ниже коде сведения о продуктах, которые необходимо сразу добавить в корзину, расположены в первой функции PHP. Вы всегда можете добавить операторы IF/ELSE, чтобы добавить условия для разных продуктов.

Он работает напрямую с идентификаторами вариантов (из переменных продуктов), а также с простыми продуктами.

PHP-код:

// Define below all the products to be added to cart
add_filter('wc_multi_add_to_cart_products_data', 'define_products_data_to_be_added', 10, 1 );
function define_products_data_to_be_added( $products_data ) {
    // Here, define the Products Ids (or Variation Ids) and the quantities (optional)
    $products_data = array(
        [ 'id' => 98,  'qty' => 1 ],
        [ 'id' => 99,  'qty' => 2 ],
        [ 'id' => 100, 'qty' => 1 ],
    );

    return $products_data;
}

// Enqueuing scripts
add_action('wp_enqueue_scripts', 'enqueue_multi_add_to_cart_scripts');
function enqueue_multi_add_to_cart_scripts() {
    // Custom filter hook
    $products_data = apply_filters('wc_multi_add_to_cart_products_data', array() );

    if ( $products_data ) {
        // With the main theme use: get_template_directory_uri() . /js/…
        // With a child theme use: get_stylesheet_directory_uri() . /js/…
        // With a plugin use: plugin_dir_url( __FILE__ ) . js/…
        wp_enqueue_script('multi-add-to-cart', get_stylesheet_directory_uri() . '/js/multi-add-to-cart.js', array('jquery'), '1.0', true);
        
        wp_localize_script('multi-add-to-cart', 'wc_multi_atc', array(
            'ajax_url' => admin_url('admin-ajax.php'), 
            'action'   => 'multi_add_to_cart',
            'products' => $products_data, 
            'nonce'    => wp_create_nonce('multi_atc'),
        ));
    }

    
}

// Handle Ajax Request
add_action('wp_ajax_multi_add_to_cart', 'multi_add_to_cart');
add_action('wp_ajax_nopriv_multi_add_to_cart', 'multi_add_to_cart');
function multi_add_to_cart() {
    if ( isset($_POST['nonce']) 
    && wp_verify_nonce($_POST['nonce'], 'multi_atc')
    && isset($_POST['products']) && is_array($_POST['products']) ) {
        $response  = array();


        foreach( wc_clean($_POST['products']) as $values ) {
            if ( isset($values['id']) && $values['id'] > 0 
            && isset($values['qty']) && $values['qty'] > 0 ) {
                $product_id   = absint($values['id']);
                $product      = wc_get_product( $product_id );

                $not_added    = array( 
                    'key'   => null,
                    'added' => 0,
                    'id'    => $product_id,
                );

                if ( ! is_a($product, 'WC_Product') ) {
                    $response[] = $not_added;
                    continue;
                }

                $quantity     = wc_stock_amount( wp_unslash( $values['qty'] ) );
                $variation_id = 0;
                $variation    = array();

                if ( $product && 'variation' === $product->get_type() ) {
                    $variation_id = $product_id;
                    $product_id   = $product->get_parent_id();
                    $variation    = $product->get_variation_attributes(); 
                }
                
                if ( 'publish' !== get_post_status( $product_id ) ) {
                    $response[] = $not_added;
                    continue;
                }
                
                if ( $variation_id && 'publish' !== $product->get_status() ) {
                    $response[] = $not_added;
                    continue;
                }

                $cart_item_key = WC()->cart->add_to_cart( $product_id, $quantity, $variation_id, $variation );
                
                $response[] = array( 
                    'key'   => $cart_item_key,
                    'added' => $cart_item_key ? $quantity : '0',
                    'id'    => $variation_id ?: $product_id,
                );
            }
        }

        if ( ! empty($response) ) {
            wp_send_json($response);
        }
    }
    wp_die('Something went wrong.');
}

Код находится в файле function.php вашей дочерней темы (или в плагине).

Код JavaScript в файле с именем «multi-add-to-cart.js», расположенном в подпапке «js»:

jQuery( function($) {
  
    // wc_add_to_cart_params is required to continue
    if ( typeof wc_multi_atc === 'undefined' ) {
        console.info('Error: "wc_multi_atc" not defined.');
        return false;
    }

    $(document.body).on('click', '#button', function(e) {
        e.preventDefault();
        
        $.ajax({
            type: 'POST',
            url: wc_multi_atc.ajax_url,
            data: data = {
                'action': wc_multi_atc.action,
                'nonce': wc_multi_atc.nonce,
                'products': wc_multi_atc.products
            },
            success: function(response) {
                $(document.body).trigger('wc_fragment_refresh');
                console.info(response);
            },
            error: function (error) {
                console.info(error);
            }
        });
    });
});

HTML-код кнопки «Добавить в корзину» (пример):

<div id = "button" class = "button">Add Products to Cart</div>

Протестировано и работает.


Связанный:

Другие вопросы по теме

В чем разница между извлечением данных вручную и использованием запроса GET или POST с jquery AJAX?
Решите, когда завершатся вызов и выборка Ajax
Живой поиск Ajax в заголовке на трясогузке/Django
Пользовательский метод доставки с дополнительной проблемой выбора поля в блоке WooCommerce Checkout
Пытаюсь остаться на странице после отправки: «Не удалось получить» (для написания формы использовался машинописный текст)
Добавьте виджет в WooCommerce Checkout Order Review перед кнопкой отправки
PHP-скрипт WordPress некорректно вызывается Javascript
Динамическое отображение определенного варианта оплаты на основе адреса электронной почты или телефона для выставления счета при оформлении заказа Woocommerce
У меня есть типы входных данных для флажка, и когда я выполняю методы удаления или получения, он работает, но страница не перезагружается
Веб-приложение Azure блокирует запросы AJAX к приложению django