WooCommerce Hinzufügen mehrerer Artikel zum Warenkorb mit Ajax

Lesezeit: 3 Minuten

Benutzer-Avatar
Klingeln

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?

  • Ich habe deinen Code getestet und bei mir funktioniert er einwandfrei. Sind Sie sicher, dass Sie nicht jedes Mal dasselbe Produkt hinzufügen, denn wenn Sie dasselbe Produkt in den Warenkorb legen, erhöht sich die Menge dieses Produkts, das nicht als neues Produkt betrachtet wird.

    – Bhautik

    23. März 2021 um 4:44 Uhr

Benutzer-Avatar
LoicTheAztec

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.

  • Okay, danke. Der Unterschied besteht darin, dass es mehrere Weiter-Schaltflächen gibt, z. B. 8, sodass ich productsData außerhalb des Click-Ereignisses abstrahieren muss, damit es bestehen bleibt.

    – Ping

    23. März 2021 um 16:39 Uhr

  • @Ping Mit dem bereitgestellten Code ist es schwierig, alles zu erraten… Also funktioniert es? … Wenn diese Antwort Ihre Frage beantwortet, können Sie die Antwort bitte akzeptieren, und wenn Sie möchten/möchten, können Sie die Antwort auch positiv bewerten, danke.

    – LoicTheAztec

    23. März 2021 um 16:45 Uhr


1011000cookie-checkWooCommerce Hinzufügen mehrerer Artikel zum Warenkorb mit Ajax

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy