In the previous article, I explained How to build a cart for your e-commerce store. We were also able to add items to that cart.

Now we’re going to discuss how to delete items from the cart and also, increasing the quantity of a product already in the cart.

Deleting from the cart.

To remove an item or product from the cart is not as difficult as it looks. It’s as simple as slicing an item from the array. Let’s leave the theory and go into the code shall we?

We’re going to use the same array from our previous article How to build a cart for your e-commerce store.

Var cart=[
['guccibag1','1'],
['pinkshoe','1']
];

Now there is our cart written as a multi dimensional array (an array within an array). each of the first item in the inner arrays represents the name of the item and the second represents the quantity of that product.

Let’s begin our steps to delete.

Step 1.

We output all the items in our array in html format.

//we'll output these 
items in a div called "cartsection"

Var cartsection=
document.getElementById("cartsection");
for(var i=0;i<cart.length;i++){

cartsection.innerHTML=
"<div class='item'>"+
cart[i][0]+
"<span>"+cart[i][1]+
"<br>
<button value="+i+"
onclick=
'rem("+this.value+")'>
remove</button>
</div></div><br>";

}
//cart[i][0] outputs the item name while cart[i][1] outputs the quantity.

Step 2.

Now let’s create a rem function to remove or delete the items.

<script>
function rem(index){

cart.slice(index,1);


}
//the index represents it's position on the array. The slice method is used in removing items an array, the first parameter
(Index) tells the browser where to removing from.
And the second tells it
how many items to delete.

cartarr=
JSON.stringify(cart);

localStorage.setItem
('cart',cartarr);

//save the new cart in our browser storage.
</script>

now with the code above your delete button should be working just fine, now lets go on with increasing and reducing the quantity of products.

before we begin, we’re going to be modifying the display on the cartsection to show both increase button (+) and reduce button (-).

So we add this to the code after the delete button.

<button
value=i onclick=
'inc("+this.value+")'>
+
</button>

//The increase button.

<button
value="+i+" onclick=
'red("+this.value+")'>
-
</button>

//the reduce button.

Now let’s create the function for it.

<script>
function inc(index){

cart[index][1]++;

cartarr=
JSON.stringify(cart);

localStorage.setItem
("cart",cartarr);


}


function red(index){

cart[index][1]--;

cartarr=
JSON.stringify(cart);

localStorage.setItem
("cart",cartarr);

}
</script>

Now we’ve completed our cart which includes the basic functions like increase quantity, reduce quantity, remove item and also add item. Feel free to play with the code and include your own CSS code or even bootstrap to improve the user interface and also beautify this cart. We didn’t want to add it here to make our code more readable.

Hope you enjoyed this tutorial, you can leave a feedback on the comment section, let us know what you think and more ways to improve our tutorials, We’ll value your words. Also remember to follow our social media handles to keep updated

You can also reach is via email at

hello@charmingdesk.com.ng

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 *