Langsung ke konten utama

Template Shopping Cart dengan Invoice Email

www.domainesia.com

Baca Juga

Akhirnya, kesampaian juga Tukang Toko Online memodifikasi blogger template dengan melengkapi shopping cartnya dengan invoice email dari email Checkout.
Script shoppingcart dari template ini saya ambil dari script shoppingcartnya maskolis.com (terima kasih pada mas kolis - blogger favorit saya), yang sudah bersedia membaginya dengan gratis setelah melakukan beberapa riset dan modifikasi script simplecartnya the wojo.
Ada 2 template yang saya bagikan disini, yaitu template mbledhos dengan background gelap dan biru muda, serta template mbledhos ijo dengan background putih dan hijau muda.
Cukup basa-basinya, langsung aja silakan cek live demo dan link downloadnya serta juga panduan setting templatenya di bawah ini.


Nama Template template Mbledhos
Demo Template
Fitur - blogger template free
- Label Slide Show
- Shopping cart
- IDR Currency
- grid Style
- Zoom post image, etc

Home template mbledhos ijo




Panduan Setting Template

Cara kerja dari template ini adalah, segera setelah pembeli melakukan checkout dari shoppingcart (keranjang belanja), akan muncul popup form seperti ini:
form data pembeli
form data pembeli
Ketika pengunjung mengklik OK, akan diteruskan denagn form isian selanjutnya, mulai dari nama, email, alamat dan no telpon.
Jika sudah lengkap, pembeli akan diarahkan ke halaman terima kasih seperti ini :
halaman terima kasih

Selanjutnya, secara otomatis, email anda akan menemrima pemberitahuan seperti ini :
notifikasi order email
notifikasi order di email anda
Sedangkan dari pihak pengunjung akan mendapatkan kiriman email invoice dengan format seperti berikut ini:
Invoice pembelian di email pembeli
Invoice pembelian di email pembeli
Finalisasi tinggal anda lakukan setelah anda menerima data lengkap dari notifikasi pembeli di toko online anda.
Cukup simpel bukan..

Setting Widget


Saya asumsikan, template sudah anda upload di blog anda.

1. Merubah header logo di widget header
Masuk ke menu layout/tata letak >> (cari widget header) klik edit >> Upload logo toko anda (usahakan ukurannya width x height = 250 x 80 pixel) >> simpan/save, lihat setingan seperti gambar di bawah.
upload logo
upload logo
2. Setting Menu Navigasi
menu navigasi
Masih di menu layout/tata letak, cari widget HTML/Javascript (widget di bawah widget header), klik edit..
Lalu copy script di bawah ini ke dalam dalam widget HTML tersebut:

<ul> <li><a href="http://alamatbloganda.blogspot.com/">Home</a></li> <li><a href="#">Kontak Kami</a></li> <li><a href="#">Cara Order</a></li> </ul>
 Keterangan:
- Ganti tulisan warna kuning dengan alamat Blog Anda
- Ganti karakter # berwarna biru dengan alamat link anda
- Ganti tulisan warna merah dengan keterangan dari link.

Anda juga bisa menambahkan menu lagi dengan menambahkan script berikut :
<li><a href="#">keterangan</a></li>
Sebelum kode </ul>
Kemudian save widget tersebut.

3. Mengaktifkan Slide Show
Klik edit pada widget dengan judul feature content slider di bawah widget navigasi (langkah 2).
Ketikkan label yang ingin anda tampilkan pada slide anda (perhatikan penulisan huruf besar dan huruf kecil pada label)
Save widget dan lihat hasilnya.

4.Memasang widget recent post (produk terbaru)
Hapus / delete dulu widget recent post, lalu add widget dan cari widget recent post buatan blogger pluggins.
Ikuti petunjuk settingnya seperti gambar di bawah ini :
setting widget recent post
setting widget recent post

5. Setting Widget Popular Post (Most View Product)
Klik edit pada widget popular, ikuti setingnya seperti di bawah ini :
setting widget popular post
setting widget popular post

Setting Template

1. Mengedit data toko online Anda
Masuk ke menu template>>edit HTML, cari script berikut ini :

