Drag and Drop functionality serves as the main eye candy for many shopping cart applications. The shopper simply drags the item he/she is interested in the shopping cart and the shopping cart updates the total for his selected items. In this article we are going to demonstrate how easy is it to create a shopping cart user interface by using JQuery library. This complete interface was designed in 1 hour.
Introduction:
Drag and Drop functionality serves as the main eye candy for many shopping cart applications. The shopper simply drags the item he/she is interested in the shopping cart and the shopping cart updates the total for his selected items. In this article we are going to demonstrate how easy is it to create a shopping cart user interface by using JQuery library. This complete interface was designed in 1 hour.
What are we going to learn in this article?
This article will focus on creating the user interface for the drag and drop scenario. This will include the list of products which will be dropped in the shopping basket. The article does not use a database at the backend to hold the items in the shopping cart but we will show the relevant code to access the items contained in the shopping cart.
Creating the Product Entity:
Let's first create the Product entity which will be responsible for holding the data releted to the product.
The product class above looks pretty simple. The property Code is used to distinguish one product from the other.
Let's try to create some dummy products and then put them on the screen.
Populating the Products:
Since, we are not using any database we will be populating the products by hand. Check out the GetProducts method below which is used to create some dummy products.
The BindData method below populates the DataList control with the products.
Creating the DataList Control:
Let's see how to create a DataList control and populate the products into it.
The DataList control contains a Div element which contains the product. For each item a new Div item is created. The important point to notice about Div element is the use of custom attributes "price", "code" and "id". The price denotes the price of the product. The code denotes the code for the product and the id is created dynamically using the Container.ItemIndex sequential count. This will ensure that each Div has a separate id.
When you run the above code you will see the following result.
NOTE: We are applying few styles on the Div element. The name of the style is "productItemStyle". You can download the complete code at the end of this article and check out the styles.
Making Products Div Draggable:
The next step is to make Div draggable. This can be easily accomplished by using JQuery. But first you need to download a couple of JavaScript files.
1) Download JQuery latest .js file from www.jquery.com
2) Download JQuery UI .js file. You can personalize the download yourself. Just select all checkboxes when personalizing your download and it will download all the features for the JQuery UI helpers.
Next, add a reference to your JQuery files as shown below:
NOTE: Both the .JS files are available in the download.
Let's make our products DIV draggable.
We are making our element draggable inside the document.ready function. This is to ensure that the document has been loaded successfully and the DOM tree is now ready. We are referencing the product div by its class name which is "productItemStyle". The draggable function makes an item draggable. The draggable function also takes in helper which is used to clone the element and opacity which is used to indicate that the dragged item opacity is less then the original item opacity.
After writing the above code your product div elements will automatically become draggable. Now, you can also say "Look Ma only one line of code!!".
Creating DropZone:
We got our draggable item working now let's focus on the dropZones. DropZones are areas in which you will drop your draggable item. In this demo we will be using a single drop zone which will serves as a shopping basket.
The drop zone is nothing more than a div element which is changed into droppable using the magic of JQuery library.
At minimum the dropZone code will look something like above. The accept parameter indicates that it will accept an element whose class is "".productItemStyle". The hoverClass represents the class which will be displayed when the dragged item is in focus with the dropZone. The drop function will be fired whenever the draggedItem is dropped into the dropZone.
Let's implement the drop function.
Implementation of the Drop Function:
Basically, the drop function is where all the magic happens. The purpose of the drop function is to add the droppedItem to the shopping cart, add a remove link to the dropped item and update the shopping cart whenever an item is added or removed.
Remember earlier we set the code, price and id as attached properties to the Div element. Now, we can access those properties using the code below:
The updateTotal is responsible for updating the running total of the shopping cart.
The line $(".shoppingCartTotal").effect("bounce"); is used to create a bouncy effect whenever the total is updated.
Selecting the Items from the Shopping Cart:
Since, we are not writing the selected items to the database. We thought it would be wise to give some code on how to access the items contained inside the shopping cart.
The above code will alert out the code, price of the items inside the shopping cart. You can also alert out the "id" of the div in the same fashion.
Finally, check out the animation of the complete shopping cart below:
Conclusion:
Shopping carts user interface design is always a trivial task but now using the power of JQuery we can easily create an attractive UI in a matter of hours. We will be building this example further in the future and adding more attractive features to the shopping cart.
[Download Sample]
