Developing goCart.js - a complete Ajax cart solution for Shopify

By using Shopify Ajax API, users can add items to the cart, update quantities and fetch information about the cart – all without refreshing the page. This leads to a much better buying experience faster and boosts conversion. This new goCart.js plugin we created for Shopify is fully focused on that functionality, and it also comes with an added benefit of  being written in vanilla JS.

So, let’s talk some more about it.

Why we developed goCart.js

The first time we needed to implement an Ajax cart, we started by searching for a plugin that covers all of the cases and all of the requirements we needed. If we went with Shopify apps, we’d have to let go of the control over a plugin, which was not an option for us. In addition to that, almost every Shopify app has a monthly subscription (that’s not a bad thing – developers should be paid for their work), but we needed something that we could easily extend and reuse on any project we worked on.

After we couldn’t find what we needed among Shopify apps, we began searching for an open source solution we could implement within our JavaScript boilerplate and standards. Once again, we just could not find the right solution we needed, only some tutorials on how to use the Ajax API (which were very helpful) or offers from developers who were willing to develop it for us (for a fee, of course).

Since we love open source projects at Bornfight, we decided to develop an open source library that covers all of the cases and is free for everyone to use. That’s how goCart.js came to life, and that’s why you are reading this blog post!

Main features of goCart.js

Here are some of the main features and options we integrated into our library – we believe the features we listed below are a must-have for a library like this one. If you’re interested in seeing all of the features, you can find them in the library’s Github page.

Cart drawer

Cart drawer is the most popular type of Ajax carts you can see in the wild today. It’s not in the visible area – it comes from the left or the right side of the screen when you need it.

Mini cart

Mini cart is the type of cart that “flies” under the cart button. Together with the cart drawer, it’s a very popular way of displaying the contents of your cart, so we integrated it as an option that can be changed on the fly.

Success modal option when product was added to cart with CTA buttons to continue shopping

We also included an option to open a modal displaying which product was added to the cart – if you don’t want the cart to be opened right after a user adds a product to it. This modal includes CTA buttons to continue shopping or to go to cart.

Error modal when Ajax request fails

If something goes wrong with the Ajax request, modal will open to let your customers know that something is not right.

Written in vanilla JS

The entire library is written in modern vanilla JavaScript, which means it has no dependency on jQuery to handle requests or anything related to DOM manipulation. We’ll talk more about technology in the next chapter.

goCart.js is barebones

This library also comes with minimal styles – only the ones needed to actually show the elements. We intentionally did it like this, so developers can integrate it with any design. So yeah, please extend it as you wish!

How we developed goCart.js

This blog is not really about putting a bunch of code, we prepared full documentation that focuses on that, and you can find it on the library’s Github page.

But, since we are talking about technology, here are the things you should know:

1. It was written in vanilla JS – following the ES6 specification
2. It can be used as an ES6 module – which we highly recommend
3. For all the basic styling, we used SCSS
4. All template files are written in Shopify’s liquid template language
5. The library was built around the “js-library-boilerplate” from Francisco Hodge – this is a fantastic JavaScript library boilerplate that comes with all the modern tools needed to develop a modern NPM module (we highly recommend that if you don’t have the time to develop your own)

Feel free to contribute

As big fans of open source, we invite everyone to try it out, or even better – to use it. Also, please feel free to contribute to the library to make it even better. Please note that this is not a Shopify app, but a JavaScript library made for developers to extend and use inside their systems, at least in this phase.