Shopify 购物车 AJAX 请求退货不一致

Question

我正在尝试 post 一次单击将 2 件商品添加到购物车。我构建了一个带有隐藏复选框的表单，其中包含我需要执行此操作的相关产品属性。我有一个循环遍历表单的子复选框以提取该信息并为 post 请求调用函数。

问题是有时它会同时添加两个项目（耶！）但有时它只会加载第一个项目，有时只会加载第二个项目。控制台中没有错误代码让我离开，所以我想知道我错过了什么。

编辑：19 小时后。我认为问题出在第一个项目 returned 时打开正在触发的购物车的功能。这两个调用都已成功 return，但该代码中断了将其添加到购物车的过程。

编辑 2：This post 描述了我遇到的问题。我需要提出一个请求，然后继续进行下一个请求。我想我将不得不用表单中的项目构建一个数组。

我的 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) {

Shopify 购物车 AJAX 请求退货不一致

Shopify Cart AJAX Request Returning Inconsistently

javascript

ajax

jquery

shopify