-
Notifications
You must be signed in to change notification settings - Fork 489
Quick Start
After downloading the files, simply place a copy of the simpleCart.js in your site directory, and create a link to it on each page that will be using the cart:
<script type="text/javascript" src="simpleCart.js"></script>
PayPal is the default checkout option. So if you have a paypal account, you will need to set your account email:
<script type="text/javascript"> simpleCart.email = "you@yours.com"; </script>
To have an item for sale (like an awesome t-shirt), you can put it on your Shelf:
<div class="simpleCart_shelfItem"> <h2 class="item_name">Awesome T-Shirt</h2> <span class="item_price">$35.95</span> <input type="text" class="item_quantity" value="1" /> <a href="javascript:;" class="item_add" >Add to Cart</a> </div>
You can use any html tag for the different options or container. To create a shelf item, you create a div with a class of “simpleCart_shelfItem”. Any field you want for your item can be set by creating a tag with a class of “item_[field-name]” and the contents or value of the tag will be the value added for the item. Please check out Shelf Setup and Advanced Shelf Options for more info about the shelf.
You can also add an item to the cart with a simple link:
<a href="javascript:;" onclick="simpleCart.add( 'name=Awesome t-shirt' , 'price=35.95' , 'quantity=1' );" >Add To Cart</a>
If you want to display information about the cart anywhere on your page, simple create any tag (div,span,a,h2,….etc) with a specific class name. For the total items in the cart, use “simpleCart_quantity”
You have <span class="simpleCart_quantity"></span> items in your Cart.
For the cart total, use “simpleCart_total”
Cart total: <div class="simpleCart_total"></div>
You can create a ‘checkout’ link or ‘empty cart’ link by using “simpleCart_checkout” and “simpleCart_empty”
<a href="javascript:;" class="simpleCart_checkout">Checkout</a> <a href="javascript:;" class="simpleCart_empty">Empty</a>
The checkout link will immediately send all the items to PayPal (or another checkout option like Google Checkout) when you click it. These don’t have to be links, however, you can also use divs, images, or any other tag by simply setting the class correctly.
You can display the full cart on any page by simply creating a div with a class of “simpleCart_items”
<div class="simpleCart_items"></div>
SimpleCart(js) will automatically populate these divs with all the items in the cart. You can change the appearance of your cart or what columns are in the cart by checking out Cart Header Formatting and Styling Your Cart.
There are many more options and changes you can make to the cart. Please look through some of the other guides: