An AJAX Based Shopping Cart with PHP, CSS & jQuery

Presenting Bootstrap Studio

a revolutionary tool that developers and designers use to create
beautiful interfaces using the Bootstrap Framework.

Learn more
Web Browser Frame DevKit Box Mouse Cursor

Related Articles

This discussion is closed.
Max Stanworth

Great tut, love it, would be awesome to see it fully fledged with paypal etc ...

Cheer Up.. That's really gr8

paul rostorp

Awesome!!! thanks,

Niiiice article! Thank you for sharing!

I agree with Max! but thanks for the starting point :)

I love Ajax and jQuery combination. You can do a lot of magical stuff with them... I am already using both and they are amazing...


This is pretty sweet, thanks for the tutorial.

Nice in depth tut. Good work!

Great and nice Shopping Cart. Thanks for the tutorial. Excelent.

Well done - it looks great.
I'm sure this has the potential to become a really great platform for easy to use simple shopping carts.

A shopping cart... in AJAX... with no graceful degradation for clients in which it doesn't work.

So, who wants to trust their actual bottom line revenue to whether or not the client supports javascript and is mature enough to support all of this stuff?

You should have a way to let people select items using basic forms and then layer on the jazz... for stuff like this to fly you cannot risk losing a customer over it.

Thanks to everyone for the great comments, I am pleased to see you like the tutorial.

@ DavidK

Thanks for the comment, David. The purpose of this article is to demonstrate what can be done with the technologies used, and how to do it.
It is not meant to be used in a production environment.

As you nicely put it, graceful degradation is an important factor that guarantees one is able to provide a fully working service, regardless of the visitor's browser or configuration.

However, graceful degradation is quite an extensive subject and it would be better to leave it for another tutorial.

Hey there,

why do you still use extra elements to clear? Bad practice... :)


Personally, I would have put the shopping cart to the left of the items, since long lists would make it a bore to drag the object all the way down.

Other than that, nice tut.

Cool shopping cart tutorial!

Hey, your site is hot! Keep the good work!

very nice tut...long life to u...


Please, consider a model where you start with all zero items in the basket. Then, you add some rules - say,buy 2 items get one free, etc.
Also, rules about totals & deliveries are also needed to make such product applicable to many shops


As good looking as simple really nice tut

very nice! thank you

I love it. But I think in a real production environment, it would be beneficial to also have it add the items to the cart on-click, as that was what felt natural and expected (instead, nothing happened when clicking an item).

Just a note to web devs who might uses this tutorial ;)


Thanks for this great tutorial..
just wonder, how can i keep the item list in the shopping cart when u user click to other page, or refresh the page.

i already tried in the demo file, but when i refresh the page or click to other link the item list in the shopping cart become empty again.

is there anyway to keep the list in the shopping cart?

Hello, Nikolius.

The easy way to do this would be to add some JavaScript that stores each added item in a cookie in the visitor's browser. You can just put it in the update_total function, as it is called every time the shopping cart is changed.

The code you'll need to add will have to reset the cookie with the id and quantity of all the products in the cart every time a product is added or removed.

Later, in the $(document).ready section the code will populate the shopping cart with the data in the cookie - this will bring the cart in the state before the browser refresh.

how nice.
thank you

i really like this one ;)
this site will be my favorite;))

hmm.. can i ask something?... because im just a 2nd year college and i'm confused... my professor is so cheap and he don't teach to us ajax clearly..
what's a database manager? is it like sqlyog? ;(( i hope you would reply to me quickly... LOL ;)
and what about the and phpMyAdmin.. ;(( (so embarrassing to ask)

Nano Thailand

Good job.

im really having a hard time here... i cannot connect my sqlyog database. >.< what will i put in the require "connect.php";

Very good tutorial, i really like :)
it would be nice to send the shopping cart info to email how it's possible ?

@ monika

I think it would be better if you first follow some simpler tutorials about AJAX and/or MySQL. It will give you a better understanding on the subject and you'll have no problems configuring this demo.

@ nunoz

In the AJAX contact from tutorial ( ) I've used the PHP mailer class - you could include the class and put the code that sends emails in order.php.

wee thanks anyway.. i got it ;) i was so stupid..i didn't download an apache server..;)) i was able to run all your demo..=) your site is really really good!;)

