— How to create a Drag & Drop shopping cart widget
In this tutorial I’ll show how to create a shopping cart widgets. For this we are going to use jQuery core library and we also going to use jQuery’s UI library
and specifically the "draggable" and "droppable" modules. This will make it quite simple to add the drag-and-drop functionality that we want. You should get a personalized download of the UI library which has what we need in it. (Tick the draggable and droppable’s box)
JS libraries used in this tut
1) jQuery
2) jQuery UI
jQuery Plugins used in this tut
1) jCarousel
2) Reflection
The finished widget will work like a drag drop shopping cart. The following screenshot shows the widget that we’re aiming for:
HTML
Let´s create our HTML page, save it as shoppingWidget.html or any other name.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Shopping Cart Widget</title> </head> <body> <div id="left"> <ul class="jcarousel-skin-tango productsNav"> <li> <div class="desc"> <div class="price"> <strong>Price: </strong><span class="num">600</span> rs </div> <div class="info"> <strong>Desc: </strong><span class="details">Four Idiots</span> </div> </div> <img src="images/1.jpg" id="product_prod1" class="reflected"> </li> <li> <div class="desc"> <div class="price"> <strong>Price: </strong><span class="num">40</span> rs </div> <div class="info"> <strong>Desc: </strong><span class="details">Duracell Battery</span> </div> </div> <img src="images/2.jpg" id="product_prod2" class="reflected"></li> <li> <div class="desc"> <div class="price"> <strong>Price: </strong><span class="num">350</span> rs </div> <div class="info"> <strong>Desc: </strong><span class="details">Choki Dhani Ticket</span> </div> </div> <img src="images/3.jpg" id="product_prod3" class="reflected"> </li> <li> <div class="desc"> <div class="price"> <strong>Price: </strong><span class="num">950</span> rs </div> <div class="info"> <strong>Desc: </strong><span class="details">Tabla</span> </div> </div> <img src="images/4.jpg" id="product_prod4" class="reflected"> </li> </ul> <ul class="productsNav jcarousel-skin-tango"> <li> <div class="desc"> <div class="price"> <strong>Price: </strong><span class="num">1600</span> rs </div> <div class="info"> <strong>Desc: </strong><span class="details">Glares</span> </div> </div> <img src="images/6.jpg" id="product_prod6" class="reflected"> </li> <li> <div class="desc"> <div class="price"> <strong>Price: </strong><span class="num">40</span> rs </div> <div class="info"> <strong>Desc: </strong><span class="details">Antique</span> </div> </div> <img src="images/4.jpg" id="product_prod7" class="reflected"></li> <li> <div class="desc"> <div class="price"> <strong>Price: </strong><span class="num">350</span> rs </div> <div class="info"> <strong>Desc: </strong><span class="details">Priceless</span> </div> </div> <img src="images/2.jpg" id="product_prod8" class="reflected"> </li> <li> <div class="desc"> <div class="price"> <strong>Price: </strong><span class="num">950</span> rs </div> <div class="info"> <strong>Desc: </strong><span class="details">Suggest Some</span> </div> </div> <img src="images/9.jpg" id="product_prod9" class="reflected"> </li> </ul> </div> <div id="right"> <div id="drag"> <div id="dropOnMe" class="notActiveCart"> </div> </div> <div id="total"> <strong>Your Total</strong> - <span id="showTotal">0</span>Rs </div> </div> </body> </html>
As you can see that there are only two <ul> of class ‘productsNav’, like that we can have n number of product scrollers only we have to give is a class of name ‘productsNav’.
Our widget consists of a series of nested containers and images wrapped in it. The images placed within the containers are hardcoded into the page for accessibility reasons. We won´t be retrieving the images dynamically. Any images placed in the widget will automatically be Dragged and Dropped on the cart.
<li> <div class="desc"> <div class="price"> <strong>Price: </strong><span class="num">600</span> rs </div> <div class="info"> <strong>Desc: </strong><span class="details">Four Idiots</span> </div> </div> <img src="images/1.jpg" id="product_prod1" class="reflected"> </li>
In the above code we have a “div” of class “desc” which will be responsible of showing price and description of product in a “slideDown” and “slideUp” effect from jQuery. All product images have “product_” as a prefix to their “id”. So suppose if you have an entry in your database of you product of id “345″ then image’s id should be “product_345″.
CSS and JS
Till now we have created only our html lets include some CSS and JS in action.
<!--Main Site CSS--> <link href="css/main.css" type="text/css" rel="stylesheet"> <!--end--> <!--jCarousel CSS--> <link href="css/jquery.jcarousel.css" type="text/css" rel="stylesheet"> <!--jCarousel Skin CSS--> <link href="css/tango/skin.css" type="text/css" rel="stylesheet"> <!--end--> <!--jQuery--> <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <!--jQuery UI--> <script src="js/jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script> <!--jCarousel--> <script src="js/jquery.jcarousel.pack.js" type="text/javascript"></script> <!--reflection--> <script src="js/reflection.js" type="text/javascript"></script> <!--Main Js--> <script src="js/main.js" type="text/javascript"></script>
jQuery in action
Now as we have included all the CSS and JS needed for this widget lets the jQuery magic begins.
//Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded.
$(document).ready(function() {
//all jQuery goodness here
});
Let´s give our “ul”s a Carousel effect by adding the following line of code:
$('.productsNav').jcarousel();
That´s enough to give our two “ul” of class name “productsNav” a carousel effect, you can have any number of “ul”s but dont forget to give it “productNav” class
Here’s a preview of what we’ve got so far
It looks very similar to final product but still alot have to be done to make it work as a drag and drop widget.
Let’s apply a hover effect on the product images so that we can see some info regarding the respective product
$('.productsNav').jcarousel();
$('.productsNav li').hover(
function(){
$('.desc', this).slideDown()
},
function(){
$('.desc', this).slideUp()
}
)
The above code will apply a nice hover “slideDown” and “slideUp” effect. Now let´s bring the “draggable” and “droppable” of jquery UI in action
$('.productsNav').jcarousel();
$('.productsNav li').hover(
function(){
$('.desc', this).slideDown()
},
function(){
$('.desc', this).slideUp()
}
)
var addProductToCart = function(){};
$('.reflected').draggable({
revert:'invalid',
helper:clone',
opacity:0.4,
appendTo:'body',
zIndex:9999});
$('#dropOnMe').droppable({
accept:'.reflected',
activeClass:'activeClassCart',
drop:addProductToCart
});
Dragging and Dropping magic has been applied on the product images, but dropping will do nothing untill and unless we write some thing in the function “addProductToCart” to handle the dropped element. you can see dragging of product in the following image.
Let´s write a function to handle the dropped element and total price.
$('.productsNav').jcarousel();
$('.productsNav li').hover(
function(){
$('.desc', this).slideDown()
},
function(){
$('.desc', this).slideUp()
}
)
//calculates total price
var cartTotal = function(){
var total = 0;
$('.products').each( function() {
var price = parseFloat($('span.price', this).text());
var quantity = parseInt($('span.quantity', this).text());
total += price * quantity;
}
);
$('#showTotal').text(total);
}
//Adds products to cart
var addProductToCart = function(event, dragged){
//storing the dragged element in a variable
var pObj = $(dragged.draggable)
//storing the main parent i.e "li" in our case
var mainParent = pObj.parent().parent();
var productImage = pObj.attr('src');
var productId = pObj.attr('id').split('_');
var productTitle = mainParent.children('.desc').find('.details').text();
var productPrice = mainParent.children('.desc').find('.num').text();
//checking if that product already exist in cart, if so we will increase the quantity by 1
//else a product will get append to the dropOnMe div
var chkCart = $('#'+productId[1]+'_cart');
if(chkCart.size()==1)
{
var quantity = parseInt(chkCart.find('.quantity').text())+1;
chkCart.find('.quantity').text(quantity)
}
else
{
$('#dropOnMe').append('<div class="products" id="'+productId[1]+'_cart"><div class="productImage"><img src="'+productImage+'" title="'+productTitle+'"/></div><div class="productInfo"><span class="name">'+productTitle+'</span> <span class="price">'+productPrice+'</span>Rs (x<span class="quantity">1</span>)</div><div class="productRemove"><img src="images/remove.png" /></div></div><div class="clear"></div>')
.find('div.products:last')
.fadeIn(1000)
.find('.productRemove')
.click(function()
{
$(this).parent().fadeOut(1000, function()
{
var node = $(this)
node.remove();
//after removing of the product we will re-calulate the total price
cartTotal();
})
});
}
//calculates total price
cartTotal();
};
$('.reflected').draggable({
revert:'invalid',
helper:clone',
opacity:0.4,
appendTo:'body',
zIndex:9999});
$('#dropOnMe').droppable({
accept:'.reflected',
activeClass:'activeClassCart',
drop:addProductToCart
});
Almost Finished
Now that we’ve written most of the JavaScript we can give a reflection effect to our products
$('.productsNav').jcarousel();
$('.productsNav li').hover(
function(){
$('.desc', this).slideDown()
},
function(){
$('.desc', this).slideUp()
}
)
//calculates total price
var cartTotal = function(){
var total = 0;
$('.products').each( function() {
var price = parseFloat($('span.price', this).text());
var quantity = parseInt($('span.quantity', this).text());
total += price * quantity;
}
);
$('#showTotal').text(total);
}
//Adds products to cart
var addProductToCart = function(event, dragged){
//storing the dragged element in a variable
var pObj = $(dragged.draggable)
//storing the main parent i.e "li" in our case
var mainParent = pObj.parent().parent();
var productImage = pObj.attr('src');
var productId = pObj.attr('id').split('_');
var productTitle = mainParent.children('.desc').find('.details').text();
var productPrice = mainParent.children('.desc').find('.num').text();
//checking if that product already exist in cart, if so we will increase the quantity by 1
//else a product will get append to the dropOnMe div
var chkCart = $('#'+productId[1]+'_cart');
if(chkCart.size()==1)
{
var quantity = parseInt(chkCart.find('.quantity').text())+1;
chkCart.find('.quantity').text(quantity)
}
else
{
$('#dropOnMe').append('<div class="products" id="'+productId[1]+'_cart"><div class="productImage"><img src="'+productImage+'" title="'+productTitle+'"/></div><div class="productInfo"><span class="name">'+productTitle+'</span> <span class="price">'+productPrice+'</span>Rs (x<span class="quantity">1</span>)</div><div class="productRemove"><img src="images/remove.png" /></div></div><div class="clear"></div>')
.find('div.products:last')
.fadeIn(1000)
.find('.productRemove')
.click(function()
{
$(this).parent().fadeOut(1000, function()
{
var node = $(this)
node.remove();
//after removing of the product we will re-calulate the total price
cartTotal();
})
});
}
//calculates total price
cartTotal();
};
$('.reflected').draggable({
revert:'invalid',
helper:clone',
opacity:0.4,
appendTo:'body',
zIndex:9999})
.reflect({opacity:0.3, height:0.2}); //Apply reflection to all images of class "reflected"
$('#dropOnMe').droppable({
accept:'.reflected',
activeClass:'activeClassCart',
drop:addProductToCart
});
Finished
I don´t know whether this widget is useful or not but i hope you have learnt something from this tut .
beautiful and easely !
Share Some Love