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.
- 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 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.
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
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.
Fresh Gucci bag
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.
Adding the primary key to your array (cart).
Now we have to create the function named tocart() to add our items to the array.
//the name of the item and the amount to be added to the cart. Default is 1.
//Add this new array as the last value of the cart array. In this case it'll also be the first value.
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.
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
Now here it is, two arrays as an element of one bigger array,
Converting the cart array into a JSON string.
What is JSON?
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.
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.
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?
Still by using our local storage but this time, we use the getItem() method instead of setItem().
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.
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++)
This loop above displays all the items stored in the cart on your screen.
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.