Every once in a while we’ll have a customer come to us who is looking for something that we’ve done on other carts before, but hadn’t ever experimented with on BigCommerce. Specialty Food Center brought us one of those requests.
The Request: Adding items to the cart, from the cart on BigCommerce
Specialty Food Center sells prepared and raw gourmet foods all over the United States. One issue they often run into though is that most meat based products require next day shipping in dry ice. This adds significantly to the shipping cost and while some of that can be absorbed by the price of the item, they wanted some way to signify to the customer that this was a perishable item and required a special shipping container and it’s associated cost.
Our first thought was product options. Why not just add a product option to each of the products that require a perishable shipping container set it to increase the price by x and make it required? This is where we found the catch. If the customer orders a few meat products, and each product is from a different manufacturer, the product option method would work fine. However if the customer orders multiple meat products from the same vendor, all of the products can ship in a single perishable shipping container, thereby cutting the cost for the customer.
So the goal here was to look at the cart, identify which items (if any) are perishable and then add a single perishable shipping container per manufacturer.
The Solution: A combination of BigCommerce settings and JavaScript
The first thing we did was set up the products on BigCommerce. We needed to create product options that were required that had some identifying text for each of the manufacturers. What we ended up going with was something along the lines of “Perishable | Manufacturer Name.” This carries over to the cart, allowing us to access it on page using JavaScript.
We then created a product called ‘Perishable Shipping Container’ that had nothing but an image, the title and a price assigned. We then hid that from the storefront so that people couldn’t just purchase the container by itself.
The rest was just JavaScript. We created a small app that ran once the cart loaded that iterated through each of the products in the cart, and added up the unique manufacturers listed. Once it has a list of unique manufacturers, the script adds that number of perishable shipping containers to the cart. Finally, the script watches for people trying to remove the perishable container from the cart, and stops them from doing so. It will automatically correct the quantity of the perishable shipping container to match the quantity of manufacturers on the cart.
This is just one of many examples of times when we’ve used a combination of BigCommerce settings and JavaScript to provide high level customizations without using the BigCommerce API, which often raises the price considerably.
Looking for a BigCommerce customization for your store? Contact IntuitSolutions today for more information on anything from basic customizations to API work!
