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('

'+itemname+'
$'+itemprice+'

1

');

$('#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

[/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.


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


Email Subscriber!

Be the first to know about new updates


Advertisement


Categories


Popular post