When you say creating a cart, what first comes to your mind?

It’s like a basket where customers can store their favorite goods either to purchase them all at once or to easily locate them at a later time.

Now in this article, I’m going to show you how to build a cart for your e-commerce store using JavaScript. But first, let me explain the algorithm behind it.

  • The customer, on launching the site is directed to a page where he can view all the different categories your store has to offer.
  • He selects her favorite item and clicks on the cart button for the item to be stored.
  • The number of the item and it’s primary key value in the database is first stored in a multi-dimensional array with JavaScript.
  • The multi-dimensional array is then converted into JSON format so it can be stored as a string.
  • The JSON array is then stored in the browser using the localstorage API.

I know I’ve mentioned alot of big words in that previous paragraph, but don’t worry I’m going to explain them briefly soon.

Here’s a review of an e-commerce site with this cart

Lets start with the launching of the site, the customer See’s his favorite Gucci bag and decides to save it in his cart till he’s gets his income by the end of the month. Our program can solve this quicky like this

Step 1.

The add to cart button.

Now this is a button which should be put together with the description of every product. So it’ll easily be accessible by the customer. Each button must contain a value which is usually the primary key of the product in the database.

<button value="gucci_bag1"
onclick=
"tocart(this.value)">

Fresh Gucci bag

</button>

As we can see in the above code, the Gucci bags primary key is “gucci_bag1” and it’s name is “fresh Gucci bag“.

Now what happens after the cart button is clicked? Let’s head there now shall we.

Step 2.

Adding the primary key to your array (cart).

Now we’ll create an empty array with JavaScript named cart, where we’ll store the values of each item.

<script>
Var cart=[];

Now we have to create the function named tocart() to add our items to the array.

function tocart(val){

//the name of the item and the amount to be added to the cart. Default is 1.

Var item=[val,'1'];

//Add this new array as the last value of the cart array. In this case it'll also be the first value.


cart.push(item);

}

Now you’ve just created a multi-dimensional array at this point(an array within a larger array). Here’s how the resulting array will now look like.

Cart=[['gucci_bag1','1']];

If I decided to add another item to the array, let’s say it’s primary key is pink_shoe, the resulting array will become this

Cart=
[
['gucci_bag1','1'],
['pink_shoe','1']
];

Now here it is, two arrays as an element of one bigger array,

Step 3.

Converting the cart array into a JSON string.

What is JSON?

JSON means JavaScript Object Notation. It is a format for storing complex datatypes in JavaScript like objects and arrays.

Why do we need to convert our array into a JSON string?

The reason is that we cannot store arrays and objects in the browsers local storage, it only allows for strings to be stored therefore well have to convert the entire array to a string.

Don’t worry about that, JavaScript brought out a solution already with the JSON.stringify() function. With this, the whole array has been converted into a string without you doing much work. Now it’s time to store it permanently.

Var cartstr=
JSON.stringify(cart);

Storing your cart using the web storage API.

Now we’ll have to store the cart permanently with our webstorage.

There are actually two different web storage which the browser offers, the local storage and the session storage.

They both store large amount of data on the browser, the difference is that the local storage stores permanently till the user deletes it from his browser, while the session storages deletes automatically once the browser is closed. We’re going to be using local storage for this tutorial.

localStorage.setItem
("cart",cartstr);
</script>

The first parameter “cart” is called the key, which is more like the variable name for accessing the stored data, the second parameter is the actual value to be stored. In this case it is our array in string format.

There you have it, we’ve successfully stored our data in the cart, now how do we retrieve this data?

Bonus.

Still by using our local storage but this time, we use the getItem() method instead of setItem().

var cartstr=
localStorage.getItem
("cart");

Now that you’ve retrieved the array, remember it’s still in string format, we’ll have to convert it back to a full array with the JSON.parse() function.

var cart=
JSON.parse(cartstr);

Now that our cart is back in array format, you can use your for loop to loop over it’s items and display them anyhow you wish.

for(i=0; i<cart.length; i++)
{
document.getElementById
("section").innerHTML=
cart[i][0];
}

This loop above displays all the items stored in the cart on your screen.

Now here you have it, a complete cart system with JavaScript, feel free to add this to your e-commerce store and increase it’s functionality. Here’s an example of an e-commerce store with this kind of cart. Feel free to play as you like.

Also see Building your e commerce cart 2 for the complete of this article.

Hope this article was worth reading, you can do well by suscribing to our social media channels.

Your favorite web developers.


vic okeke

I'm just a web developer hoping to help out junior developers in algorithms for their projects.

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *