Banyak orang yang merasa kesulitan ketika akan membangun toko online, dengan berbagai alasan dan keterbatasan, misalnya karena harganya yang mahal, pengaturannya yang super rumit yang hanya bisa dilakukan oleh seorang yang sudah mahir dibidangnya, sedangkan modal untuk membangun toko onlinehanya pas pasan.
Namun bukan berarti untuk kita yang memiliki keterbatasan itu lantas mengurungkan niat untuk membangun toko online, kita juga bisa membangun toko online mudah dan gratis.Walaupun kita tidak memiliki keahlian programing sekalipun dan tanpa harus memiliki database.
Bagi pengguna blogger, ada aplikasi Javascript sederhana yang diperuntukan untuk pembuatan toko online di blogspot, SimpleCart.js. SimpleCart.js adalah solusi terbaik untuk membangun aplikasi toko online yang sederhana tanpa harus memerlukan Database. Aplikasi yang dikembangkan oleh The wojo grup ini memungkinkan kita untuk menampilkan beberapa item produk dalam jumlah terbatas. Sebelum melakukan pemesanan, customer juga dimudahkan untuk memilih dan menyimpan item untuk sementara waktu di shopping cart (keranjang belanja) dan aplikasi ini juga support pembayaran via online karena sudah terintegrasi dengan Paypal. Selain itu kita dalam hal ini sebagai pemilik (e-merchant) dapat dengan mudah mengatur sendiri harga per-item dari produk yang akan dijual :)
Silahkan download script dan sample aplikasi yang dibangun dengan Simple chart (JS) pada link dibawah ini:
||Download ||
Step By Step Instalasi
1. Download dan install SimpleCart.js
Download SimpleCart.js dari link diatas, kemudian ekstrak. Upload file simplecart.js ke file hosting gratis (di Ripway.com atau Google Sites).
Jika tidak mau repot gunakan kode dibawah ini.
Silahkan masuk ke Akun Blogger anda, pilih blog yang akan dijadikan sebagai toko online anda, pilih Rancangan, Edit HTML.
Copy Paste kode dibawah ini tepat di bawah kode <b:skin><![CDATA[
=========code=======
<!--Include the SimpleCart(js) script-->
<script charset='utf-8' src='https://sites.google.com/site/s2sblue69/simplecart-1/simpleCart.txt' type='text/javascript'/>
<!--Make a new cart instance with your paypal login email-->
<script type='text/javascript'>
simpleCart = new cart("yourpaypalemail@yahoo.com");
simpleCart.currency = Rupiah;
</script>
Ganti yourpaypalemail@yahoo.com dengan email paypal anda.
Simpan Template
2. Install CSS Code berikut
copy dan pasti code CSS dibawah tepat sebelum ]]></b:skin>
/* Your Cart */
.cartHeaders,.totalRow{display:none;}
.simpleCart_items{
overflow-y:auto;
overflow-x:hidden;
height:324px;
width:200px;
margin-bottom:20px;
}
.itemContainer{
clear:both;
width:229px;
padding:11px 0;
font-size:11px;
}
.itemImage{
float:left;
width:60px;
}
.itemName{
float:left;
width:85px;
}
.itemPrice{
float:left;
width:85px;
color:#418932;
}
.itemQuantity{
float:left;
width:33px;
margin-top:-20px;
vertical-align:middle;
}
.itemQuantity input{
width:20px;
border:1px solid #ccc;
padding:3px 2px;
}
.itemTotal{
float:left;
color:#c23f26;
margin-top:0px
}
Simpan Template
3. Membuat Produk
Posting Entri baru untuk membuat produk, sebagai contoh Copy Paste code dibawah ini dalam HTML mode.
<img src="https://lh4.googleusercontent.com/-uxQZUDZ_QO4/TbWqtcH5qZI/AAAAAAAAADo/Fn2FkkCRSEY/Canon%252520Camera%252520Lens%252520Cup%252520%252528Holder%252520EF%25252024-105mm%252529edit.jpg" alt="Camera Cup" />
Price : $50
Name : Camera Cup
Details : Bla.. bla.. bla
<a href="#" onclick="simpleCart.add('name=Red Shoe','price=50','image=http://sites.google.com/site/angga123site/redShoethumb.jpg');return false;"> add to cart</a>
<hr>
<img src="http://sites.google.com/site/angga123site/goldShoe.jpg" alt="Gold Shoe" />
Price : $70
Name : Gold Shoe
<a href="#" onclick="simpleCart.add('name=Gold Shoe','price=70','image=http://sites.google.com/site/angga123site/goldShoethumb.jpg');return false;"> add to cart</a>
<hr>
<img src="http://sites.google.com/site/angga123site/blackGold.jpg" alt="Black Gold Shoe" />
Price : $58
Name : Black Gold
<a href="#" onclick="simpleCart.add('name=Black Gold','price=58','image=http://sites.google.com/site/angga123site/blackGoldthumb.jpg');return false;"> add to cart</a>
</center>
Terbitkan Entri
4. Membuat Widget
Go to Layout - Page Element - Add A Gadget - Choose HTML / Javascript
Copy and paste this code into your widget
<!--Add a Div with the class "simpleCart_items" to show your shopping cart area.-->
<div class="simpleCart_items">
</div>
TOTAL : <div class="simpleCart_total"></div>
<span class="simpleCart_quantity"></span> items
<br/>
<br/>
<!--Here's the Links to Checkout and Empty Cart-->
<center>
<a href="#" class="simpleCart_empty">Empty cart </a> |
<a href="#" class="simpleCart_checkout">Checkout</a></center>
Save dan lihat hasilnya
Sumber : http://webutakatik.blogspot.com/2011/06/mudahnya-membuat-toko-online-di.html?showComment=1326608761666#c3873671290900326810
udah berhasilinstallasi, tapi kok gag bisamenambahkan item ke keranjangnya ya?? keranjangnya masih kosong.. tolong, apa yang salah??
BalasHapus