simpleCart.email = 'bisnis.aira@gmail.com';
simpleCart.checkoutTo = Email;
simpleCart.currency = IDR;
simpleCart.urlWebsite = 'http://templatembledhos.blogspot.com/';
simpleCart.alamatPemilik = 'Alamat Anda ';
simpleCart.noHP = '081 xxxx xxxx';
simpleCart.urlFacebook = 'http://www.facebook.com/pages/your facebook';
simpleCart.urlTwitter = 'https://twitter.com/your twitter';
simpleCart.akunbank1 = 'Bank A';
simpleCart.norek1 = 'No Rekening Bank A';
simpleCart.namarek1 = 'Nama Pemilik Rekening Bank A';
simpleCart.akunbank2 = 'Bank B';
simpleCart.norek2 = 'No Rekening Bank B';
simpleCart.namarek2 = 'Nama Pemilik Rekening Bank B';
simpleCart.akunbank3 = 'Bank C';
simpleCart.norek3 = 'No Rekening Bank C';
simpleCart.namarek3 = 'Nama Pemilik Rekening Bank C';
simpleCart.akunbank4 = 'Bank D';
simpleCart.norek4 = 'No Rekening Bank D';
simpleCart.namarek4 = 'Nama Pemilik Rekening Bank D';
simpleCart.akunbank5 = 'Bank E';
simpleCart.norek5 = 'No Rekening Bank E';
simpleCart.namarek5 = 'Nama Pemilik Rekening Bank D';
simpleCart.akunbank6 = 'Bank F';
simpleCart.norek6 = 'No Rekening Bank F';
simpleCart.namarek6 = 'Nama Pemilik Rekening Bank D';
simpleCart.urlReferrer = 'http://templatembledhos.blogspot.com/';
simpleCart.businessName = 'contoh toko online';
simpleCart.formatsmsKonfirmasi= '(Nama, Email, Jumlah transfer, Bank Tujuan Transfer, Tanggal transfer)';
simpleCart.contohformatsmsKonfirmasi= 'namalengkap, emailanda@gmail.com, Rp 1.500.000, BCA, 12 Desember 2012 ';
simpleCart.catatanTambahanInvoice= '(Untuk proses lebih cepat, silakan konfirmasi via SMS)';
simpleCart.cartHeaders = ['name','thumb_image','Quantity_input','increment', 'decrement','Total'];
Tulisan warna biru di atas adalah yang harus anda ganti dan sesuaikan dengan data anda.

2. Mengganti Banner 729x90 pada bagian header.
Cari kode script berikut :
<a href="http://tesmembuattemplate.blogspot.com/" target="_blank"><img src="http://i1093.photobucket.com/albums/i440/hugetarifianto/728.gif" alt="Photobucket" border="0"></a>
Keterangan :
  • Alamat URL warna merah anda ganti dengan link yang akan anda tuju saat gambar diklik
  • Alamat URL warna biru anda ganti dengan alamat URL gambar anda

Selanjutnya preview dulu template, jika sudah tidak ada masalah, Save Template

3. Membuat halaman Terima Kasih
Langkah terakhir adalah membuat halmaan terimakasih
buka menu laman/page, buat halaman baru dengan Judul Terima Kasih
Kemudian pada mode HTML paste script berikut ke dalamnya:

<div dir="ltr" style="text-align: left;" trbidi="on"> <b>Terima Kasih atas order Anda</b> pada <b><span class="simpleCart_quantity">0</span></b> produk dengan jumlah <b><span class="simpleCart_total">Rp&nbsp;0.00</span></b> dari Toko Online kami. E-mail Anda akan menerima Invoice pemesanan dari Kami sesuai dengan pesanan yang sudah anda lakukan sebelumnya. Anda bisa memeriksa e-mail invoice dari toko kami lalu ikuti prosedur order secara detail, berupa cara pembayaran, pengiriman dan beberapa infromasi lainnya. Anda juga bisa mengontak kami dengan langsung membalas e-mail tersebut atau melalui info kontak lainnya yang tertera pada e-mail Kami.<br /> <br /> Total order yang harus Anda bayarkan melalui transfer Bank adalah sejumlah <b><span class="simpleCart_total">Rp&nbsp;0.00</span></b> diluar biaya ekspedisi/kirim. Biaya kirim bisa anda cek dari<b> <a href="http://www.jne.co.id/" target="_blank">SINI</a>. </b><br /> <br /> Terima kasih, atas kepercayaan dan kesediaan Anda berbelanja di Toko Online Kami dan Kami tunggu kedatangan Anda kembali.</div>
Anda bisa mengedit beberapa kalimat di atas sesuai  dengan keinginan anda. lalu publish page tersebut.
Pastikan bahwa alamat URL halaman terima kasih ini adalah :
http://namatokoanda.blogspot.com/p/terima-kasih.html
4. Memasang Entry Post Template

