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!
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