Super Shopping Cart with JQuery. Part II

Written By: Zeeshan Rasool  |  Posted In: AJAX, JQuery, PHP, Tutorials

You have seen and like the previous shopping cart tutorials and here is part 2 for that one. I was wondering over internet and I checked a cart which I liked very much and I thought to create a cart with some animation like that. So I created this one.Ajax and JQuery shopping carts are my favorite way to implement a cart in to website. I hope you will love it.

$(document).ready(function() {

	var Arrays=new Array();

	$('.add-to-cart-button').click(function(){

		var thisID 	  = $(this).parent().parent().attr('id').replace('detail-','');

		var itemname  = $(this).parent().find('.item_name').html();
		var itemprice = $(this).parent().find('.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);

			var Height = $('#cart_wrapper').height();
			$('#cart_wrapper').css({height:Height+parseInt(45)});

			$('#cart_wrapper .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>
                ');
		}

	});	

	$('.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();

		$('#cart_wrapper').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;
  }
}

</script>
<div style="min-height: 800px;">
    <div id="cart_wrapper">
        <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 id="wrap">
        <a id="show_cart" href="javascript:void(0)">View Cart</a>
        <ul>
            <li id="1">
                <img class="items" src="product_img/1.jpg" alt="" height="100" />
                <div>Red Grocery Bag</div>
            </li>
            <li id="2">
                <img class="items" src="product_img/2.jpg" alt="" height="100" />
                <div>Reusable Grocery Bag</div></li>
            <li id="3">
                <img class="items" src="product_img/3.jpg" alt="" height="100" />
                <div>White Grocery Bag</div></li>
            <li id="4">
                <img class="items" src="product_img/4.jpg" alt="" height="100" />
                <div>Yellow Grocery Bag</div></li>
            <!-- Detail Boxes for above four li -->
            <div id="detail-1" class="detail-view">
                <div class="close">
                    <a href="javascript:void(0)">x</a></div>
                <img class="detail_images" src="product_img/1.jpg" alt="" width="340" height="310" />
                <div class="detail_info">
                    <label class="item_name">Red Grocery Bag</label>
                    shopping bag, shopping, bag, merchandise, consumerism, gift:
                    $<span class="price">80.00</span>
                    <button class="add-to-cart-button">Add to Cart</button>
                </div>
            </div>
            <div id="detail-2" class="detail-view">
            <div class="close">
                <a href="javascript:void(0)">x</a></div>
            <img class="detail_images" src="product_img/2.jpg" alt="" width="340" height="310" />
            <div class="detail_info">
            
                <label class="item_name">Reusable Grocery Bag</label>
            
                    shopping bag, shopping, bag, merchandise, consumerism, gift:
            
                    $<span class="price">70.00</span>
            
                <button class="add-to-cart-button">Add to Cart</button></div>
            </div>
            <div id="detail-3" class="detail-view">
            <div class="close">
                <a href="javascript:void(0)">x</a></div>
            <img class="detail_images" src="product_img/3.jpg" alt="" width="340" height="310" />
            <div class="detail_info">
            
                <label class="item_name">White Grocery Bag</label>
            
                    shopping bag, shopping, bag, merchandise, consumerism, gift:
            
                    $<span class="price">50.00</span>
            
                <button class="add-to-cart-button">Add to Cart</button></div>
            </div>
            <div id="detail-4" class="detail-view">
                <div class="close">
                    <a href="javascript:void(0)">x</a></div>
                <img class="detail_images" src="product_img/4.jpg" alt="" width="340" height="310" />
                <div class="detail_info">
                    <label class="item_name">Yellow Grocery Bag</label>
                        shopping bag, shopping, bag, merchandise, consumerism, gift:
                
                        $<span class="price">90.00</span>
                    <button class="add-to-cart-button">Add to Cart</button>
                </div>
            </div>
        </ul>
    </div>
</div>
html, body{
	margin:0;
	padding:0;
	border:0;
	outline:0;
}

#wrap{ width:100%; min-height:900px; top:0px; position:relative; bottom:0px; }
#wrap ul{ margin:0px; padding:0px; width: 700px;text-align:center;  }

#wrap .detail-view {
    border: 1px solid #E2E2E2;
    border-top: 1px solid #E2E2E2;
    left: 0;
	height:380px;
    overflow: hidden;
	clear:both;
	display:none;
	margin-left:13px;
	margin-bottom:15px;
    width: 96%;
}

#wrap .detail-view .close{ text-align:right; width:98%; margin:5px; }
#wrap .close a{ padding:6px; height:10px; width:20px; color:#525049; }
#wrap .detail-view .detail_images{ float:left}

#wrap .detail-view .detail_info{
	float:right;
	font-family: "Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,sans-serif;
	color:#525049;
	margin-right:20px;
	margin-top:30px;
	text-align:justify;
	width:250px;
	font-size:12px;
}

