In the last article "Creating JQuery Shopping Cart in Less Code and Time" we demonstrated that how easy is it to create the shopping cart drag and drop user interface using the power of the JQuery library. In this article we are going to extend our example and add quantity feature to the application. Along with the quantity feature we are also going to give some character to our product listing.

Recommended Reading:

Before reading this article we highly recommend that you check out the first part of the article in which we discussed in detail how to create drag and drop operations using JQuery library. You can check out the article here.

Giving Character to Our Products:

There are many different ways of making the product listing attractive but we went with using the images. We will be putting the books images on the products. Here is the GetProducts method updated to support the images.



The product listing now looks something like the following:




The products would still be draggable since we did not change any JavaScript code. Now, let's move to adjusting the quantity of the product when dropped in the shopping cart.

Managing Quantity of Products:

The next step is to manage the quantity of the products when dropped in the shopping cart. Previously when an item is dropped twice in the shopping cart then the shopping cart showed two items in it. This can quickly get out of control if the user tries to buy 10 of same items. We will solve this problem by adding a number to the right of the item in the shopping cart to represents the quantity of the items.

Let's first see how it will look like:




As, you can see in the image above the book "Beginning ASP.NET 3.5 in C# 2008" has 5 copies in the shopping cart while "Professional ASP.NET 3.5 in C# and VB" has only two copies. This way we are not duplicating the items inside the shopping cart.

The implemented idea revoles around checking for the same div id in the shopping cart. If the same id is found then the quantity is updated otherwise the item is added to the shopping cart. Let's check out some code:



The isItemPresentInShoppingCart is responsible for letting us know that the item is already in the shopping cart.



And here is the updateQuantity function:



If you notice in the updateQuantity function the start of the quantity is always "2". This is because we don't want to show "1" as the quantity because when the item is in shopping cart it represents a quantity of "1". The same knowledge is used when deleting the item from the shopping cart which means we will not show a quantity of "1". When the item has quantity of "1" then we will simply show the item itself.

Removing the Item from the Shopping Cart:

To remove an item from the shopping cart we need to change the remove function we cannot remove all the same items when the user has specified the quantity to be more than "1".

The remove onclick function looks something like this:



The function itemAddedMoreThanOneTime is responsible for letting us know that if the same item is added more time in the shopping cart. In other words this tells us that if the quantity of item added is more than "1".



You can click on this link below to view a live animation of the effect.

Animation

Conclusion:

In the above article we discussed some new features that we added to the JQuery Drag and Drop shopping cart. We highly recommend that you check out the first part of the article and also download the source code and play with it. In the future articles we are going to show how you can easily persist the shopping cart information into the database.

[Download Sample]