如何通过一键单击将多个产品添加到 Shopify 购物车

Question

这是按钮的代码：

    {% assign p_annual = all_products[section.settings.paid_product_annual] %}
    {% assign p_free = all_products[section.settings.free_product] %}

        {% if section.settings.productlink1label != blank %}
            <button class="btn"
                 type="submit" 
                 name="paid-plan" 
                 id="paid-plan-option-annual" 
                 data-variant-id="{{ p_annual.selected_or_first_available_variant.metafields.subscriptions.discount_variant_id }}" 
                 data-variant-interval-value="{{ p_annual.metafields.subscriptions.shipping_interval_frequency }}" 
                 data-variant-interval-unit="{{ p_annual.metafields.subscriptions.shipping_interval_unit_type }}"
                 data-quickadd-id="{{ p_annual.selected_or_first_available_variant.id }}"
                 data-quickadd-properties
             >
                        {{ p_annual.selected_or_first_available_variant.price | money_without_trailing_zeros }}{{ section.settings.productlink1label }}
             </button>
        {% endif %}

代码通过 ID 获取项目并发出 AJAX 请求。

// quick add
    _document.on('click', '[data-quickadd-id]', function() {
        let _this = $(this);

        loadingBarTrigger('start');

        itemAdd(
            _this.attr('data-quickadd-id'), 
            _this.attr('data-quickadd-properties'), 
            (_this.attr('data-quickadd-quantity'))
                ? _this.attr('data-quickadd-quantity')
                : 1, 
            (!html.is('#cart')) ? true : false,
            (html.is('#cart')) ? true : false
        );
    });

购物车功能内部：

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

我知道这可以通过去年的 AJAX API 更新来实现。但我不确定如何在我的商店中实施它。如果我没记错的话，data-variant-id 只接受一个值。什么是 data-variant-id 优先。我想主要是我不确定如何使用提交按钮发送 json。

有什么想法吗？

Answer 1

我认为您需要检查并默认 Shopify 文档，并根据文档对代码进行更改。 在文档中，他们清楚地提到了如何使用 AJAX API 添加多个产品。

https://shopify.dev/docs/themes/ajax-api/reference/cart

因此，您可以检查和更新代码，并将多个变体传递到项目数组，如此演示代码。

jQuery.post('/cart/add.js', {
  items: [
    {
      quantity: quantity,
      id: 1st ID
    },
    {
      quantity: quantity,
      id: 2nd ID
    },
    {
      quantity: quantity,
      id: 3rd ID
    }
  ]
});