Shopify Question posted in
The Shopify help center can be found here.

How to Add Multiple Products to Shopify Cart with One Button Click

Here is the button’s code:

    {% 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 %}

The code grabs the item by the ID and makes an AJAX request.

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

inside of cart function:

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

I know this is possible with the AJAX API update last year. But I’m unsure how to implement it in my store. The data-variant-id only accepts one value if I’m not mistaken. And what’s data-variant-id comes first gets precedence. I guess the main thing is that I’m unsure how to send json with the submit button.

Any ideas?

Tags:

2

Answers


  1. 0

    I think you need to check and default Shopify documentation and make changes to the code according to the documentation.
    Here into documentation they clearly mentioned how you can add multiple product using AJAX API.

    https://shopify.dev/docs/themes/ajax-api/reference/cart
    enter image description here

    So you can check and update the code and past the multiple variants to items array like this demo code.

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

    In a classic add product form, you can replace:
    <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" disabled> with:

    <input type="hidden" name="items[0][quantity]" value="1">
<input type="hidden" name="items[0][id]" value="ID_OF_YOUR_FIRST_PRODUCT_VARIANT">
<input type="hidden" name="items[1][quantity]" value="1">
<input type="hidden" name="items[1][id]" value="ID_OF_YOUR_SECOND_PRODUCT_VARIANT">

    If you want to add the products in ajax, you just have to use the "FormData" object in the body of the request:

    let addToCartForm = document.querySelector('form[action$="/cart/add"]');
let formData = new FormData(addToCartForm);
fetch(window.Shopify.routes.root + 'cart/add.js', {
  method: 'POST',
  body: formData
})
.then(response => {
  return response.json();
})
.catch((error) => {
  console.error('Error:', error);
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search