Cara Membuat Toko Online dengan Shopping Cart

Membuat Toko Online dengan Shopping Cart dan PayPal Checkout - Tutorial membuat toko online dengan Shopping cart ini sebetunya sudah ada beberapa blogger yang mengulasnya, tapi tidak menjelaskan dengan detail cara penerapannya di Blogger. Sebetulnya script ini tidak hanya untuk Blogger, tapi bisa digunakan pada platform yang lain. Karena yang akan saya bahas adalah SimpleCart.js maka sangat cocok untuk Blogger yang tidak menggunakan PHP.

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 dancookie.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 = 'ujangismatullah@yahoo.co.id'; 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/AVvXsEjXNgtQcG-_6a0f6HVLAjW-YSwKpJIpXsFuBNtYfxy7sV-gq4fEsCMWMOBqFN_N5PfRsFnhj86_35rkZa7EelPzxiTK4RtgoTbpSCVzYuvfTLVki3HFGjYqZ3icNT4ZwHs-zdDy4JcsmrAO/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/AVvXsEjXNgtQcG-_6a0f6HVLAjW-YSwKpJIpXsFuBNtYfxy7sV-gq4fEsCMWMOBqFN_N5PfRsFnhj86_35rkZa7EelPzxiTK4RtgoTbpSCVzYuvfTLVki3HFGjYqZ3icNT4ZwHs-zdDy4JcsmrAO/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/AVvXsEjXNgtQcG-_6a0f6HVLAjW-YSwKpJIpXsFuBNtYfxy7sV-gq4fEsCMWMOBqFN_N5PfRsFnhj86_35rkZa7EelPzxiTK4RtgoTbpSCVzYuvfTLVki3HFGjYqZ3icNT4ZwHs-zdDy4JcsmrAO/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

Jumat, 26 Juni 2015