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

Written By: Zeeshan Rasool  |  Posted In: 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)' });}
<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>
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.

You also might like:

  1. Super Shopping Cart with JQuery. Part II
  2. Ajax Stylish Captcha and Contact Form using JQuery and PHP.
  3. Ajax Domain Checker Application with JQuery and PHP
  4. Fresh: Ajax Heart Rating System with JQuery and PHP

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


Zeeshan Rasool is the founder and editor of this blog. Beside this, he is an experienced PHP web developer and freelancer. He loves to create best and interactive web apps. You can follow him at twitter @99_Points and facebook OR drop an email at 99points.info@gmail.com

51 to “Ajax Shopping Cart: Create a Stylish Shopping Cart Using JQuery and PHP”

  • SONO April 4, 2013 at 12:07 pm

    when we click on check i get the total amount. i want to get all the data when we push the checkout button.

    like the product name , quantity , and its price just like a invoice.

    can anyone help me in this matter.

« Older Comments

Post comment


Email Subscriber!

Be the first to know about new updates


Fan Page Follow Us Follow Us Feed Subscribers
Advertisement


Categories

Popular post

Recommend