22.9.14

Cara Membuat Tombol Checkout Atau Kotak Shopping Chart

Yap, tutorial kali ini saya akan coba persembahkan sebuah cara tentang membuat tombol Cekout, yang mana tombol ini sangat berguna sekali keberadaannya untuk sebuah toko online. Anggap saja ini juga sebagai pelengkap tutorial terdahulu saya tentang cara membuat form pemesanan barang serta tentang cara mengaktifkan email notifikasi pembelian barang dalam sebuah toko online.

Cara Membuat Tombol Checkout Atau Kotak Shopping Chart
Harapan saya semoga hasilnya tidak terlalu mengecewakan, karena bagaimanapun jika dibandingkan dengan tombol cekout yang berada dalam sebuah web toko online profesional ya pastinya akan sangat berbeda dari segi tampilannya. Namun jika dari segi manfaat saya bisa pastikan tidak akan jauh berbeda dari yang berbayar tersebut. Baiklah, tanpa berpanjang lebar lagi berikut adalah tata cara pembuatannya.

Login kedalam dasbor blog, pilih 'template' lalu pilih 'edit HTML'. Cari kode yang mirip-mirip seperti ini dalam template: <div id='sidebar-wrapper'>
Jika sudah menemukannya langsung saja copy paste kode dibawah ini dan simpan dibawah <div id='sidebar-wrapper'>

<!-- Shopping Cart Starts -->
<div id="add-to-cart-widget">
<h2>
Shopping Cart</h2>
<div class="simpleCart_items">
<div id="cartTotal">
(Klik 'Checkout' untuk memproses pemesanan unit)<b><span class="simpleCart_total"></span></b></div>
<div class="cartbuttons">
<a class="simpleCart_empty" href="javascript:;">Empty Cart</a>
<a class="simpleCart_checkout" href="javascript">Checkout</a></div>
</div>
<!-- Shopping Cart Ends -->

Harap diperhatikan pada bagian kode yang berwarna merah diatas, tugas anda hanyalah mengganti dengan url form pemesanan barang yang sebelumnya sudah anda buat dengan menggunakan 'Google drive'. Hingga urutan kode tersebut diatas berubah menjadi seperti berikut.


<!-- Shopping Cart Starts -->
<div id="add-to-cart-widget">
<h2>
Shopping Cart</h2>
<div class="simpleCart_items">
<div id="cartTotal">
(Klik 'Checkout' untuk memproses pemesanan unit)<b><span class="simpleCart_total"></span></b></div>
<div class="cartbuttons">
<a class="simpleCart_empty" href="javascript:;">Empty Cart</a>
<a class="simpleCart_checkout" href="https://docs.google.com/forms/d/1GFLJdoFrmivrG6R3UmNyWm2LxTRPNT9bMU/viewform?usp=send_form">Checkout</a></div>
</div>
<!-- Shopping Cart Ends -->

Tidak lupa juga anda harus menjalankan pengaturan 'pemberitahuan email' dengan menggunakan jasa layanan Google spreadsheet, agar begitu terjadi sebuah transaksi atau pemesanan, anda akan langsung menerima pemberitahuan detik itu juga.

Demikian saja cara membuat tombol Checkout atau kotak Shopping Chart , anda bisa leluasa menempatkan kode diatas, entah itu untuk disebuah laman tunggal, atau tersimpan dalam sidebar toko online Anda. Semuanya sudah selesai, dan selamat menikmati hari Anda.




→ About the author

Moch Adnan adalah Admin Blog yang mempunyai ketertarikan dengan Dunia Blogging,kamu bisa Menemukan saya dan memfollow saya di Google + Twitter Facebook


Terima Kasih Telah Membaca Artikel Cara Membuat Tombol Checkout Atau Kotak Shopping Chart . Jika Anda tertarik dengan artikel seperti ini, silahkan untuk berlangganan artikel Gratis dengan cara mengetikkan alamat e-mail anda pada kotak berlangganan berikut:
Subscribe via Email

13 komentar

boleh lihat hasil demonya g mas?

demonya ada di laman 'Lapak' dlm blog ini.
thxs mas Arbi tuk kunjungannya

wah, gak paham kang.... mohon pencerahannya kang...
sy punya blog ecek2, sdh ada cartnya, namun sy kesulitan dalam membuat laporan ke email... sy pakai jasa 123, eh malah yg masuk ke email cuma data diri sj, tanpa daftar pembeliannya...
blog sy:pesannow.blogspot.com...
mohon solusinya kang... :)

Terimakasih kunjungannya, sebagai langkah awal sobat harus buat terlebih dulu form pemesanan, setelah rampung dengan pembuatan form pemesanan kemudian baru ke tahap ini yaitu pembuatan tombol Checkout. semoga dapat terbantu.

aku ngga menemukan kodenya yang mau ditambahkan html dibawahnya mas di edit html. terus gmn ya, taruh dimana ? udah search. kl nyari manual pake mata yang mirip2 sampai cape ngga nemu2 mas

Terimakasih kunjungannya....
Iya sobb emang kadang" kode itu beda" ditiap template, diatas itu intinya kan buat disimpen di sidebar, nha kl ngak ketemu jg coba simpan di gadget HTML. Masuk dasbor blog, Tata letak, Add a gadget, HTM/javascript.
Semoga terbantu.

Susah juga soal code html,css atau java script nih apa lagi pemula seperti saya...gan kalo untuk menampilkan shoping card di blog wordpress caranya sama juga ya kayak di atas.
https://semestajawa.wordpress.com

Terima kasih kunjunganya sobat Cundoko.
Di wordpress sendiri buat nampilin shoping chart bisa dg menginstall plugin nya.

Terima kasih kunjunganya sobat Cundoko.
Di wordpress sendiri buat nampilin shoping chart bisa dg menginstall plugin nya.

slamat sore terimakasih tutorialnya sangat bermanfaat saya sudah coba, nah setelah saya coba dan saya buat form pemesanan juga, munculpertanyaan nah gimana bisa masuk cart kan tidak ada tombol beli nya.mohon tuliskan juga tutorial untuk membuat tombol beli supaya bisa masuk ke cart dan checkout. terimakasih

Kalau dipasang buat template endahshopv2 apakah bisa?

Terimakasih kunjungannya...
maaf untuk pemasangan ke template tsb silahkan dicoba aja.

apakah kode tersebut valid dengan website bergenre osclass?

Silahkan tinggalkan komentarnya
Mohon untuk tidak memasukkan link hidup dalam berkomentar