****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************

I just wanted to pass on two little tricks that Brett discovered when using Basecamp for project management.

 

1. Keeping Track of Mileage

The first technique involves using the program to keep track of driving mileage. This is really useful because you can take a big deduction from your taxes at the year end for the miles you have driven for the company (44.5 cents per mile). Just set up a separate project (we call ours ‘Mileage’), click on the Time tab, and record the miles driven in the ‘hours’ input. This works great because you can assign who did the driving and include a brief description of the purpose. Then, you can easily create reports for any specified range of time, and you can track the mileage of the company as a whole or of individual members.

2. Keeping Track of Expenses

The second technique is similar, but even more useful. We’ve always had difficulty keeping on top of expenses (a problem that many companies run in to). With business members making purchases in different cities and states, it became notoriously difficult for me to know which expenses were made for what. It turns out that there is an easy way to keep track of these expenses using the Basecamp system.

Just create another project called ‘Expenses,’ and you can record the expenses in the Time tab. Thankfully, the system allows you to input negative numbers. Just log negative numbers for expenses and positive numbers for deposits. Just like before, you can create quick reports to track expenses over a certain period of time, either for the entire company or for an individual member. Include a brief description so that your finance guy can correctly categorize the expenses. The beauty of this approach is its simplicity and speed. Plus, since it is done within Basecamp, it is integrated with project management.

Incidentally, there are some other great uses for an ‘Expenses’ project in Basecamp. I post the bank file for the company so that everyone can access the financial information whenever they need it. It’s also a great place to attach any receipts you want to keep track of.

Happy Basecamping!

When we started The Wojo Group, all three of us lived in the same town. We were able to meet almost every day to work on whatever project we needed to, and we even set up a makeshift office in the garage. However, as life progressed, we were eventually separated. Brett moved to Ann Arbor to attend Michigan, and Steve went off to Chicago to study at Columbia University. This change created a host of challenges for our company. Project collaboration was a bit trickier, and we were having trouble maintaining proper communication.

Effective communication is the key to a successful project, as we all know. It’s also very difficult to do over a long distance. Being geographically dispersed can lead to a breakdown in communication, which can spell doom for any company. We had to find a way to overcome the distance hurdle and transition as an organization. Thankfully, there are tons of technology solutions we can use to stay connected with team members.

As a team of Mac lovers, we use iChat for our audio and videoconferencing needs. We try to have regular video conferences twice a week. These meetings are essential because it gives all three of us an opportunity to communicate at once. For those who don’t have iChat, Skype is also a useful (and free) service for audioconferencing. Whatever software solution you use, make sure you set up regular meetings so you don’t fall behind.

Don’t Underestimate the Value of Project Management

I’m a penny pincher. Not your run-of-the-mill type either- I’m fairly extreme. I cringe at the thought of a pack of unneeded staples.

That’s why I have a hard time paying for software. There is always free stuff available, and it’s an expense that usually does not create profits directly.

To keep on top of project management, we were using an unruly system of free (but limited) applications and techniques. It was a nasty and uncoordinated combination of email, text messages, instant messages, and some free web services like Wufoo (for expense reports), Backpack, and Basecamp. We really liked Basecamp, but we were using the free version of the software. Why pay money for an upgrade?

Well, we finally broke down and bought Basecamp, and it may have been the best purchase we ever made. The fact is, having an organized system for project management is crucial, especially when team members are scattered about.

The instinct to avoid paying for any sort of project management application can be strong because you don’t see any immediate profits. Yet, the advantage for the company as a whole is hard to exaggerate.

We highly recommend Basecamp for effective project management on the web. It allows us to keep all of our projects, to-do lists, and clients organized, and the paid version allows for time tracking. Plus, we’ve been using the system to accomplish some other tasks as well- such as recording mileage (for the purposes of tax deductions) and posting quick summaries of expenses.

Whatever your solution, remember that project management is a vital part of your business, a part that is very tricky to do well when operating at a distance. Don’t be afraid to invest some time and money to ensure that you are effective in this area.

The Value of Meeting

True, the Internet and other technologies have made it easier to communicate with each other and coordinate projects over long distances. True, the cost of gas has gone way up. These and other reasons give us all the more excuse to forgo business trips and stay in the comfort of our own homes.

Nevertheless, don’t overlook the value of meeting together in a physical location. All of the project management software and cool gadgetry in the world can’t mimic the type of organization, productivity, and creativity you and your team can accomplish when you meet face-to-face.

Periodic meet-ups have saved our company several times from stagnation. Every now and then, we will get bogged down with a bunch of truly depressing projects. At times like these, meeting together for a week or so of work gives us the chance to get things back on track. Plus, meeting together gives us an opportunity to talk about the future of the company, share different ideas, and plan out the direction we want to head in the future. You can do all of these things without being in the same room, but not nearly as effectively.

It may not always be feasible- practically or economically- to meet together. If that is the case, then it is certainly possible to operate effectively from a distance, as I’ve been discussing in this article. Nevertheless, it would be unwise to overlook the advantages of periodic meet-ups.