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

Author: Zeeshan Rasool | Last updated on July 17th, 2014

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 Store

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