Woocommerce, добавить товар (ы) в корзину, запрос не выполнен

Question

Итак, я сейчас изучаю фреймворк WordPress / WooCommerce. Я хотел знать, как я могу создать кнопку, которая добавляет в корзину несколько товаров. Несколько за раз было бы здорово, так как в данный момент мне приходится циклически просматривать список идентификаторов продуктов, а затем запускать отдельный запрос AJAX каждый (см. Код ниже), этот метод в любом случае имеет проблемы, так как он добавляет только один из товары в корзину, хотя все запросы были отправлены.

В конечном итоге, если я смогу отсортировать запросы на добавление одного товара в корзину, тогда будет ли лучший способ добиться того, что мне нужно?

Код:

<script>


    function add_to_cart(checkout=0){

        // grabs all the products And their qty chosen in product list view
        var arr = document.getElementsByName('qty');

        for(var i=0;i<arr.length;i++){

            var myid = arr[i].id;
            var myidtrue = myid.split("_");
            myidtrue = myidtrue[1];

            // get current qty
            var myqty = arr[i].value;

            if(myqty > 0){
                var xmlhttp = new XMLHttpRequest();     
                xmlhttp.open("POST", "http://wp/?wc-ajax=add_to_cart", true);
                xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
                xmlhttp.send('product_id=' + myidtrue + '&quantity=' + myqty);
                console.log("sent request for " + myidtrue + " (" + myqty + ")");
            }else{
                console.log("didnt sent request for " + myidtrue + " (" + myqty + ")");             
            }

        }
    }
</script>

Answer 1

Существует потенциально более простой способ сделать это, но я проведу вас через полный набор, который я хотел бы использовать в этом случае, так как я не уверен, что вы узнали все нюансы, которые есть в Wordpress и AJAX .

Во-первых, вы должны убедиться, что у вас есть локализованный ваш пользовательский файл JavaScript, вы делаете это во время ловушки wp_enqueue_scripts следующим образом:

add_action( 'wp_enqueue_scripts', 'my_custom_script' );
function my_custom_script() {
    wp_register_script( 'custom-js', get_template_directory_uri() . '/custom.js', array(), '20190710', true ); //this is a js file called custom.js which is directly in my theme root file i.e. example.com/wp-content/themes/my-theme-slug/custom.js
    wp_localize_script( 'custom-js', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));
    wp_enqueue_script( 'custom-js');
}

Во-вторых, вы можете зарегистрировать свою функцию как для вошедших, так и для не вошедших пользователей, используя действия wp_ajax и wp_ajax_nopriv вместе с вашей функцией, которая программно добавляет товар в корзину , например:

add_action("wp_ajax_my_custom_add_to_cart", "my_custom_add_to_cart");
add_action("wp_ajax_nopriv_my_custom_add_to_cart", "my_custom_add_to_cart");
function my_custom_add_to_cart() {
    $product_ids = $_REQUEST['product_ids']; //get the product ids from your ajax function
    foreach (explode(',', $product_ids) as $product_id) { //loop through each provided product id
        if(get_post_type($product_id == 'product')) { //ensure that the id provided is valid AND a product
            WC()->cart->add_to_cart( $product_id ); //add it to cart
        }
    }
    die(); //close the connection
}

Наконец, вы вызываете функцию AJAX внутри вашего custom.js файла следующим образом:

jQuery(document).ready(function($){
    $('.my-custom-add-to-cart').click(function(){
        var my_product_ids = '123,124,125';
        var request = jQuery.ajax({
            method: "POST",
            url: myAjax.ajaxurl+'?r='+Math.random(),
            data: { action: "my_custom_add_to_cart", product_ids: my_product_ids }, //function name, along with $_REQUEST variable
            dataType: "html",
        });
        request.done(function( data ) { 
            //do whatever you want here - redirecting to checkout is normally a great idea.
        });
    });
});