Build An AJAX Powered Shopping Cart

The goal of this tutorial is to show you how to build an AJAX powered shopping cart. However, it will not be production ready. The back end requirements vary from site to site far too much to write an effective tutorial. Instead, we are going to focus on the AJAX parts.

The back end code in this tutorial acts as scaffolding for us to build the AJAX functionality, however, it can be built off of to meet your own site's requirements. In the last section, we'll discuss some possible next steps to implementing this in your own websites.

The other thing to note is that this tutorial will not explain all the details. A firm grasp of HTML, CSS, and some basic PHP is expected. By basic I mean variables, arrays, control structures, and basic OOP. Some knowledge of Javascript is a plus. We'll walk through and break down the trickier bits of PHP and Javascript, but will gloss over the basic stuff like CSS styling. Links to documentation and other relevant resources will be sprinkled throughout wherever relevant.

The final thing to note is that the order codes (or product codes) used in this tutorial are completely arbitrary.

The Demo

The demo page shows a few different ways our AJAX shopping cart can function. It should be noted that this is not a production ready shopping cart. Due to variability of the requirements from site to site, this tutorial will only cover building the skeleton while you will have to code in the details for retrieving product names, prices, and other data that might come from a database.

Step 1 - Downloading the scripts

We're going to be using jQuery, the jQuery color animations plugin, and Thickbox. The color plugin extends jQuery to allow us to use jQuery to animate colors and Thickbox lets us create quick and easy modal windows.

Create a directory on your web server for the cart to live in. For this tutorial we'll be using cart/. Substitute cart/ with the directory you are using on your server. Inside the cart/ directory create js/, css/, and images/ folders for storing your Javascript, CSS, and images.

Download the jQuery, color plugin, and Thickbox files and save them into the appropriate folders we just created in the cart/ directory. Make sure you download the uncompressed thickbox.js.

Your folder structure should look something like this. I have renamed some of the files but it should be pretty obvious what each one is.

cart/js/jquery-1.2.6.pack.js
cart/js/jquery.color.js
cart/js/thickbox.js
cart/css/thickbox.css
cart/images/loadingAnimation.gif
cart/images/macFFBgHack.png

Step 2 - Setup Thickbox

Since our folder structure is a little different from the default Thickbox one, we're going to need to fix some of the paths referencing loadingAnimation.gif and macFFBgHack.png.