paypal checkout
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 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 = '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="http://3.bp.blogspot.com/-BqSTPDlSK5c/U_q85yoBTTI/AAAAAAAAGq0/zSjCc1dbnmE/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="http://3.bp.blogspot.com/-BqSTPDlSK5c/U_q85yoBTTI/AAAAAAAAGq0/zSjCc1dbnmE/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=http://3.bp.blogspot.com/-BqSTPDlSK5c/U_q85yoBTTI/AAAAAAAAGq0/zSjCc1dbnmE/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.

simple cart

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.

57 komentar

Shopping Cart dengan PayPal ini bisa terima PayPal Unverified ngak Kang...?
Request saya kapan nich Threaded Comments Hack Versi G+ he..he..he...

Balas

wah saya blum coba kang.. soalnya punya saya udah verified dari thn 2009. maslalah G+ masih komen hack yang dulu ko kang... cuman di edit CSS aja :D

Balas

mah pas bener nih kang :D lagi pengen bikin usaha konveksi :)

Balas

tapi gimana biar bisa terhubung langsung ke Google+ ny kang ?
kalau kita komen di mari pasti muncul di G+ kita :D ada tutor ny kah kang ?

Balas

cocok banget buat di pasang pada jenis template jual beli yaa

Balas

Untung udah dijawab sama kang Ismet :) kemarin saya kutak-katik lieur kang hehehe :)

Balas

disimpen dulu kang, nunggu punya toko online dulu :D

Balas

Mantab bingit kang Ismet. :-bd

Balas

Kang Ismet Memang Jagonya Soal yang beginian :)

Balas

Master sekelas Kang ady juga sudah lieur apalagi saya :(

Balas

kalau ini ga terhubung ko.. kalo mau terhubung, gunakan g+

Balas

sukses deh bisnisnya :-bd

Balas

iya bung.. emang wajib kalo template e-commerence pake shopping cart

Balas

hehehe... kalau lieur mah muntang aja kang :D

Balas

ga usah nunggu punya toko online kang, jual 1 product aja jadi :)

Balas

ah ga juga.. saya cuma mengaplikasikan aja..

Balas

Nuhun Pisan Kang ah hehe tos jadi ayena mah tinggal dibuat responsive dan polesan design'y saja yeuhh ...

Balas

Mantap kang mulai posting lagi nih :D

Balas

haha kamari eta teh di suhunken bantosan na ku abdi kang ...

Balas

iya nih sob... kemaren2 dateng penyakit males :D

Balas

mangga di acak2 we kang sesuai selera :D

Balas

saya sempat dibuat bingung kang sampe di obrak abrik dai karena add to cart'y gak jalan eh ternyata dari format gambar untuk thumb add to cart'y gak bisa pake png v harus jpg ..

Balas

Kirain format gambar'y kang eh ternyata penamaan pada gambar gak boleh ada tanda ( ' )

Balas

di test .. di test http://roeltemplate.blogspot.com/2014/04/lorem-ipsum.html hehe

Balas

mantap kang... sudah saya test tos dan berhasil beibeuh :-bd

Balas
Komentar ini telah dihapus oleh pengarang.

Maaf kang, mungkin ga sesuai judul.. soalnya di forum ga bisa kesambung kang.. gni kang saya punya template flat mag cuman masalahnya di listnya itu tidak muncul number dan bulletnya. itu gmna cara memperbaikinya kang?. uda cari2 jga di google. tpi gdpat2..

Balas

jadi pengen punya blog shop :)

Balas

gw g ngiklan kang gila komennya bisa gitu :ngakak:

Balas

hahahha.... kejaring security kalimatnya tuh :D nanti saya perbaiki scriptnya

Balas

coba cari list-style:none terus hapus

Balas

Wahh keren juga kang, tapi saya kurang paham kalo soal javascrip, masih newbie banget :D

Balas

keren nih buat blog toko online.. mantapp :-d

Balas

bagus banget artikelnya.

salam kenal gan
silakan bergabung bersama kami di www.168sdbet.com

Balas

sangat bermanfaat sekali gan
kunjungi kami di www.138sdbet.com

Balas

kang, saya coba pasang widget "total" nya ada 2, satu sbagai widget, satunya di "page", tapi kok yang di page g bisa update orderan ya?
saya coba buat seperti contohnya.
Trims.

Balas

maaf kang, sudah bisa.
ternyata salah penempatan scriptnya @@,

Balas

mantap sekali lah si akang ini mah. jagoan kana utak atik nateh. ijin sedot ah :)

Balas
Komentar ini telah dihapus oleh administrator blog.

Kang ismet ada yang udah nge-clone template ini hampir sama sihh bede dikit doang..

linknya nih: (Coba cek)
http://zmi-blog.blogspot.com/

Balas

Keren banget kang tutorialnya :D

Balas

Kang ismet saya pengen bikin page view untuk simplecart. Mohon beri tutorialnya. Soalnya saya udah copas code yang buat bikin cartnya untuk di page tapi gak muncul....help

Balas

Kalau boleh minta template demonya kang. nuhun

Balas

ootnya mana gan???
gan. request donk. tolong post berikutnya cara bikin toko online pake kurs rupiah dan pakai invoice email. terima kasih sebelumnya.

Balas

klo agar jumlah pembayaran otomatis ngitung sesuai order gimana ya kang ?!

jd misal gini .. harga satuan nya misalkan 5000 .. terus di kolom quantity buyer ngisi 2 jadi otomatis pembayaran yg di lakukan = 10000 .. tp tanpa tombol checkout gitu .. begitu di klik button paypal jumlah nya langsung terakumulasi .

Balas
Komentar ini telah dihapus oleh pengarang.

Minta izin bookmark dulu Kang Ismet. Sangat bermanfaat sekali postingnya.
Dan salam kenal dari FDI :)

Balas

postigan nya keren bang...???

Balas

bro boleh minta file jadinya (buat belajar)kirim emailku imanuel_prince@yahoo.co.id thanks sebelumnya

Balas

Tinggal copy semua ko yang diatas

Balas

akhirnya ketemu juga blog yang bermanfaat kayak gini. ijin bookmark dan praktekin ilmunya ya kang...

Balas

Keren, kalau setelah klik tombol check out biar munculnya halaman rekening kita gmn caranya ya mas?


Agen Resmi Foredi Herbal Oles Tahan Lama -> www.foredisurabaya.net

Balas

Poskan Komentar


×
Chat