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

Author: Zeeshan Rasool | Last updated on April 4th, 2019

AJAX, JQuery, PHP Tutorials, 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 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();
		
	});	
});

$(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="label">'+itemname+'</div>

<div class="shopp-price">$<em>'+itemprice+'</em></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.

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

Author of 99Points
Zeeshan Rasool is an experienced PHP full-stack Web Developer and founder at 99Points. Expert in MVC (Codeigniter, Laravel), WordPress, Bootstrap, ReactJS, JSON, CSS jQuery & HTML5

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

Recommended WordPress Themes Store

Categories

Popular post

Author of 99Points Zeeshan Rasool is an experienced PHP full-stack Web Developer and founder at 99Points. Expert in MVC (Codeigniter, Laravel), WordPress, Bootstrap, ReactJS, JSON, CSS jQuery & HTML5

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

Few More Brilliant Posts !

Recommended WordPress Themes Store

Categories

Popular post

Author of 99Points
Zeeshan Rasool is an experienced PHP full-stack Web Developer and founder at 99Points. Expert in MVC (Codeigniter, Laravel), WordPress, Bootstrap, ReactJS, JSON, CSS jQuery & HTML5