Penulis: Moch Adnan dipublikasikan: 22 September 2014
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
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.

Cara Membuat Tombol Checkout Atau Kotak Shopping Chart
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.