Shopify 购物车 AJAX 请求返回不一致 [英] Shopify Cart AJAX Request Returning Inconsistently

问题描述

我正在尝试一键将 2 件商品发布到购物车.我已经构建了一个带有隐藏复选框的表单，其中包含我需要这样做的相关产品属性.我有一个循环遍历表单的子复选框以提取该信息并调用发布请求的函数.

I am attempting to post 2 items to a shopping cart, in one click. I've built a form with hidden checkboxes that carry the relevant product attributes I need to do that. I have a loop going over the form's child checkboxes to pull that info and invoke the function for the post request.

问题是有时它确实添加了两个项目(是的！)但有时它只会加载第一个项目，有时只会加载第二个项目.控制台中没有错误代码可供我关闭，所以我想知道我错过了什么.

The problem is that sometimes it does add both items (yay!) but sometimes it'll load only the first item and sometimes only the second item. There's no error code in the console for me to go off of so I'm wondering what I'm missing.

19 小时后.我认为问题来自打开购物车的功能，该功能在返回第一件商品时触发.两个调用都成功返回，但该代码会中断将其添加到购物车中.

19 hours in. I'm thinking the issue is coming from the function that opens the cart that is firing when the first item is returned. Both of the calls are being return successfully but that code is interrupting it being added to the cart.

编辑 2:这篇文章 描述了我遇到的问题.我需要提出一个请求，然后再进行下一个请求.我想我将不得不使用表单中的项目构建一个数组.

EDIT 2: This post describes the issue I'm having. I need to make one request and then move on to the next one. I think I'm going to have to build an array with the items from the form.

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

向购物车发出发布请求的 itemAdd 函数:

The itemAdd function that makes the post request to the cart:

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() : '';
                }
            });
        }
    });
}

推荐答案

最终将两个项目作为对象放入一个数组中，并将它们一起发送到 Shopify AJAX api.似乎有效，在函数末尾用滑出推车敲出几个小错误.

Ended up putting both items as objects into an array and sending them to the Shopify AJAX api together. Seems to work, a couple little bugs to hammer out with the slide out cart at the end of the function.

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 请求返回不一致的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！