Ide pembuatan tutorial ini, berasal dari request +Ruly Jenar Nakula yang mengharuskan saya ngacak-ngacak SimpleCart, padahal baru kali ini saya coba. Walaupun saya pemula dalam memahami SimpleScript.js ini, mudah-mudahan yang saya bagikan ada manfaatnya.
Sebelum menuju tutorial, untuk lebih memahami bagaimana cara kerjanya, silahkan kunjungi halaman demo (coba sampai klik Checkout)
Cara Membuat Toko Online dengan Shopping Cart
Langkah 1 : Script Utama
Pastikan di template sobat sudah tersimpan framework jQuery, kemudian simpan
simplecart.js dan cookie.js sebelum </head><script src='https://jt-scriptsource.googlecode.com/svn/trunk/jquery.cookie.js' type='text/javascript'/>
<script src='https://jt-scriptsource.googlecode.com/svn/trunk/simplecart.js' type='text/javascript'/>Langkah 2 : Script Checkout PayPal
Masih diatas
</head>simpan kode dibawah ini, (edit dengan alamat email sobat)<script type='text/javascript'>
//<![CDATA[
simpleCart.email = '[email protected]';
simpleCart.checkoutTo = PayPal;
simpleCart.currency = USD;
simpleCart.cartHeaders = ['name','thumb_image','Quantity_input','increment', 'decrement','Total'];
//]]>
</script>Menulis Kode pada Postingan
Contoh penulisan kode pada postingan, seperti dibawah ini :
<div class="simpleCart_shelfItem">
<img alt="Huwawei" class="item_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfQHx8J1DXVOHRIXVQohFqERB2cZynQIvFy-_NqHs8oAxbYC5MDFOW3S6BF707q02fB58vw9f1FlZFOgAvSRH_P9cY1axvHQPeLZPNmQz8TdxYyYs0k-HDYYBkaV54UOoWHBvvY8n4Dlfs/s1600/Huawei-E392-100Mbps.jpg"/>
<h2 class="item_name"> Awesome T-shirt </h2>
<p> <input value="1" class="item_Quantity" type="text"><br>
<span class="item_price">$35.99</span><br>
<a class="item_add" href="javascript:;"> Add to Cart </a></p>
</div>Setiap objek (gambar, nama, harga,jumlah,dan add to cart) harus didalam class
simpleCart_shelfItem. Penggunaan class pada object harus seperti script di atas. Atau bisa dengan cara seperti ini :<img alt="Huawei E392" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfQHx8J1DXVOHRIXVQohFqERB2cZynQIvFy-_NqHs8oAxbYC5MDFOW3S6BF707q02fB58vw9f1FlZFOgAvSRH_P9cY1axvHQPeLZPNmQz8TdxYyYs0k-HDYYBkaV54UOoWHBvvY8n4Dlfs/s1600/Huawei-E392-100Mbps.jpg" />
<h3>
Huawei E392</h3>
<span class="price">$50</span>
<a class="add-to-cart" href="#" onclick="simpleCart.add('quantity=1', 'name=Huawei E392','price=50','thumb=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfQHx8J1DXVOHRIXVQohFqERB2cZynQIvFy-_NqHs8oAxbYC5MDFOW3S6BF707q02fB58vw9f1FlZFOgAvSRH_P9cY1axvHQPeLZPNmQz8TdxYyYs0k-HDYYBkaV54UOoWHBvvY8n4Dlfs/s1600/Huawei-E392-100Mbps.jpg');return false;">add to cart</a>Kode di atas hanya contoh yang saya gunakan pada demo. Silahkan edit nama, thumbnail, harga dan quantitynya.
Beberapa HTML Penting
Dibawah iniadalah kode HTML yang bisa disimpan dimana saja tergantung kebutuhan. Kode-kode tersebut untuk menampilkan jumlah pesanan, detail pesanan, kosongkan keranjang belanja, dll.
// menampilkan jumlah pesanan (item)
<span class='simpleCart_quantity'></span>
// menampilkan detail pesanan
<span class='simpleCart_items'></span>
// menghapus daftar belanja
<a class='simpleCart_empty' href='javascript:;'>Empty Cart</a>
// checkout
<a class='simpleCart_checkout' href='javascript:;'>Checkout</a>
// jumlah total
<span class='simpleCart_total'></span>Kostumisasi
Untuk mempercantik tampilan, sobat harus sudah menguasai CSS. Di sini saya tidak akan menjelaskan / menulis CSS pada demo, saya hanya akan menunjukan selektor mana saja yang perlu diberi sentuhan CSS.
Sebetulnya sobat bisa coba inspect element pada demo, tapi untuk mempermudah pengeditan saya akan tunjukan selektor-selektor pada demo yang saya buat.
Untuk halaman "Shopping Cart" selektor relatif sama, ditambah dengan CSS pada selektor
.simpleCart_total, .simpleCart_empty dan .simpleCart_checkout.Contoh yang saya buat hanya gambaran saja. Silahkan dikembangkan dengan kreatifitas sobat masin-masing. Apabila masih ada pertanyaan, silahkan diskusikan di kolom komentar.