Developing goCart.js - a complete Ajax cart solution for Shopify
DateOct 23, 2019
As we developed more and more advanced e-commerce solutions based on the Shopify platform, we noticed a very strong demand for Ajax carts on almost every project. So we built one!
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.
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 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 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
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:
- It was written in vanilla JS – following the ES6 specification
- It can be used as an ES6 module – which we highly recommend
- For all the basic styling, we used SCSS
- All template files are written in Shopify’s liquid template language
Feel free to contribute