WooCommerce Hinzufügen mehrerer Artikel zum Warenkorb mit Ajax

Ich verwende die neueste Version von WordPress und Woocommerce. Ich habe etwas JavaScript, das DOM-Elemente der Klasse durchläuft .selectable und packt die product_id Attribut von denen mit Klasse .selectedund fügt diesen Artikel dem Einkaufswagen hinzu:

// selects the elements
$('.next').on('click', function() {
    var parent  = $(this).closest('.panel');
    var selectables = parent.children('.option.selectable.selected');

    $(selectables).each(function() {
        var product = $(this).attr('product');
        add_to_cart(product, 1);    
    });
}

// add to cart AJAX
function add_to_cart(product_id, qty) {
    $.ajax({
        type: "POST",
        url: base_url + '/wp-admin/admin-ajax.php',
        data: {action : 'cl_add_to_cart', 'product_id': product_id, 'qty': qty},
        success : function(response) {
            console.log(response);
        }
    });
}

Und ich habe eine PHP-Funktion in functions.php

add_action('wp_ajax_cl_add_to_cart', 'cl_add_to_cart');
add_action('wp_ajax_nopriv_cl_add_to_cart', 'cl_add_to_cart');

function cl_add_to_cart() {
    global $woocommerce;
    $product_id   = trim($_POST['product_id']);
    $qty = !empty($_POST['qty']) ? trim($_POST['qty']) : 1;
    $added = WC()->cart->add_to_cart($product_id, $qty);
    echo json_encode($added);
}

Der AJAX-Aufruf trifft die PHP-Funktion einwandfrei – ich kann $added echoen, was mir einen Hash gibt. Wenn ich zwei oder mehr Artikel in der Selectables-Variable habe, treffen beide auf die PHP-Funktion (ich bekomme zwei Hashes zurück), aber nur der erste wird dem Warenkorb hinzugefügt.

Ich kann beim besten Willen nicht herausfinden, warum. Irgendwelche Ideen?

Es ist besser, alle hinzuzufügenden Elemente auf einmal mit Ajax zu senden, als sie separat in mehreren Ajax-Anforderungen zu senden, dies ist einfacher und effektiver.

Das müssen Sie sicher sein $(selectables).each(function() { // ... }); funktioniert wie erwartet.

Im Folgenden wird eine eindeutige Ajax-Anforderung für Ihr Klickereignis gesendet.

Der jQuery-Code

// Multi Ajax adda to cart
function multiAddToCart( productsData ) {
    $.ajax({
        url: base_url + '/wp-admin/admin-ajax.php',
        type: 'POST',
        dataType: 'JSON',
        data: {
            'action': 'multi_add_to_cart',
            'items' : Object.assign({}, productsData)
        },
        success : function(response) {
            $(document.body).trigger('wc_fragment_refresh'); // Refresh cart fragments
            console.log(response);
        },
        error : function(error) {
            console.log(error);
        }
    });
}

$('.next').on('click', function() {
    var productsData = [];
    var parent  = $(this).closest('.panel');
    var selectables = parent.children('.option.selectable.selected');

    $(selectables).each(function() {
        var productId = $(this).attr('product');
        productsData.push({'id': productId, 'qty': 1});
    });
    // Check the data before (number of items found)
    console.log(productsData); 

    multiAddToCart( productsData );
});

Die PHP-Empfängerfunktion:

add_action('wp_ajax_multi_add_to_cart', 'multi_ajax_add_to_cart');
add_action('wp_ajax_nopriv_multi_add_to_cart', 'multi_ajax_add_to_cart');
function multi_ajax_add_to_cart() {
    if (isset($_POST['items']) ) {
        $item_keys = array();

        foreach( $_POST['items'] as $item ) {
            if( isset($item['id']) ) {
                $item_qty  = isset($item['qty']) && $item['qty'] > 1 ? $item['qty'] : 1;
                $item_keys[] = WC()->cart->add_to_cart($item['id'], $item_qty);
            }
        }
        echo json_encode($item_keys); // Send back cart item keys
    }
    die();
}

Der Code wird in die Datei functions.php des aktiven untergeordneten Designs (oder aktiven Designs) eingefügt. Getestet und funktioniert.

Es sollte funktionieren, alle Elemente auf einmal hinzuzufügen.