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

【问题标题】：Adding multiple products to WooCommerce Cart - AJAX将多个产品添加到 WooCommerce 购物车 - AJAX
【发布时间】：2022-01-19 17:47:28
【问题描述】：

我正在尝试找到一种从 WooCommerce 网站内的 Vue 前端选择多个项目变体的方法。

我安装了 WC Ajax Cart 插件，以便拥有可以使用 AXIOS 调用的某种端点。

我选择广告的每个选项，我都会选择一个名为selectedProducts的数组

当用户按下checkout 时，我所做的是：

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

你可能会问我为什么要添加那些setTimeout 函数。在我看来，如果通话时间更长，我确信我会将所有产品添加到购物车中，这是有道理的。我最多可以添加两个。

假设我选择了 5 个产品，当我被重定向到我的购物车时，我只能看到其中 2 个，有时是 3 个（真的很随机）

您知道如何将所有选定的产品添加到同一个购物车会话中吗？

提前致谢！

【问题讨论】：

标签： javascript wordpress vue.js woocommerce

【解决方案1】：

好的，在检查网络选项卡后，这是可行的解决方案：

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

基本上，如果它是第一个产品，我会在购物车 cookie 中添加 WC 项目。如果这是我重定向到购物车的最后一个产品。

每次调用都会延迟i*500，其中i 是产品数组的索引

【讨论】：