Copy kode script di bawah ini dan letakkan pada bagian menu Setting >> Posts anda Comments >> menuju ke opsi Post (klik edit) pada blog anda

<table border="1" style="width: 660px;">
<tbody>
<tr>
  <th class="item_thumb" id="thumb" width="45%">Pasang Gambar Produk Anda DISINI</th>
  <td><input class="item_add" type="button" value="Add to Cart" /></td>
</tr>
<tr>
  <th><b>Kode Barang</b></th>
  <td class="item_name">Kode produk taruh disini!</td>
</tr>
<tr>
  <th><b>Harga</b></th>
  <td class="item_price">Rp 99,000</td>
 </tr>
<tr>
  <th><b>Keterangan</b></th>
  <td class="item_Description">Fitur produk!</td>
 </tr>
<tr>
  <th><b>Stok Barang</b></th>
  <td>Stok barang anda!</td>
</tr>
<tr>
  <th><b>Gambar Tambahan</b></th>
  <td>tempatkan gambar produk tambahan di sini</td>
</tr>
</tbody>
</table>
Semoga bermanfaat
Buka Komentar

Komentar

Budi Majid mengatakan…
Selamat Mas Teguh, ini akan memudahkan pengelolaan toko online blogspot. Ane share deh di sosmed ya..:)
Tukang Toko Online mengatakan…
Trims Pak Budi...
Heri Suryatno mengatakan…
sebelum nya terimakasih atas templatenya gan.
gan ini gmana ya??
1.post terimakasih error tidak sesuai dengan alam url?(gimana cara ngerubah url tersebut.
2. slide tidak berfungsi?

cendol sent via juragan roko
buat review.
http://acsorisshop.blogspot.com//

Tukang Toko Online mengatakan…
@heri SUryatno:
1. apakah alamatnya sudah benar (pastikan alamat url adalah: namabloganda.blogspot.com/p/terima-kasih.html). Agar alamat sesuai, saat bikin page Isi judul page terlebih dahulu (Terima Kasih), Jangan isi post dulu.
2. SIlakan baca lagi langkah 3. mengaktifkan slide show. apakah widget sudah Anda isi dengan nama label yang ingin anda tampilkan..? Misal label Sepatu, tuliskan Sepatu (perhatikan huruf besar dan kecilnya)juga pada widget slidernya.
azkaa mengatakan…
terima kasih sob
Anonim mengatakan…
mas, aku udah bikin blog pake template ini yg belum di modif. dan masalahnya klasik: masalah checkout. saya sampai bikin strategi bikin form 123contact form buat order formnya. tapi kesannya, konsumen malah proses dua kali. template mas jawaban yang saya cari. cocok.
cuman ada beberapa yg mengganjal di selera saya gan, he..
1. tombol add chart sama harganya kok menutupi produk? bisa gak gan yg ini jgn di modif, tombolnya dibawahnya ja. caranya gimana ya?
2. template ini kan di modif warnanya ya. kalo gak usah di modif gimana gan, cara ngembaliinnya?
3. yg di versi saya, (template yg belum di modif), list yang ada di bawah page adalah "tag/label produk". kesannya rapi buat list produk. kalo buat yg ini gimana gan caranya, pake template mas, tapi "tag" itu tetap ada?
yg terpenting sih nomor satu gan. (seharian belum kelar nih gan, hee)
makasih ya gan.
Anonim mengatakan…
Masbro...saya coba templatenya...waktu checkout knp tidak ada notifikasi email yang masuk?..baik ke pembeli dan pemiliknya
Tukang Toko Online mengatakan…
@anonim: kalau mau edit warna dll, coba otak-atik script CSSnya Gan..
utk notifikasi email, coba periksa lagi langkah-langkah di atas, apakah data Anda (termasuk email) sudah dimasukkan dengan benar..?
elzhstore mengatakan…
thx ya gan
afriyan mengatakan…
mantap gan,
saya juga mulai jualan online sekarang, coba cek online shop saya http://pangeranbabyshop.blogspot.com/
Anonim mengatakan…
sebelumnya saya ucapkan terima kasih. saya sudah donlot templatenya,tapi kenapa tombol add to chart nya tidak nongol ya?
mugi laris mengatakan…
masbro
boleh minta template yang masih asli sama bawaannya ga,,?
kalo boleh minta scrip buat bikin invoice nya,,,?
thanx
sukses selalu buat Tukang Toko Online
tukang toko online mengatakan…
@anonim : boleh minta alamat urlnya..?
@mugi laris : Template asli dari Bloggermin (template shopping cart) silakan gugling sendiri.script shopping cart langsung ambil saja dari script template ini..
Vieve Style mengatakan…
maaf mas, saya sudah mengaplikasikan salah satu template yang agan bagi via blog agan. dan sudah sukses terinstal, serta sudah saya kembangkan sesuai dengan gambaran saya sendiri. invoice yang dikirimkan sudah saya edit sehingga tidak mempergunakan invoice milik http.anaknusantara.... blabla... karena ga bisa di custom. oleh karenanya saya memanfaatkan form dari other free source. nah yang jadi masalah saya adalah mengenai setting feature content slider. pada penjelasan anda diatas, hanya akan tampil 1 postingan saja, pertanyaan saya adalah, bagaimanakah caranya agar saya bisa menambahkan produk lagi agar tampil di feature content slider? sebagai tambahan, saya memakai template yang basis nya dari template mbledhos ijo anda ini. terima kasih. salam introduksi mas.
Tukang Toko Online mengatakan…
@vieve style : Slider yang tampil bukan 1 postingan tapi 1 label, jadi kalau dalam 1 label ada lebih dari 1 postingan maka yang akan tampil pada slider maksimal adalah 7 postingan terbaru dari label yang akan anda tampilkan pada slider.
occhim mengatakan…
mas mohon pencerahannya,untuk page "terima Kasih" kalo di ganti ke url lain, itu gmn caranya? terima kasih.
budi mengatakan…
ane sudah membuat halaman:
www.customdomain.blogspot.com/p/terima-kasih.html

akhirnya ane beliin domain dan berubah jadi.
www.customdomain.com/p/terima-kasih.html

ane bermasalah dengan url itu gan. posisi skrng blognya uda dalam keadaan custom domain.

tiap kali selesai checkout yg keluar malah
http://anaknusantara.com/maskolis/www.customdomain.com/p/terima-kasih.html

link ini fungsinya apa, trus ada solusi gmn ya...
http://anaknusantara.com/maskolis/sendjs.php
p sell mengatakan…
kereen... tp gan, kalo mau di tambahin menu dropdown gmn ne?
tlg share ke psel124@gmail.com ya.tq,,

sukses selalu,tukang toko online :)
p sell mengatakan…
ini adalah sesuatu yang kereen,
tp saat nambahin menu navigasi jadi menu drop down saya kesulitan gmn caranya,