janus lee

i wanted to make the container of the products a content slider... how is it? martin..please help me...

janus lee

another thing more... is that... how can i add a "clicking" function on the product.. ? how is it possible..


Nice shopping cart. How add the items to the cart on-click?


i try something like this:
$("#lista_produktow li a.link_produkt_dodaj").click(function() {
var param = $("#lista_produktow li").find('img').attr('src');

    if($.browser.msie &amp;&amp; $.browser.version=='6.0')
        param = $("#lista_produktow li").find('img').attr('style').match(/src=\"([^\"]+)\"/);
        param = param[1];

When click add to cart #ajax-loader show and nothing wasn't add to basket... Any suggestion?

@ janus lee, @ galechus

To add a product to the shopping cart on click you'll need to add the following code in script.js (on line 53 in $(document).ready ):

$('.product img').click(function(){

var param = $(this).attr('src');
if($.browser.msie && $.browser.version=='6.0')
    param = $(this).attr('style').match(/src=\"([^\"]+)\"/);
    param = param[1];



This will do the trick.


thx, but how do this on link not img.


... and how make simpletip on link not on .product (li)

Hy.. I can´t figure out how to e-mail order from cart using php.mailer class. Can anyone help me?

@ galechus

In this shopping cart, the images can not be left out, because the script relies on them to identify the product.

It could be possible to change it, but this would be the same as creating a brand new shopping cart.

@ icy

In the new tutorial about Making a Cool Login System, there is a special function I made, called send_mail() - it is defined in functions.php of the download files.

You can use it instead of PHPMailer to easily send emails.

You can see how it works from demo.php of the Login System. Copy the function from functions.php into your current shopping cart's order.php and you can use it.



the total in the order.php don't seem to work. when i add two products, the last product's price will be the total..

Great tutorial and great idea. Love it

Martin- this is just so UBERKOOL ! This is def THEE best ajax/jquery cart I have seen - I had seen one which I thought was nicely built- but this ? This is like so Buck Rogers man, it def belongs in the future ! This totally ROX !
Awesome :)

am having problems implementing the cart whenever i try to view the DOMO.PHP FILE I GET THIS ERROR.

Warning: mysql_fetch_assoc(): supplied argument is not a valid MySQL result resource in /home/paxtons1/public_html/ on line 57




good work and style of writing is really great. thanks


I love your shopping cart. I hope one day I can do this tutorial but before I need to try Ajax. Any way. Thank you very much to share with us.

Excellent tutorial, just stunning.

I noticed that if the prices included cents, for example $199.80 for the iPod, $1199.50 for the iMac, etc., the TOTAL doesn't calculate the price correctly once I start removing the items. Does anyone know how to fix this?

Wonderful tutorial. Is there a way to output order.php (the items in the cart) to a text file when the Checkout button is clicked?

@ toni

var 'totalrounded' should be added to the top of the script.js: var totalrounded = 0;

Then: totalrounded = (Math.round(totalprice*100)/100).toFixed(2); could be used to fix the problem

This is Great!!, but one thing...can i use pagination ? and what kind pagination script that u suggest ? any tutorial that i can read ?anyway thank u for sharing this great tutorial !!! :-)

Great product but i got no idea on how to set up the submit button to send email...

@ van71

I did it in 4 steps:

  1. Go to and download PHP Simple HTML DOM Parser. The file is named simple_html_dom.php. Put it in your root folder (inside the demo folder)

  2. Add these two statements in order.php inside the php code at the top of the page, let's say on on line 2:


  1. Wrap the php code at the middle of the page in order.php with . In other words add on line 51 and on line 85 (or 53 and 87 if you have added the two lines in step2)

  2. Add the following code in order.php after at the bottom of page and replace [email protected] with your email:

find("#orderContent", 0);
$ret = $e->plaintext;
$fp = fopen("output.txt","w");

$file = file_get_contents('output.txt', FILE_USE_INCLUDE_PATH);

$to = [email protected]';
$subject = 'Order';
$message = ''.$file.'';

// To send HTML mail, the Content-type header must be set
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";

mail($to, $subject, $message, $headers);


Now the order will be sent to your email and you should have output.html and output.txt inside your root folder (inside the demo folder), now that you might want to send output.txt to a remote server via ftp.

I am getting a this error when I click on the checkout button. Can anybody help me fix it?

Parse error: parse error, unexpected T_CONSTANT_ENCAPSED_STRING, expecting ',' or ';' in /Volumes/icemanRAID/www_root/sandbox/studentuse/tejasr/demo/order.php on line 78

Toni: I ran into the same issue with formatting currency. I found a super simple solution. Ben Dewey has a FormatCurrency jquery plugin located at

1) in the head of the "demo" file make sure you include the jquery plugin
2) crack open the script.js file. Go to line 152 and right below put this statement: $('#total').formatCurrency();
Should be good to go after that. Here's what my update_total() looks like:

function update_total()

    $('#total').html('total: $'+totalprice);


This May be a silly question, but is there a semicolon at the end of line 78 in your order.php file? That would be my prime suspect. Otherwise, did you happen to customize that line? Maybe there's an unclosed single quote?
the original line is
echo 'Total: $'.$total.'';

awesome.. wonderfull.... thanks to you :)

Thanks Taylor,

I figured it out and fixed it yesterday. For some reason the stop after $total was missing. But i still get a notice saying that 'undefined variable total in' at the point where the mysql calls the result. I have disabled errors to temporarily fix that issue.

@ van71

Sorry, but part of the code from my post on November 13, 2009 is missing. I guess the server didn't like it and deleted it. Anyway I uploaded as a zip file order.php and simple_html_dom.php here:

Just put them in your root folder (inside the demo folder), replace [email protected] with your email and your order will be sent to your email.

Very nice! It's a great starting point.

Usability wise I would move the shopping cart to the left or right in a column and have it persist/scroll with the page so it's on the screen in larger resolutions. Hard to drag/drop to something that is below the fold.

it is amazing

are there ability to integrate it with any of wp ecommerce plugin ?

I want a jquery which should allow user to drag only one product at a time. Once user removes it then only he can drag other item. Please help me. I would be thankful to you, if you can suggest me with code.

El Verdugo

Great tuto, i just wonder, how can i send, the things i buy, or "that ordered" to a database, for example the number of the product and the price, thanks!!!!!!!

drian nugroho

this is awesome, has anybody know the resources that explain about jquery single page or one page checkout process like

thanks a lot

A drag and drop shopping cart is not a good idea. I worked at a company that did a LOT of usability testing on their shopping cart in every age bracket. Older users need things clearly defined and they have no idea what drag and drop even means. Regardless of how cool it is, this shopping cart would ultimately have to be scrapped for the good ole Add to Cart button that is the web standard.
Several users even had no idea where to enter a credit card number even though it was clearly labeled in large text. Sorry, but people are dumb, and we as web developers have to dumb down our sites for them if we want to make money.

Olivier Turbis

Great. Any possibility for you to make a "part 2" integrating Paypal in it? ;)


