Shopify 購物車 AJAX 請求返回不一致

Question

我正在嘗試一鍵將 2 件商品發布到購物車。 我已經建立了一個帶有隱藏復選框的表單，這些復選框帶有我需要這樣做的相關產品屬性。 我有一個循環遍歷表單的子復選框以提取該信息並為發布請求調用該函數。

問題是有時它確實添加了兩個項目（耶！）但有時它只會加載第一個項目，有時只加載第二個項目。 控制台中沒有錯誤代碼可供我關閉，所以我想知道我錯過了什么。

編輯：19 小時后。我認為問題出在打開購物車的功能，該購物車在返回第一個項目時觸發。 兩個調用都成功返回，但該代碼正在中斷它被添加到購物車。

編輯2： 這篇文章描述了我遇到的問題。 我需要提出一個請求，然后繼續下一個請求。 我想我將不得不用表單中的項目構建一個數組。

我的JS

const freeAddOnForm = document.getElementById('free-addon-form'),
      freeAddOnButton = freeAddOnForm[2];

function getDataForm(e) {
    e.preventDefault();

    loadingBarTrigger('start');

    for(let i = 0; i < 2; i++) {
        itemAdd(
            freeAddOnForm[i].getAttribute('data-quickadd-id'), 
            freeAddOnForm[i].getAttribute('data-quickadd-properties'), 
            (freeAddOnForm[i].getAttribute('data-quickadd-quantity'))
                ? freeAddOnForm[i].getAttribute('data-quickadd-quantity')
                : 1, 
            (!html.is('#cart')) ? true : false,
            (html.is('#cart')) ? true : false
        )
    }   
}

document.addEventListener('DOMContentLoaded', function (){
    freeAddOnButton.addEventListener('click', getDataForm, false);
})

向購物車發出 post 請求的 itemAdd 函數：

const itemAdd = (variantId, properties, qty, openCart, reloadPage) => {
    $.ajax({
        type: 'POST',
        dataType: 'html',
        url: `/cart/add.js`,
        data: 
            {
                id: variantId,
                quantity: qty,
                properties: (properties) 
                    ? JSON.parse(properties) : null
            },
        error: function(data) {
            console.error(data);

            loadingBarTrigger('done');
        },
        success: function() {
            loadingBarTrigger('move');

            $.ajax({
                url: '/cart',
                dataType: 'html',
                error: function(data) {
                console.error(data);

                loadingBarTrigger('done');
            },
                success: function(data) {
                    let minicartContent = $('#minicart-content');
                    let cartItemsHtml = $(data).find('#cart-content #cart-items').html();

                    // insert or prepend cart HTML
                    (minicartContent.find('#cart-items').length)
                        ? minicartContent.find('#cart-items').html(cartItemsHtml)
                        : minicartContent.prepend(cartItemsHtml);

                    // remove giftbox content if exists
                    (minicartContent.find('#cart-giftbox .item-info').length)
                        ? minicartContent.find('#cart-giftbox .item-info').remove()
                        : '';

                    loadingBarTrigger('done');
                    cartTotalUpdate();

                    // open cart
                    (openCart && !html.is('#cart'))
                        ? minicartTrigger.trigger('click') : '';

                    (reloadPage)
                        ? location.reload() : '';
                }
            });
        }
    });
}

Answer 1

最后將這兩個項目作為對象放入一個數組中，並將它們一起發送到 Shopify AJAX api。 似乎可行，在功能結束時用滑出推車敲出幾個小錯誤。

const itemsAddAjax = (itemsQueue, openCart, reloadPage) => {
        console.log(itemsQueue)

        $.post(`/cart/add.js`, {
            items: [
                {
                quantity: itemsQueue[0].qty,
                id: itemsQueue[0].id,
                properties: (itemsQueue[0].properties) 
                    ? JSON.parse(itemsQueue[0].properties) : null
                },
                {
                quantity: itemsQueue[1].qty,
                id: itemsQueue[1].id,
                properties: (itemsQueue[1].properties) 
                    ? JSON.parse(itemsQueue[1].properties) : null
                }
            ],
            
            error: function(items) {
                // console.error(items);

                loadingBarTrigger('done');
            },
            success: function() {
                loadingBarTrigger('move');
              

                $.ajax({
                    url: '/cart',
                    dataType: 'html',
                    error: function(items) {
                        console.error(items[0]);
                        loadingBarTrigger('done');
                    },
                    success: function(items) {

Answer 2

我認為簡單的方法是使用以下代碼並在“項目”數組中添加項目數量及其各自的數據。

let formData = {
 'items': [{
  'id': 36110175633573,
  'quantity': 2
  },
{
  'id': 36110175623388,
  'quantity': 1
  }
]
};

fetch(window.Shopify.routes.root + 'cart/add.js', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(formData)
})
.then(response => {
  return response.json();
})
.catch((error) => {
  console.error('Error:', error);
});