tolong pencerahanya ya..
tukang toko online, anda besar
levpc68 mengatakan…
2. Mengganti Banner 729x90 pada bagian header.
Cari kode script berikut :

bla bla nah script ini

Pak teguh script tersebut letaknya di html kah ?
kok tdk ada ya saya search

tolong pencerahanya trmkasih
noor mustofa mengatakan…
slide shownya
conten di tulis di wigdet(kalo satu ada gambarnya), kalo content nya 2(dua) kok ga ada gambarnya gan
mohon pencerahanya gan
noor mustofa mengatakan…
setelah checkout,,,ada tulisan gini>>>We cannot process this transaction because there is a problem with the PayPal email address,,,bla,,,blaa
apanya yang salah,solusinya gan
thanxs
Tukang Toko Online mengatakan…
@noor mustofa: sepertinya case closed ya Gan..
@levpc68 :thx ordernya...
@p sell: anda ambil script darimana..?
noor mustofa mengatakan…
dah solved thanxs gan
templet dari blog ini smua
sambil promosi :)
http://empingjogja.blogspot.com
http://tokojogjakarta.blogspot.com
david fredy mengatakan…
gan, waktu saya coba test blognya itu yang setelah kita masukin email alamat dan bla2 waktu ceck out itu kok gak muncul halaman trima kasihnya... dan di address bar browser itu munculnya gini gan "http://namatokoanda.blogspot.com//p/terima-kasih.html"

