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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
$(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"></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(); }); }); |
Downloads files to get this latest tutorial.
Very nice …..simple and sober