将多个产品添加到 WooCommerce 购物车 - AJAX

Question

I am trying to find a way to select multiple item variations from a Vue frontend inside a WooCommerce website.

I installed the WC Ajax Cart plugin in order to have some sort of endpoint that I can call using AXIOS.

Each option I select ads and I to an array of called selectedProducts

When the user presses on checkout what I do is:

     this.textCheckout = "Checking you out..."; //No pun intended actually xD

       this.products.forEach((item, i) => {
         if(this.selectedProducts.includes(item.variation_id)) {

           let adder = new FormData();

            adder.append('attribute_alege-zona', Object.values(item.attributes)[0]);
            adder.append('attribute_tratament', Object.values(item.attributes)[1]);
            adder.append('quantity', 1);
            adder.append('product_id', item.variation_id);
            adder.append('variation_id', item.variation_id);

            console.log(adder);

            let me = this;

            let apel = setTimeout(function(){
              axios({
                method: "post",
                url: "https://HOST/?wc-ajax=add_to_cart",
                data: adder,
                headers: { "Content-Type": "multipart/form-data" },
              })
              .then(function (response) {

              })
              .catch(function (response) {
                console.log(response);
              });
            },1000)
         }
       });

       let goCart = setTimeout(function() {
         window.location.href = "https://HOST/cart";
       }, 1500 * this.alese.length);

You might ask why I added those setTimeout functions. In my head it made sense that in case the call takes longer I am sure I will add all the products to the cart. The max I can add is two.

If let's say I select 5 products, when I get redirected to my cart I can only see 2 of them, sometime 3 (it is really really random)

Do you have any idea how can I add all the selected products to the same cart session?

Thanks in advance!

Answer 1

Ok so after inspecting the network tab this is the solution that works:

this.toBeAdded.forEach((item, i) => {
          let adder = new FormData();

          adder.append('attribute_alege-zona', Object.values(item.attributes)[0]);
          adder.append('attribute_tratament', Object.values(item.attributes)[1]);
          adder.append('quantity', 1);
          adder.append('product_id', item.variation_id);
          adder.append('variation_id', item.variation_id);

          console.log(adder);

          let me = this;

          let send = setTimeout(function() {
            axios({
              method: "post",
              url: "https://HOST/?wc-ajax=add_to_cart",
              data: adder,
              headers: { "Content-Type": "multipart/form-data" },
              withCredentials: true,
            })
            .then(function (response) {
                if(i == 0) {
                  document.cookie = document.cookie + " woocommerce_items_in_cart=1; path=/";
                }else if (i==me.toBeAdded.length-1){
                  window.location.href = "https://HOST/cart";
                }
            })
            .catch(function (response) {
              console.log(response);
            });
          }, i*500);
       });

Basically if it is the fist product I am adding the WC items in cart cookie. If it is the last product I redirect to cart.

Each call is delayed by i*500 , where i is the index of the array of products