13 / August 2O19

Adding Multiple Items to the Cart in Big Commerce

Adding Multiple Items to the Cart in Big Commerce

How to programmatically add multiple items to a Bigcommerce shopping cart via AJAX on a single event.

When working with e-commerce platforms like Bigcommerce, you’ll often need to change or add functionality specific to your needs. Sometimes there is straight-forward documentation to take you step-by-step…and other times the solution is not so apparent.

Recently, we needed a way to add multiple items to the BigCommerce cart on a single event ‚Äď in this case a button click. A quick google search turned up this Bigcommerce forum post from 2011, which pointed us in the right direction.

man entering html code on a laptop

A Good Start

Our solution is essentially to make multiple synchronous ajax requests to the BigCommerce cart url’s with different product_id parameters, then forward them on to the cart. Using jQuery, this can be accomplished by setting async: false in a standard ajax call.

Doing this synchronously is less than ideal ‚Äď it‚Äôs slow (your page/browser will become temporarily unresponsive), but in this case it accomplished our clients specific need. More about sync & async ajax.

Note: This technique will only work from the same domain as your Bigcommerce store.

Here’s the most important parts of the code we used to do this:

//an array of product id's (more on this later)
var basket = [55, 72, 29, 33, 81],

cartUrl = 'https://yourstore.com/cart.php',

//bind this to our event    
addToCart = function() {
  if (basket.length) {
    for (var i=0; i < basket.length; i++) {
      $.ajax({
        type: 'GET',
        async: false,
        url: cartUrl+'?action=add&product_id='+basket[i]+'&fastcart=1&ajaxsubmit=1',
        success: function(data) {
          //parse bigcommerce html reponse
          var obj = JSON.parse($(data).html());
          //success property = true if item was added successfully
          if (obj.success) {
          } else {
            //do something to show items were not successfully added to cart
          }
        }
      });
    }
  }
  window.location.replace(cartUrl);
}; 

$('#add-to-cart-button').click(addToCart);

javascript

man looking at an ecommerce store

Customizing to Your BigCommerce Cart Needs

The example above will work for simple use cases where multiple products and their product_id‚Äôs are known before hand. This would be useful for creating one (or multiple) ‚Äúproduct bundle‚ÄĚ buttons. If you want multiple buttons on the same page, the basket array can be stored as a data attribute on your button.

Setup Your Button…

<button class="bundle-button" data-products="[10,8,14,19]">Add Bundle to Cart</button>

html

Set the Basket Array Before Adding it all to the Cart…

//basket &amp; addToCart defined previously
$('.bundle-button').click(function() {
  basket = $(this).data('products');
  addToCart();
});

javascript

colin mcgraw staring at an imac screen

Going All Out

You may find that you need the list of product_id‚Äôs to be put together on the fly, allowing for a customer to pick their ‚Äúbundled items‚ÄĚ from a larger group of products. The technique can also be applied to this use-case, and would involve you tracking (adding and removing items to) to the basket array as a customer selects or de-selects products.

You can see how this approach can prove useful to a variety of situations when looking to add multiple items to the cart in BigCommerce. Hopefully it helps you get around some of the intricacies of your Bigcommerce shopping cart setup. If you’ve run into this scenario or something similar, let us know your approach to the solution in the comments.