javascript - Woocommerce，将产品添加到购物车，请求失败

Question

所以我目前正在学习 WordPress/WooCommerce 框架。我想知道如何创建一个将一堆产品添加到购物车的按钮。一次多个会很棒，因为目前我必须循环遍历产品 ID 列表，然后分别启动一个单独的 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 and AJAX 附带的所有细微差别。 .

首先，你必须确保你有 localized您的自定义 JavaScript 文件，您可以在 wp_enqueue_scripts 期间执行此操作像这样 Hook :

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与您的功能一起执行的操作 adds a product to the cart programmatically ，像这样:

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
}

最后，您在 custom.js 文件中调用 AJAX 函数，如下所示:

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.
        });
    });
});