#wrap .detail-view .detail_info label{ font-size:12px;text-transform:uppercase; letter-spacing:1px; line-height:60px;} 

#wrap .detail-view .detail_info p{ height:110px;}

a#show_cart{
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #E8E7DC;
    cursor: pointer;
	display:block;
    display: inline-block;
    font: 9px/21px "Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,sans-serif;
    letter-spacing: 2px;
    color:#525049;
	padding:8px;
	text-decoration:none;

    text-transform: uppercase;
}
.add-to-cart-button{
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #E8E7DC;
    cursor: pointer;
    display: inline-block;
    font: 9px/21px "Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,sans-serif;
    letter-spacing: 2px;
    padding-top: 10px;color:#525049;
	margin-top:15px;
    text-transform: uppercase;
}

.add-to-cart-button:hover {
    background: none repeat scroll 0 0 #F8F8F3;
}

.shopp{background: none repeat scroll 0 0 #F8F8F3;}

#wrap ul li{

	list-style-type:none;
	height:146px;
	width:160px;
	margin-left:10px;
	margin-bottom:15px;
	float:left;
	padding:15px 0px 0px 0px;
	font-family:"LubalGraphBdBTBold",Tahoma;
	font-size:2em;
	border:solid #fff 1px;
	overflow:hidden;
}

.footer{ height:400px; background:#E2E2E2} 

#wrap ul li:hover{ border:solid #f3f4ee 1px; }

#wrap ul li div{ 

	height:31px;
	text-align:center;
	width:160px;
	margin-top:10px;
	position:relative;
	bottom:0px;
	padding-top:6px;
	padding-bottom:4px;
	background:#f3f4ee ;
	font: 12px/21px "Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,sans-serif;
	opacity:0.8;
	color: #525049 ;
	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;}

#cart_wrapper {
	border:solid #E8E7DC 1px;
	min-height:120px;
	width:100%;
	padding-top:15px;
	display:none;
    background:#E2E2E2;
	font: 12px/21px "Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,sans-serif;

	position:relative
}

#Submit {
  height: 78px;
  float:left;
}

.closeCart{ cursor:pointer;}

button {
	background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #E8E7DC;
	width:140px;
    cursor: pointer;
    display: inline-block;
    font: 9px/21px "Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,sans-serif;
    letter-spacing: 2px;
    padding-top: 12px;color:#525049;
	margin-top:1px;
	border:solid #ccc 1px; padding:8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	margin-left:20px;
    text-transform: uppercase;
}

button:hover {
    background: none repeat scroll 0 0 #F8F8F3;
}