ada doubleslash di belakang nama blog
agung taufiq mengatakan…
untuk pasang recent post kok gak bisa iya mzzz eroror atau blogger lagi ganguan
Anonim mengatakan…
Untuk link terima kasihnya berbeda dengan yang docontohkan yang ada di blognya linknya secara otomatis jadinya seperti ini kurang lebih http://namatoko.blogspot.com/p/terima-kasih_123 jadi dibelakangnya ada nomornya, bagaimana solusinya???
kumala ayu mengatakan…
mas cara posting nya gmn...?
aku masih bingung
ronnie alexander mengatakan…
gan, mohon informasinya klo untuk content slider itu gimana cara perbanyaknya yah ?? soalnya cuma keluar maksimal 4 post doang..

ronniealexander - www.kripikkrezi.com
Nisful Qomar A mengatakan…
gan blum kejawab-jawab ni masalah invoice keluarnya paypal g menuju trima kasih halaman trima kasih q dah benar seperti ni

http://bullostore.blogspot.com/p/terima-kasih.html
wahyu aksesoris mengatakan…
great template mastah.. terimakasih telah berbaik hati untuk share template toko online.
setelah ane terapin ke blog ane, kayaknya ada yang mengganjal suhu. di checkout email pembeli disana terdapat informasi bank pada kolom metode pembayaran.
kalo ane cuma pake satu bank gimana gan?dan ingin menghapus 5 bank lainnya

thanks
obat pembesar penis mengatakan…
makaish gan, artikel nya bagus
purnomocepuk shop mengatakan…
makasih mas saya dah menggunakan template hasil karya anda, tapi kok tombol Add to Cart nya gak fungsi Ya? http://www.purnomocepuk-shop.web.id/
TnR OS mengatakan…
mas mau nanya, tntng masalah buat page "Terima Kasih" , gnt urlnya itu dimana ya gan ? apa hrus d gnt d templatenya ? mohon pencerahan mas :D
TnR OS mengatakan…
udah bsa gan :D
Riksan Aryu mengatakan…
makasih gan, sangat membantu untuk membangun blog toko saya..... :)
andros susanto mengatakan…
saya punya kasus yang sama keluar "We cannot process this transaction because there is a problem with the PayPal email address......dst" gimana ngatasinya?
huget arifianto mengatakan…
coba cek lagi panduannya..
syafni mengatakan…
saya juga punya masalah yang sama setelah cek out selalu ke luar http//nusantra....... untuk merobah link url bagaimana ya mohon pencerahanya gan, terimakasih sebelumnya
syafni mengatakan…
Mohon bantuan pencerahan dong untuk merobah link terima kasih di manaya ko selalu nyambung nya ke http//anaknusantara .... terus ya penggantian linknya di manaya makasih sebelumya
Hasminati Jie mengatakan…
mas kok waktu checkout ga muncul notifikasi atau form seperti di gambar ya? link menuju anaknusantara.com/maskolis juga ga muncul..kenapa itu mas? pdhl saya sudah melakukan langkah2 yg diberikan
ismail maulana mengatakan…
kok Method Not Allowed

Error 405