This is a brillaint cart, I think drag and drop carts should become the new standard!

I need some help though...

My question is the same as Nikolius post from October 5, 2009 at 11:30 pm, (storing the cart contents from page to page) trouble is I don't know a great deal of javascript; could you give an example of how to implement the code you are talking about in your reply. Also instead of storing the data in a cookie could it be passed into a php session??

Thanks in advance blabbybeer

Dimitar Danailov

$('.tooltip').hide(); // hiding the tooltip (sometimes it stays on screen after the drag)

It's work ,but some times not hide the tooltip.

Try in demo with Ipone and see the bug - not hide the tooltip.

I try to fadeOut() ,but this time when bug is UP - fade tooltip 3 times.

Zamshed Farhan

I think it's the best one, I have ever seen about AJAX shopping cart.

Hey guys,

I tried posting but nothing seemed to be approved. What I would like to do is this:

I have created a new page called getRow.php which holds the call to pull the products from the DB as such:


            $result = mysql_query(&quot;SELECT * FROM internet_shop&quot;);
                echo &#039;';


What I would like to do it take that same logic but do it with JQuery like this:

var grbData = $.ajax({
type : "GET",
url : "getRow.php",
dataType: 'html',
success: function (html) {
error: function (xhr) {
$('#errorDisplay').html('Error: '+ xhr.status +'' +xhr.statusText);

The problem i'm seeing is the draggable and droppable effects no longer work.

Please any insight as to why doing this would affect having the effects applied to the products images.

this script is very nice.

but after checkout how if i wants to connect with email from like after checkout user details form will appear like his name,email, address, mobile number and all this details with the products he purchased sent me to my email

anybody can help me ?

I'm waiting for replies



Absolutely Fantastic. You bring it to the point Martin!
This is awesome as a tutorial, there are no questions left open.

What I like about your Website is that you don't publish shit. You're writing really high quality tutorials! I highly appreciate that.
Cheers and Beers mate! It's not quantity but quality that matters and your site is the evidence.

And the best is that you offer a great user experience, because your Site design allows one to read an article without losing focus. All in one page, no dvisions into sections(which is bad practice imho).

You mustn't give support here for free! Nettuts+ is taking money for their tutorials too. I can tell ya, I'd pay.

Best regards

@ Dimitar Danailov - I have the same issue!

Does anyone know how to get rid of the multiple 'flashes' of the product when an image is clicked on and subsequently dragged around the screen or dropped into the shopping basket.

I think it might be to do with the fact that the containment area is set to 'document' within script.js but not sure.

Any ideas guys?

Goran Mitev

Amazing. Like it a lot. Keep up the good work

raghu veer

thank you for the nice shopping cart code, it will be really nice and helpful if you upgrade the script to work with jquery v1.4.2.

I had tested this with jquery v1.3.2 and jqueryUI v1.8 and it worked nice :)

may be, upgrading from simpletip to qtip is another good upgrade

finally, storing the list of items in a cookie is a real good feature addition as buyer have choice to move between pages of the website while shopping.

I understand this is a basic know-how to start with, incase, if you incorporate the above feature updates, it will be a quick start to many starters of jquery, thank you

good work anyhow, all the best :)


please change code after line :
$row=mysql_fetch_assoc(mysql_query("SELECT * FROM internet_shop WHERE img='".$img."'"));

echo '{"status":1,"id":'.$row['id'].',"price":'.$row['price'].',"txt":
"<table width=\"100%\" id=\"table_'.$row['id'].'\"><tr><td width=\"60%\">'.$row['name'].'</td><td width=\"10%\">$'.$row['price'].'</td><td width=\"15%\"><select name=\"'.$row['id'].'_cnt\" id=\"'.$row['id'].'_cnt\" onchange=\"change('.$row['id'].');\"><option value=\"1\">1</option><option value=\"2\">2</option><option value=\"3\">3</option><option value=\"4\">4</option><option value=\"5\">5</option><option value=\"6\">6</option></select></td><td width=\"15%\"><a href=\"#\" onclick=\"remove('.$row['id'].');return false;\" class=\"remove\">remove</a></td></tr></table>"

my shopping cart, working on jquery-1.7.1.


Really NICE DEMO... THANKS A lot ......

I totally appreciate

agence internet

great script !!!
i encounterd an error : "Strict Standards: Only variables should be passed by reference in C:\Program Files (x86)\EasyPHP-5.3.2\www\shopping-cart-php-jquery\ajax\addtocart.php on line 9

could you help ?

agence internet

i made a mistake : it's on line 8 and not on line 9

agence internet

well, i found the solution : replace line 8 (for both tipp.php and addtocart.php) by:

thx to

thanks a lot, very good job.

I try to use in IE6 and don't work, Are you know why?

are you use IE6? don't be silly and do update ! IE6 is over 10 years old ! start using new browsers !

This is a really awesome tutorial! Great job to you Martin!

Any easy way to integrate this into OsCommerce?

I'm not sure if it would be possible to simply link the pages to the current store pages, or if we would need to hard-code it altogether?

Also, I'm sure there's a way to offer this shopping cart solution as the first option and if the user doesn't have Javascript or whatever installed, then he'd be browsing the site with the second option. There would be more involved, obviously, but I'm almost certain it can be done.

Any help and advice is greatly appreciated.



have a question how would it be possible to make it more dynamic.

I tried to do some paging and selection following some form items, however after load i fail to get the "ajax" working, and items are no more "dragable".

Is there a simple way to do this?


Adesina Omoniyi Mark

Nice tutorial. i have learnt a lot here. Keep them coming.

Excuse me Martin, may i know how to make a scroll bar in the product part, and the product how to show for 4 items in a row

Nice tutorial..Thanks


Great tutorial, working on jquery-1.3.2 but not working on jquery-1.7.1.
when im drag the product, icon loading on chart busy. anybody can help me

Tulio Gomez

May I got, updated links. thx.

Hello. Thanks for this nice piece of code. It is exactly what I was looking for. But... well, I've tried ALL kind of tricks and I can't run your excellent script in IE, including of course IE9. I thought that the problem was mine -in my localhost- but I tried with your own online demo and the result is the same: the products icons remains in the products area (freezed), the "loading.gif" icon keeps its rotation forever in the webpage and it never disappear. Any suggestion, please?

Hi Martin, thx for this great tutorial^^...but i met the same prob same wif Juan......

May i know wat's the prob?


nice tutorial for the beginner that I am. Like sebayang before when I drag a product into the cart the loading/busy icon appears but it stalls at that. Can anyone point out what code I need to change (in very simple terms for a complete novice!!).

Many thanks!!

If it helps this is what I have in my demo.php file

<script type="text/javascript" src=""></script&gt;
<script type="text/javascript" src=""></script&gt;

<script type="text/javascript" src="simpletip/jquery.simpletip-1.3.1.pack.js"></script>

<script type="text/javascript" src="script.js"></script>

Hi Neil,
The file 'addtocart.php' (subfolder 'Ajax') contains the statement:

You will have to change that into:
$post = explode('/',$_POST['img']);

Hello Martin,

can you help me,

I would like to get the information quantity from the on change method? Because I will save the datas in database, because the card ist empty if i refresh the site.

I have problems to change the code correctly.

Thank you very much for your help.



in Opera browser, which is my default, dragging is not working, Is there a solution?
thanks in advance Martin!

Hi Martin, great tutorial... do you have any idea how to approach customizing this cart to work on a jquery mobile/ phonegap framework? Any tips would be much appreciated, thanks in advance=) Jasa

Hi, any idea why the remove function is not working in Chrome v32.0.1700.107 and Firefox v27.0.1? It works fine in IE11, but in the others, the red "remove" text disappears but the table row stays.

Due to the "loading" hanging error noted in posts above, I can't check it against your online demo to see if it works here.


Just a tip for anyone trying to use this code. If you are using Chrome version 24 or up and FF 27, you will need to rename the remove() function in script.js, as these new browsers have a built in DOM feature named remove. Without renaming the function you will not be able to delete items from the cart. I just renamed the function itself and the call to it in 'addtocart.php'

Aside from that, this is a great tutorial for anyone wanting to learn this sort of thing.

jan jaime

hi guys you did amazing job, do you have a pdo php like this version because your using the older version of php? is it possible that i can use pdo like this. If you have source code can you share thanks Godbless