simpleCart(js) + PayPal = E-commerce in minutes

by Brett Wejrowski on October 28th, 2008

****UPDATE: Version 2 is now available, this post is outdated. Please go to simplecartjs.com to find out more*****

**update: v1.2: fixed rounding error in price formatting
**update: v1.1: back button works, no trailing comma for options

(if you want to skip right to the example and downloads, check it out here)

Over the past few years, our company has had several clients who have needed a smaller shopping cart, usually to sell just a couple of items. We generally built these small carts using paypal. I realized it would be nice to package this up, and create a lightweight, easy-to-use, flexible shopping cart.

So we made simpleCart(js). The cart is a 10.5kb javascript file that uses cookies to keep track of the items in the cart. SimpleCart(js) doesn’t require any databases or programming knowledge. You simply need to know some basic HTML and have the ability to copy and paste. However, it can easily be expanded to use databases or contain more advanced options.

Setup Paypal

The first thing you will need to do, if you don’t already have one, is set up a free merchant account with Paypal.

Add simpleCart(js) to your pages

Once you have the files downloaded, simply add this snippet to the top of any page you wish to have the cart running on:


<script src="simpleCart.js" type="text/javascript"></script>
<script type="text/javascript"><!--
simpleCart = new cart("you@yours.com");
// --></script>

You will need to replace you@yours.com with the email address you used to sign up to Paypal.

Adding items to the cart

Any page you have the simpleCart(js) running, you can add an item by simply using a link like this:


<a onclick="simpleCart.add('name=[name]','price=[price]');return false;" href="#"> link to add item </a>

You are required to at least have a name and price when adding an item to the cart. However, you can add other fields also. If you want an image to be linked to the item, you can add it like this:


simpleCart.add('name=Shirt','price=6.00','image=images/myImage.png');

Viewing the cart

You may have the cart on any page, and it will update automatically using ajax. To show the cart items on a particular page, you simply need to have an element with the class of “simpleCart_items” on the page. This element will automatically be filled with all of the items in the cart, and will show each field.


<div class="simpleCart_items"></div>

You can use any element (div,a,span,p,etc.) and the values will be put in the innerHTML of that element.

Showing the totals on a page

You can show the total quantity or price on any page by simply having an element with a class “simpleCart_quantity” or “simpleCart_total”:


<div class="simpleCart_total"></div> <span class="simpleCart_quantity"></span> items

Checkout and Empty Cart links

You can have a checkout or empty cart link anywhere on any page where the simpleCart(js) is active. You do this by simply setting the class of an element to “simpleCart_checkout” or “simpleCart_empty”:


<a class="simpleCart_checkout" href="#">checkout</a>

<a class="simpleCart_empty" href="#">empty cart</a>

You can use any type of element for these, and you can put anything inside of the element. Anything wrapped in a tag with those classes will link appropriately.

Other Options

Adding other product options to items.


simpleCart.add('name=Shirt','price=6.00','image=images/myImage.png','size=XL','color=Blue');

You can also change the quantity that will be added to the cart:


simpleCart.add('name=Shirt','price=6.00','image=images/myImage.png','quantity=5','size=XL','color=Blue');

The order of the arguments doesn’t matter, and you can add as many options as you would like.

Styling the cart.

You can style this cart to fit the look of your page. The contents of the cart will start with a header row:


<div class="cartHeaders">
<div class="itemImage">Image</div>
<div class="itemName">Name</div>
<div class="itemPrice">Price</div>
<div class="itemOptions">Options</div>
<div class="itemQuantity">Quantity</div>
<div class="itemTotal">Total</div>
</div>

Each item in the cart will have the following form:


<div class="itemContainer">
<div class="itemImage">[myImage]</div>
<div class="itemName">Shirt</div>
<div class="itemPrice">$6.00</div>
<div class="itemOptions">size: XL; color: Blue</div>
<div class="itemQuantity"><input type="text" /></div>
<div class="itemTotal">$30.00</div>
</div>

And there will also be a totals row:


<div class="totalRow">
<div class="totalItems">6</div>
<div class="totalPrice">$30.00</div>
</div>

You can choose to omit part of the cart in your stylesheet:


.itemOptions,itemImage{
display:none;
}

Or you can hide the header or totals rows:


.totalRow{
display:none;
}

.cartHeaders{
display:none;
}

Change the order of the cart columns.

If you would like to change the order of columns or remove the columns from ever being shown, simply add a line to the top of your page:


<script type="text/javascript" src="simpleCart.js"></script>
<script type="text/javascript">
simpleCart = new cart("you@yours.com");

//Add the following line to reorder and remove item columns
simpleCart.ItemColumns = ['Image','Price','Name','Quantity','Total'];

</script>

Download and Demo

Below are links to download simpleCart(js) and to view a working Demo. One great thing about the cart being stored in cookies is that you can have your items be added on one page and the cart be on another if you wish. The demo reflects this. The main page of the sample store is here and the View Your Cart page is here.

********* Please go to simplecartjs.com for the updated downloads and demo************