padahal lama udh ada, linknya udh ane ubah sesuai dengan link alamanya, kok muncul gitu gan ?
sekar wijayanti mengatakan…
cara delete recent post pertama dimana gan? di tata letak atau di template HTML edit? untuk mengktifkan tombol Produk terbaru
sekar wijayanti mengatakan…
mohon Bantuan pencerahan saar check out link langsung Method Not Allowed
Error 405, padahal di edit HTML link http://anaknusantara.com/maskolis/sendjs.php sudah saya rubah dengan halaman terimakasih sesuai dimaksud..?
Keren nih templatenya :D

Popular

Gratis Download Template Toko Online Blogspot Responsif Baru dan Keren

Menyongsong hari kemerdekaan RI di tahun ini, Tukang Toko Online juga ingin memberikan hadiah berupa bagi-bagi template toko online blogspot terbaru secara gratis.

Template yang akan dibagikan gratis ini merupakan versi Lite-nya dari Template Toko-01 yang barusan di luncurkan sebelumnya. Meskipun demikian sejumlah fitur utama tetap disertakan pada template ini, sehingga tidak mengurangi fungsi serta kebutuhan utama untuk toko online Anda.

Beberapa fitur wajib seperti, meta tag SEO, payment widget, opsi order, info contact, customer service dll. sudah ada dan siap digunakan pada template ini. Panduan step by stepsetting templatenya tetap akan diberikan meskipun template toko-02 ini dibagikan secara gratis.



Tapi tentu saja, meskipun Anda tidak harus membayar untuk mendapatkan template ini, tetap ada sejumlah syarat yang harus Anda penuhi untuk mendapatkan template ini, seperti halnya jika Anda pernah mengunduh beberapa template gratis di blog ini. Syaratnya cukup mudah dan tidak membera…

2 Template Toko Online Blogspot Gratis Rasa Premium

Untuk me-review Template Toko Online yang pernah didesain ulang Tukang Toko Online, posting kali ini sengaja untuk memberikan sedikit informasi untuk pengunjung setia Tukang Toko Online yang mungkin sempat ketinggalan info mengenai template toko online gratis namun dengan rasa premium.Nah berikut ini adalah 2 template toko online blogspot gratis yang juga memiliki pilihan premium jika anda berniat untuk mendapatkan fitur tambahan yang lebih lengkap. Itulah mengapa ke dua template tersebut be-rasa premium. Anda bisa mengunduhnya secara gratis dari link kedua artikel template tersebut. Jangan lupa meninggalkan komentar berupa saran saran atau apapun demi perbaikan layanan template dari Tukang Toko Online.Berikut ini adalah informasi mengenai ke dua Template Tersebut.


tukutoko THEME
Live DemoDownload Fitur  Super Responsive / mobile firendlyWhatssApp OrderSMS OrderCall OrderHelp Desk widgetHotline button to WhatsApp, SMS & Phone CallSlide MenuRelated Product Postetc.Baca juga :Ngeblog da…

Toko Online Blogspot Super Responsive dengan tukutoko THEME

Template blogspot toko online baru ini dirancang dengan tampilan yang sederhana dan terfokus pada produk yang dijual. Dan yang terpenting adalah sengaja dirancang untuk memfokuskan pada berbagai fitur di tampilan mobilenya. Hal ini untuk menjawab penetrasi akses internet melalui mobile device (smartphone) yang sudah mencapai 80% lebih di Indonesia.Ya, tujuannya adalah untuk menggaet pembeli yang mengakses internet via ponsel karena pasar yang besar tersebut. Otomatis beberapa fitur yang disematkan pada template ini sebisa mungkin fitur-fiturnya juga sudah harus mendukung untuk tujuan tersebut.Sebelum membahas lebih jauh tentang berbagai fitur yang tersemat pada tukutoko THEME ini, sebaiknya Anda memeriksa dulu live demo templatenya, karena difokuskan untuk tampilan yang mobile friendly, Anda bisa mengeceknya melalui ponsel favorit Anda.
Baca juga : 
Template Gratis Download untuk Bisnis Wisata dan Agen TravelNgeblog dan Jualan dengan satu Template Toko Online Gratis ini LIVE DEMODOWNLOAD
© Tukang Toko Online