Thursday, January 5, 2012

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 

1 comment:

  1. Great job for publishing such a nice article about HTML5. Your article isn’t only useful but it is additionally really informative. Thank you because you have been willing to share information with us. HTML5 tutorial in hindi

    ReplyDelete

Subscribe to RSS Feed Follow me on Twitter!