Dec

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

ZeeShaN

AJAX, JQuery, PHP, Tutorials, Web Design Tags

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.

JQuery Code

$(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 id="each-'+thisID+'" class="shopp">
 
<div class="label">'+itemname+'</div>
 
 
<div class="shopp-price"> $<em>'+itemprice+'</em></div>
 
 
<span class="shopp-quantity">1</span><img class="remove" src="remove.png" alt="" /><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
 
[ad#co-4]

<h2>HTML</h2>
 
 
<pre lang="php">
<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>

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

Downloads files to get this latest tutorial.

Written by ZeeShaN

ZeeShaN RasooL is a web developer who loves to work in latest technologies to create more interactive dynamic and beautiful web pages.

Most recent

Most liked

Show all comments (34)

ZeeShaN

Hi Nick, Yes you can use this on multiple pages, Actually this is just a insprational script and this can not be perfect for all members and for all their needs you know, So you have to make some modifications to convert it into your website and needs. Thanks!

May 09 2012

Comments Like

0 people liked this

Nick

In the US UK, EU, we have whole units and 1/100s called cents.

In experimenting with your script, it does not add 6.99 + 7.99 + 8.99 with the .99 cents. Only the 6 + 7 + 8 whole units. $21 rather than $23.97.

May 08 2012

Comments Like

0 people liked this

Nick

Also, I’d like the floating cart window to be in the upper right hand corner, and allow products to go all the way to the right margin of the page.

May 08 2012

Comments Like

0 people liked this

Nick

Can I have multiple pages to my shopping cart, and have the floating box follow from page to page?

I assume “yes”, but I want to do it right.

Very stylish!

May 08 2012

Comments Like

0 people liked this

yuvakumar

Hi…nice script..
the shopping script is working..
the super_ajax_cart gives total price when cart checked.
But i want when user cart checks gives product names also..
please help me..
thank you

April 12 2012

Comments Like

0 people liked this