Simple shop with blogger

I found the script called SimpleCart . This script is based on Ajax for making a complete shopping cart ,using two payment method Google checkout and Paypal for check out .
You can find out more information on SimpleCart at This page
To make a shop like this ,you can follow some step bellow :
1, Login to your blogger account ,go to Layout tab ,continue to Page elements . Create a HTML/Javascript widget .
2,Download this file and paste it content to HTML/Javascript widget content .
Download file here
3,Save template . And see the widget in action .

How to customize this code

1,Take a look on this code :

<script type=”text/javascript”>
simpleCart.email = “brett@wojodesign.com”;
simpleCart.checkoutTo = PayPal;
simpleCart.cartHeaders = [ "name", "thumb_image" , "Quantity_input" , "increment", "decrement", "Total" ];
</script>
simpleCart.checkoutTo = PayPal; mean the payment method is paypal
simpleCart.email = “brett@wojodesign.com”; is the Paypal email for making payment to .Change it to your own .

2,Here is the code of one item in my live demo shop :

<div>
<!–Notice the class names of each tag begin with item_ –>
<img src=”http://i604.photobucket.com/albums/tt130/metalner/simplexshop/attack-release.png” alt=”product 1″ title=”product 1″/>
<h5>Sample DVD</h5>
<p>
To create a shelf item, you create a div with a class of simpleCart_shelfItem
</p>
<span>$14.99</span>
<a id=”s1″ href=”javascript:;”>Add to Cart</a>
<span class=”item_thumb”>http://i604.photobucket.com/albums/tt130/metalner/simplexshop/attack-release.png</span>
</div>

To create a shelf item, you create a div with a class of “simpleCart_shelfItem” ,like this <div>
…………………
</div>
this structure : <img src=”item_image” alt=”product 1″ title=”product 1″/>
is for image of item . Image of item must contain class=”item_image” attribute .
This structure <h5>your_item_name</h5> is name of item . It must included class=”item_name” .
Description of item must included like this
<p>
your description
</p>
To set the price ,use this structure :
<span>$00.00</span>
To make ” add to cart link” ,add this line
<a href=”javascript:;”>Add to Cart</a>
To add thumbnail image for item ( thumbnail image will be showed in shopping cart ) ,use this structure :
<span>your_thumbnail</span>
Here is the code of cart :

<div id=”cartTotal”>
<strong>Total: </strong><span></span>
</div>
<!–Add a div with the class of simpleCart_items to display what is in the user’s cart–>
<div></div>
<!–use a class of simpleCart_empty to empty the cart and simpleCart_checkout to checkout –>
<a href=”javascript:;”>Empty Cart</a>
<a href=”javascript:;”>Checkout</a>
to show the total ,use this statement :
<span></span>
to show shopping cart ,use this statement
<div></div>
To show “empty cart” and “checkout” button ,use this statement :
<a href=”javascript:;”>Empty Cart</a>
<a href=”javascript:;”>Checkout</a>

In this post ,I explained some important points of using Simplecart and make it a widget to add to Blogspot . If you want to customize the appearance of the shop ,you can modify the CSS section of widget .
If you want to know more about Simple Cart script and its other options such as tax rate ,shipping fee … or option for showing the quantity ,the final cost …
You can go to SimpleCart Documentation page