Ajax Shopping Cart: Create a Stylish Shopping Cart Using JQuery and PHP

Author: Zeeshan Rasool  |  Dec 9, 2010 AJAX, JQuery, PHP, Tutorials, Web Design

You have seen many Ajax and JQuery based shopping carts examples over internet. I have created here a JQuery based shopping cart which doesn’t call any Ajax request but save all shopping into a form and in the end we just simple submit that form where ever we want to be submitted. I used jQuery and CSS to create this stylish Cart. Hope you will like it.

[code type="javascript" title="JavaScript"]$(document).ready(function() {

var Arrays=new Array();

$('#wrap li').mousemove(function(){

var position = $(this).position();

$('#cart').stop().animate({

left : position.left+'px',

},250,function(){

});
}).mouseout(function(){

});

$('#wrap li').click(function(){

var thisID = $(this).attr('id');

var itemname = $(this).find('div .name').html();
var itemprice = $(this).find('div .price').html();

if(include(Arrays,thisID))
{
var price = $('#each-'+thisID).children(".shopp-price").find('em').html();
var quantity = $('#each-'+thisID).children(".shopp-quantity").html();
quantity = parseInt(quantity)+parseInt(1);

var total = parseInt(itemprice)*parseInt(quantity);

$('#each-'+thisID).children(".shopp-price").find('em').html(total);
$('#each-'+thisID).children(".shopp-quantity").html(quantity);

var prev_charges = $('.cart-total span').html();
prev_charges = parseInt(prev_charges)-parseInt(price);

prev_charges = parseInt(prev_charges)+parseInt(total);
$('.cart-total span').html(prev_charges);

$('#total-hidden-charges').val(prev_charges);
}
else
{
Arrays.push(thisID);

var prev_charges = $('.cart-total span').html();
prev_charges = parseInt(prev_charges)+parseInt(itemprice);

$('.cart-total span').html(prev_charges);
$('#total-hidden-charges').val(prev_charges);

$('#left_bar .cart-info').append('

');

$('#cart').css({'-webkit-transform' : 'rotate(20deg)','-moz-transform' : 'rotate(20deg)' });
}

setTimeout('angle()',200);
});

$('.remove').livequery('click', function() {

var deduct = $(this).parent().children(".shopp-price").find('em').html();
var prev_charges = $('.cart-total span').html();

var thisID = $(this).parent().attr('id').replace('each-','');

var pos = getpos(Arrays,thisID);
Arrays.splice(pos,1,"0")

prev_charges = parseInt(prev_charges)-parseInt(deduct);
$('.cart-total span').html(prev_charges);
$('#total-hidden-charges').val(prev_charges);
$(this).parent().remove();

});

$('#Submit').livequery('click', function() {

var totalCharge = $('#total-hidden-charges').val();

$('#left_bar').html('Total Charges: $'+totalCharge);

return false;

});

});

function include(arr, obj) {
for(var i=0; i if (arr[i] == obj) return true;
}
}
function getpos(arr, obj) {
for(var i=0; i if (arr[i] == obj) return i;
}
}
function angle(){$('#cart').css({'-webkit-transform' : 'rotate(0deg)','-moz-transform' : 'rotate(0deg)' });}[/code]

[code type="markup" title="HTML"]

• 

  Mac/OS X: Price: $800

• 

  IPhone 3GS : $500

• 

  Apple IPad : $450

• 

  Mac NoteBook : $1200

• 

  Bag : Buy Now Price : $65

• 

  IPhone 4GS : $800

• 

  Bag : Buy Now Price : $45

• 

  Mac NoteBook : $900

• 

  Sony Super Ear Phone : $20

Total Charges:  $0

CheckOut

[/code]

[code type="css" title="CSS"]
html, body{
margin:0;
padding:0;
border:0;
outline:0;
}

#wrap{ width:600px; height:900px; top:20px; position:relative; bottom:0px;
}
#wrap ul{ margin:0px; padding:0px; text-align:center }

#wrap ul li{
-moz-background-clip: padding; /* Firefox 3.6 */
-webkit-background-clip: padding; /* Safari 4? Chrome 6? */
background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
border: 10px solid rgba(0,0,0,0.3);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;

/*background:url("bgs.png") repeat-x scroll;*/
list-style-type:none;
height:150px;
width:160px;
margin-left:13px;
margin-bottom:15px;
float:left;
padding:15px 0px 0px 0px;
font-family:"LubalGraphBdBTBold",Tahoma;
font-size:2em;
overflow:hidden;
}

#wrap ul li div{

height:25px;
text-align:center;
width:160px;
margin-top:10px;
position:relative;
bottom:0px;
padding-top:12px;
padding-bottom:4px;
background:#000;
font: 11px Tahoma, Helvetica, Arial, Sans-Serif;
opacity:0.8;
color: #ccc;
text-shadow: 0px 2px 3px #555;
}
img#cart
{
bottom:0px;position:fixed; margin-left:30px; /* keep the bar on top */
}

#wrap ul li { cursor:pointer;}

div#bottomBar {
position: fixed;/* keep the bar on top */
bottom: 0px;
z-index: 9999;
background:url(rail.jpg) bottom center repeat-x;
height: 130px;
}

div#bottomBar {
width:600px;
}

#left_bar
{
top:120px;
left:600px;
height:350px;
width:250px;
position:fixed;
padding:10px;
/*-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;
border: 10px solid #006699;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px; */
}
em{ font-style:normal; }
button {

background:none repeat scroll 0 0 #AD7B05; color:#FFFFFF;
border:medium none;
font-family:"LubalGraphBdBTBold",Tahoma;
font-size:1.1em;
margin-right:-14px;
padding:10px;
cursor:pointer;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}

.cart-total{ background:#E8E8E8}

.shopp,.cart-total{
border:solid #ccc 1px; padding:8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px; font-size:12px;
background:url(remove.png) center right no-repeat 5px;
border-radius: 8px;
font-family:"LubalGraphBdBTBold",Tahoma;
margin-bottom:3px;
width:260px;
}

div.shopp span{ float:left;}
div.shopp div.label{ width:130px; float:left; }
div.shopp div.shopp-price{ width:70px; float:left;}
.quantity{ float:left; margin-top:-3px; width:20px;}
img.remove{float:right;cursor:pointer;}
.cart-total b{width:130px;}[/code]

Downloads files to get this latest tutorial.