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.

$(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('<div class="shopp" id="each-'+thisID+'"><div class="label">'+itemname+'</div><div class="shopp-price"> $<em>'+itemprice+'</em></div><span class="shopp-quantity">1</span><img src="remove.png" class="remove" /><br class="all" /></div>');
			
			$('#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<arr.length; i++) {
    if (arr[i] == obj) return true;
  }
}
function getpos(arr, obj) {
  for(var i=0; i<arr.length; i++) {
    if (arr[i] == obj) return i;
  }
}
function angle(){$('#cart').css({'-webkit-transform' : 'rotate(0deg)','-moz-transform' : 'rotate(0deg)' });}

100

101

102

103

104

$(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('<div class="shopp" id="each-'+thisID+'"><div class="label">'+itemname+'</div><div class="shopp-price"> $<em>'+itemprice+'</em></div><span class="shopp-quantity">1</span><img src="remove.png" class="remove" /><br class="all" /></div>');

$('#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<arr.length; i++) {

if (arr[i] == obj) return true;

}

function getpos(arr, obj) {

for(var i=0; i<arr.length; i++) {

if (arr[i] == obj) return i;

}

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

<div>

<div id="wrap">

<ul>

<li id="1">

<img class="items" src="a1.png" alt="" height="100" />

<div>

<span class="name">Mac/OS X: Price</span>: $<span class="price">800</span></div></li>

<li id="2">

<img class="items" src="5.png" alt="" height="100" />

<div>

<span class="name">IPhone 3GS </span>: $<span class="price">500 </span></div></li>

<li id="3">

<img class="items" src="1.png" alt="" height="100" />

<div><span class="name">Apple IPad </span>: $<span class="price">450</span></div></li>

<li id="4">

<img class="items" src="6.png" alt="" height="100" />

<div><span class="name">Mac NoteBook </span>: $<span class="price">1200 </span></div></li>

<li id="5">

<img class="items" src="7.png" alt="" height="100" />

<div> <span class="name">Bag : Buy Now Price </span>: $<span class="price">65</span></div>

</li>

<li id="6">

<img class="items" src="5.png" alt="" height="100" />

<div><span class="name">IPhone 4GS </span>: $<span class="price">800</span></div>

</li>

<li id="7">

<img class="items" src="7.png" alt="" height="100" />

<div><span class="name"> Bag : Buy Now Price </span>: $<span class="price">45</span></div>

</li>

<li id="8">

<img class="items" src="6.png" alt="" height="100" />

<div>

<span class="name">Mac NoteBook </span>: $<span class="price">900 </span></div></li>
<li id="9">

<img class="items" src="8.png" alt="" height="100" />

<div><span class="name">Sony Super Ear Phone </span>: $<span class="price">20</span></div>

</li>
</ul>

<div id="bottomBar"><img id="cart" src="carts.png" alt="" /></div>
</div>

<div id="left_bar">
<form id="cart_form" action="#">

<div class="cart-total">

<strong>Total Charges: </strong> $<span>0</span>

<input id="total-hidden-charges" name="total-hidden-charges" type="hidden" value="0" /></div>

<button id="Submit">CheckOut</button></form></div>
</div>

<div>

<ul>

<div>

<span class="name">Mac/OS X: Price</span>: $<span class="price">800</span></div></li>

<div>

<span class="name">IPhone 3GS </span>: $<span class="price">500 </span></div></li>

<div><span class="name">Apple IPad </span>: $<span class="price">450</span></div></li>

<div><span class="name">Mac NoteBook </span>: $<span class="price">1200 </span></div></li>

<div> <span class="name">Bag : Buy Now Price </span>: $<span class="price">65</span></div>

</li>

<div><span class="name">IPhone 4GS </span>: $<span class="price">800</span></div>

</li>

<div><span class="name"> Bag : Buy Now Price </span>: $<span class="price">45</span></div>

</li>

<div>

<span class="name">Mac NoteBook </span>: $<span class="price">900 </span></div></li>

<div><span class="name">Sony Super Ear Phone </span>: $<span class="price">20</span></div>

</li>

</ul>

</div>

<strong>Total Charges: </strong> $<span>0</span>

<button id="Submit">CheckOut</button></form></div>

</div>

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;}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

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;}

Downloads files to get this latest tutorial.

Recommended WordPress Themes Stores

If you enjoyed this post, please consider leaving a comment below or subscribing to the RSS feed to have future articles delivered to your feed reader. You can also follow us on Facebook or Twitter @99Points

This awesome post has been created by 99Points editor's team. You can follow our updates on Twitter and facebook, OR drop an email at 99points.info@gmail.com

Chamandeep singh ranot

Very nice …..simple and sober

Author of 99Points
Zeeshan Rasool is an experienced PHP Web Developer and founder at 99Points. Expert in Codeigniter (MVC), WordPress, JSON, jQuery & HTML5