Template Blog Toko Online Ecommerce + Shopping Cart.
Template blog TOKO ONLINE yang di-share Simplex Design ini bisa menjadi alternatif.
Live Demo
Download Link
CARA SETTING/INSTALL
1. Download.
2. Buka File Template di Word Editor/Notepad.
3. Ubah Nama dan Link Menu Navigasi:
Find this code
<ul id="nav">
<li><a href="http://simplexeshop.blogspot.com">Home</a></li>
<li><ahref="http://simplexeshop.blogspot.com/search/label/shop">Store</a> <ul class="children"> <li><a href="">Category</a></li> <li><a href="">Category</a></li> </ul> </li> <li><a href="http://simplexeshop.blogspot.com/search/label/blog">Blog</a></li> </ul>
4. Basic Shop Setting
This template was built based on SimpleCart solution (Simplecartjs.com ) , what I did only integrated Simplecart to a blogger template . So all options /setting for shop ,you can see in simplecart documentation .
a. Payment method
This Template support two payment methods : Paypal and Google Checkout . Default is Paypal ,and it was set in these line :
simpleCart.email = "brett@wojodesign.com";
simpleCart.checkoutTo = PayPal;
If you want to use Paypal ,you can replace brett@wojodesign.com to your paypal email .
If you want to use Google Checkout ,you can replace two lines above with
simpleCart.merchantId = "111111111111111";
simpleCart.checkoutTo = GoogleCheckout;
Change 111111111111111 to your Google Checkout merchant ID .
b. Currency. Mata Uang
This template support GBP,USD ,and EUR . Default is USD and it was set in this line
simpleCart.currency = USD;
if you want to change the currency ,you can change USD in the line above (marked in bold) to GBP or EUR .
c. Tax rate. Pajak!
The default tax rate was set in this line
simpleCart.taxRate = 0.08;
You can change the value from 0.08 to another rate . If you don't want to add the tax rate ,you can delete this line
d. Shipping
There are many ways to calculating the shipping cost for an order :
-Add a flat rate to the entire order .This is the default method in template and it was set in this line
simpleCart.shippingFlatRate = 5.25;
(an amount 5.25 shipping cost will be added to the entire order )You can change 5.25 to the value you want.
-Add a shipping cost to every item in the cart : if you want to use this method ,you can delete
simpleCart.shippingFlatRate = 5.25;
and use this line
simpleCart.shippingQuantityRate = 3.00;
This line will add an amount 3.00 to every item in the cart .Of course ,you can change 3.00 to other value .
-Add a shipping cost as percentage of total cost : to use this method ,you can delete the default
simpleCart.shippingFlatRate = 5.25;
and use this :
simpleCart.shippingTotalRate = 0.05;
This line will add a shipping cost as 5% to the total cost .You can change this rate to another value .
If you require some advanced calculations for shipping, you can delete the default line and use the prototype object for CartItems:
CartItem.prototype.shipping=function(){
// we are using a 'size' field to calculate the shipping,
// so we first make sure the item has a size
if(this.size){
if( this.size == 'small' ){
return this.quantity*5.00;
} else if( this.size == 'large') {
return this.quantity*7.50;
} else {
return this.quantity*10.00;
}
} else {
// use a default of $2.00 per item if there is no 'size' field
return this.quantity*2.00;
}
}
The 'this' here refers to the item, and we are using a 'size' field and the item 'quantity' to calculate the shipping. Because an item may or may not have a size, we check to make sure it does with the 'if(this.size)'. If there is a size field, we use a different rate for each size and return a value based on the item quantity. Otherwise, we use a base rate of 2.00. simpleCart(js) will use the global shipping rates, and then add the shipping value for each item in the cart.
5,When you finish editing ,upload template to Blogger . Go to Dashboard ->Design ->Page elements
6. To add logo. Mengganti Logo
Click on logo widget
CARA SETTING/INSTALL
1. Download.
2. Buka File Template di Word Editor/Notepad.
3. Ubah Nama dan Link Menu Navigasi:
Find this code
<ul id="nav">
<li><a href="http://simplexeshop.blogspot.com">Home</a></li>
<li><ahref="http://simplexeshop.blogspot.com/search/label/shop">Store</a> <ul class="children"> <li><a href="">Category</a></li> <li><a href="">Category</a></li> </ul> </li> <li><a href="http://simplexeshop.blogspot.com/search/label/blog">Blog</a></li> </ul>
4. Basic Shop Setting
This template was built based on SimpleCart solution (Simplecartjs.com ) , what I did only integrated Simplecart to a blogger template . So all options /setting for shop ,you can see in simplecart documentation .
a. Payment method
This Template support two payment methods : Paypal and Google Checkout . Default is Paypal ,and it was set in these line :
simpleCart.email = "brett@wojodesign.com";
simpleCart.checkoutTo = PayPal;
If you want to use Paypal ,you can replace brett@wojodesign.com to your paypal email .
If you want to use Google Checkout ,you can replace two lines above with
simpleCart.merchantId = "111111111111111";
simpleCart.checkoutTo = GoogleCheckout;
Change 111111111111111 to your Google Checkout merchant ID .
b. Currency. Mata Uang
This template support GBP,USD ,and EUR . Default is USD and it was set in this line
simpleCart.currency = USD;
if you want to change the currency ,you can change USD in the line above (marked in bold) to GBP or EUR .
c. Tax rate. Pajak!
The default tax rate was set in this line
simpleCart.taxRate = 0.08;
You can change the value from 0.08 to another rate . If you don't want to add the tax rate ,you can delete this line
d. Shipping
There are many ways to calculating the shipping cost for an order :
-Add a flat rate to the entire order .This is the default method in template and it was set in this line
simpleCart.shippingFlatRate = 5.25;
(an amount 5.25 shipping cost will be added to the entire order )You can change 5.25 to the value you want.
-Add a shipping cost to every item in the cart : if you want to use this method ,you can delete
simpleCart.shippingFlatRate = 5.25;
and use this line
simpleCart.shippingQuantityRate = 3.00;
This line will add an amount 3.00 to every item in the cart .Of course ,you can change 3.00 to other value .
-Add a shipping cost as percentage of total cost : to use this method ,you can delete the default
simpleCart.shippingFlatRate = 5.25;
and use this :
simpleCart.shippingTotalRate = 0.05;
This line will add a shipping cost as 5% to the total cost .You can change this rate to another value .
If you require some advanced calculations for shipping, you can delete the default line and use the prototype object for CartItems:
CartItem.prototype.shipping=function(){
// we are using a 'size' field to calculate the shipping,
// so we first make sure the item has a size
if(this.size){
if( this.size == 'small' ){
return this.quantity*5.00;
} else if( this.size == 'large') {
return this.quantity*7.50;
} else {
return this.quantity*10.00;
}
} else {
// use a default of $2.00 per item if there is no 'size' field
return this.quantity*2.00;
}
}
The 'this' here refers to the item, and we are using a 'size' field and the item 'quantity' to calculate the shipping. Because an item may or may not have a size, we check to make sure it does with the 'if(this.size)'. If there is a size field, we use a different rate for each size and return a value based on the item quantity. Otherwise, we use a base rate of 2.00. simpleCart(js) will use the global shipping rates, and then add the shipping value for each item in the cart.
5,When you finish editing ,upload template to Blogger . Go to Dashboard ->Design ->Page elements
6. To add logo. Mengganti Logo
Click on logo widget
Add logo as this image bellow
7. There are many places that you can add your own widget.
For example ,you can add link list widget for making category menu ,subscription widget ,page list widget ...
8. That's all for install this template .
HOW TO USE THIS TEMPLATE?
HOW TO USE THIS TEMPLATE?
It's a little bit difficult when using this template .
To post product to shop:
To post product to shop:
Go to Dashboard -> Posting -> New Post .
Click on "Edit HTML" and made a post with this structure
<div id="description">
<img src="image url goes here"><img src="image url goes here"><img src="image url goes here">
PRODUCT INFORMATION..................................</div>
<div class="simpleCart_shelfItem">
<span class="item_name">item name ...</span>
Price : <span class="item_price">price .........</span>
Quatity : <input class="item_quantity" type="text" value="1" />
<a href="javascript:;" class="item_add" title="Add to Cart">Add to Cart</a>
</div>In structure above , this is the product information section :
<div id="description">
<img src="image url goes here"><img src="image url goes here"><img src="image url goes here">
PRODUCT INFORMATION GOES HERE..................................</div>you can add image by using <img src="image url goes here"> and add product description bellow (in the text product information goes here )
After the product information section ,we move to add to cart section :
<div class="simpleCart_shelfItem"><span class="item_name">item name ...</span>Price : <span class="item_price">price .........</span>Quatity : <input class="item_quantity" type="text" value="1" /><a href="javascript:;" class="item_add" title="Add to Cart">Add to Cart</a> </div>in this section ,add the item name in where I marked item name .... ,add the price in where I markedprice ... and change the quatity from '1' to another value .
If you want to set a special shipping cost for this item only ,you can add this line to the add to cartsection
<div id="description">
<img src="image url goes here"><img src="image url goes here"><img src="image url goes here">
PRODUCT INFORMATION..................................</div>
<div class="simpleCart_shelfItem">
<span class="item_name">item name ...</span>
Price : <span class="item_price">price .........</span>
Quatity : <input class="item_quantity" type="text" value="1" />
<a href="javascript:;" class="item_add" title="Add to Cart">Add to Cart</a>
</div>In structure above , this is the product information section :
<div id="description">
<img src="image url goes here"><img src="image url goes here"><img src="image url goes here">
PRODUCT INFORMATION GOES HERE..................................</div>you can add image by using <img src="image url goes here"> and add product description bellow (in the text product information goes here )
After the product information section ,we move to add to cart section :
<div class="simpleCart_shelfItem"><span class="item_name">item name ...</span>Price : <span class="item_price">price .........</span>Quatity : <input class="item_quantity" type="text" value="1" /><a href="javascript:;" class="item_add" title="Add to Cart">Add to Cart</a> </div>in this section ,add the item name in where I marked item name .... ,add the price in where I markedprice ... and change the quatity from '1' to another value .
If you want to set a special shipping cost for this item only ,you can add this line to the add to cartsection
<input class="item_shipping" value="xxx" type="hidden">
replace xxx to the shipping cost of this item
and the code of Add to cart section will become :
<div class="simpleCart_shelfItem">
<span class="item_name">item name ...</span>
Price : <span class="item_price">price .........</span>
Quatity : <input class="item_quantity" type="text" value="1" />
<input class="item_shipping" value="xxx" type="hidden">
<a href="javascript:;" class="item_add" title="Add to Cart">Add to Cart</a>
</div>When you set shipping cost for an item ,the method which used to calculate shipping fee in step 4 will be overide .
After finish editing the post with structure above ,add a label 'shop' at the end of post ,and the product will be added to shop with sliders ,price and add to cart function
That's all for this template!
replace xxx to the shipping cost of this item
and the code of Add to cart section will become :
<div class="simpleCart_shelfItem">
<span class="item_name">item name ...</span>
Price : <span class="item_price">price .........</span>
Quatity : <input class="item_quantity" type="text" value="1" />
<input class="item_shipping" value="xxx" type="hidden">
<a href="javascript:;" class="item_add" title="Add to Cart">Add to Cart</a>
</div>When you set shipping cost for an item ,the method which used to calculate shipping fee in step 4 will be overide .
After finish editing the post with structure above ,add a label 'shop' at the end of post ,and the product will be added to shop with sliders ,price and add to cart function
To post to Blog : to post to blog ,you can make a normal post ,and add a label 'blog' at the end of post.
That's all for this template!
I think it is not easy to use and handle .If you familliar with the code ,you can take a try ^^ For detail shopping cart settings ,you can see more in simplecartjs .
Template Blog Toko Online Ecommerce + Shopping Cart is PREMIUM.
No comments