.cart-total{background: none repeat scroll 0 0 #F8F8F3;}

.shopp,.cart-total{
	border:solid #E8E7DC 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-top:3px;
	width:320px;
	float:left;
	}

#cart_form{ width:570px; padding-left:15px;}

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

You also might like:

  1. Ajax Shopping Cart: Create a Stylish Shopping Cart Using JQuery and PHP
  2. Super Ajax Polling/Voting System using JQuery, Ajax, PHP and MySQL
  3. reCaptcha style Captcha 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

31 to “Super Shopping Cart with JQuery. Part II”

  • Tweets that mention Super Shopping Cart with JQuery. | 99Points -- Topsy.com January 9, 2011 at 3:25 pm

    [...] This post was mentioned on Twitter by Dario Barilà, Michael Davis. Michael Davis said: RT @hiperkocka: szuper webshop kosár http://www.99points.info/2011/01/super-ajax-shopping-cart-with-jquery-and-php/ #jquery [...]

  • jiggy January 10, 2011 at 7:36 pm

    Superb, and I love the animation effect. good work Zeeshan. I would love to use this if ever need a cart

  • Gökhan January 10, 2011 at 8:25 pm

    Good work Zeeshan. but it is not working in ff

  • ZeeShaN January 11, 2011 at 7:30 am

    thanks GoKhan, Its fine here with firefox 4 beta and 3.6 ff version. What version of ff you are using?

  • aungaung January 12, 2011 at 7:02 pm

    Hay, can you guide me how to write voice recording application using ffmpeg?

  • ZeeShaN January 12, 2011 at 7:16 pm

    Hi aungaung, I never worked over voice recording app so I am sorry I cant guide you here.

  • hung May 4, 2011 at 10:08 am

    http://cart.99points.info/new/ not currently IE9, IE 7 or fewer test failures, can guide me fix this error
    thanks

  • kensin May 18, 2011 at 8:47 am

    nice info,, thanks for free script cart..

  • Ziggabyte >> jQuery Magazine » Blog Archive » Super Shopping Cart with JQuery. Part II May 23, 2011 at 6:56 am

    [...] Demo | Download | Home Page [...]

  • Latest jQuery Plugins For Your Next Project – Episode 8 August 5, 2011 at 9:31 am

    [...] Demo Download [...]

  • PJM September 27, 2011 at 11:06 am

    Where does it check out to?How do you make it go to a html form of your by passing data through URL?

    Please advise.

  • Eric Karanja October 18, 2011 at 1:43 pm

    Wow! I would really love facebook comment and shopping cart tuitorials, how can I get them.

  • adam gilmour November 2, 2011 at 2:58 am

    thanks i love you,,, god with you… zeeshan

  • ZeeShaN November 2, 2011 at 5:22 am

    wow :D thanks adam

  • Tenml November 18, 2011 at 7:04 pm

    i’m so excited to learn this..

  • Martin November 24, 2011 at 8:25 pm

    Hey ZeeShaN
    I really like you Super Ajax Shopping Cart with jquery.
    I have, however, one very important question regarding this.
    Could you briefly explain me by show of demo or smth, how can the cart be further implemented when the user presses the ‘CHECKOUT’ button? How one might be able to connect the cart with PHP form?
    Thank you in advance.

    All the best,
    Martin

  • Sasha December 22, 2011 at 6:31 pm

    Question , if i try to put the cart in a container , or somewhere down on the page , each time i click on a product , it pops up to the top ,

    any idea how to fix it …
    ?

  • ZeeShaN December 24, 2011 at 8:00 am

    you should use top property or if you know css then you can change the position. try to play with css

  • subbarao January 3, 2012 at 7:48 am

    hi can you please tell me, how to display greetings in scrap and code for comments (i.e., displaying the content of the comment without scroll bars like your website)

    i am a beginner and joined in a small company. if you don’t mind can you please send me a demo code for comments and scraps. My platform is .Net(asp.net with c#.net-visual studio 2008). give me your code i will try to conver to .net

  • Peter Phillips February 17, 2012 at 6:43 am

    I am seeking a solution to the following, and was wondering if your Super Ajax Shopping Cart with jquerycould be the answer.

    I have a coffee shop owner as a client, who has long queues from 10-10.30.
    What he would like is for people to order their coffee on their mobile phones from a drop-down menu
    No payment would be required at the time of the order – the customer pays when he picks up his coffee.
    The order would somehow come up on the cafe’s screen
    Cafe owner would press a button when the coffee is ready, which would send an email/SMS to the customer, who would then walk across the road and pick up their coffee.

    Can this be done with an adaptation of your script?

    Thanks in anticipation

  • computer mouses April 12, 2012 at 4:46 am

    A pal of mine recommended your web site on Facebook. I can see why. Great post here.

  • h0p81 April 25, 2012 at 2:37 pm

    awesome plugin!
    but something is bothering me.can i change the “li” id by name or something else than number.because when i validate it on w3 validator it shows plenty error.
    thanx

  • Roumen April 27, 2012 at 8:07 am

    Hello and thanks for a great job! But if you open and close article and click immediately to open again it isn’t open, please fix this bug.

  • US Joomla Force June 11, 2012 at 11:31 am

    Ya Zeeshan, we love your articles but it would be good if you explain the code briefly.

  • yami October 10, 2012 at 1:37 pm

    were to add the JQuery Code

  • yami October 10, 2012 at 3:43 pm

    were to add the JQuery Code and the css

  • 15 jQuery Plugins For Shopping Cart October 19, 2012 at 4:45 am

    [...] Super Shopping Cart with JQuery. Part II [...]

  • Hassan Mostafa December 7, 2012 at 12:40 pm

    hi your tutorials is very helpful but if you help us more with this example here by using mysql database to store information and get it with ajax .. thanks ZeeShaN at all .

  • Shahnawaz Baghdadi December 23, 2012 at 7:05 am

    Good work! I would like to know that If user want to add 150 quantity of same product What user can do 150 times clicks on the same product or there is no option.

    If you can add quantity box next to product then I will solve the User flexibility issue.

    Add quantity box

  • Ivan February 20, 2013 at 5:29 pm

    I’ve got it working with mail php, but it only sends total charge. Is there a way to send .cart-info, too? Could you give some code example? BTW, cool script!

  • Ayoub March 8, 2013 at 2:41 pm

    Thank’s for sharing, it’s a very nice code.

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