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.
Related Reading:
HubL Pro Tips for Advanced HubSpot Templating
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.
Multiple synchronous ajax requests to the BigCommerce cart url’s with different product_id parameters
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:
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…
Set the Basket Array Before Adding it all to the Cart…
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.
Join the Discussion