Template Responsive Toko Online Shopping Cart Email Invoice

9/15/2013

Adanya beberapa permintaan dari pengunjung setia blog Tukang Toko Online, mengenai template toko online dengan shopping cart yang responsive membuat saya mencari beberapa referensi dari beberapa blogger di luar yang sudah berhasil membuat template dengan fitur tersebut.

Akhirnya pilihan saya jatuhkan pada template blogrstore responsive buatan blogger negeri Jiran Malaysia irsah.com. Dengan beberapa desaian ulang akhirnya template ini bisa juga sampai ke tangan anda setelah saya lakukan beberapa perubahan yang saya rasa perlu untuk disesuaikan dengan pelaku bisnis online lokal. Misalnya perubahan currency dan adanya fitur shipping lokal.

Berikut fitur lengkapnya bisa anda simak langsung di bawah ini, sekalian juga bisa anda lihat live demonya.

Attention ..!! 
Dimohon untuk yang trial Order di Live Demo template ini untuk mengisikan data email yang valid (yang sebenarnya, bukan fake email ) agar script template email di template ini tidak terkena suspend dari pihak hosting dan tetap bisa kita gunakan bersama..
Mohon tidak membuang credit link pada template.

Template Responsive Toko Online Shopping Cart Email Invoice
Nama Template BlogrStore Responsive Modif
Demo Template
Fitur - fully Responsive
- Black Background
- Homepage Grid Style
- Shopping cart
- Rupiah Currency
- Email Invoice Checkout.
- Checkout Form Widget
- 3 Footer Widget
- Different background image in homepage and other pages.
- Shipping cost include in email invoice calculator.
- search box built in.
- 2 header navigation menu.
- Test Responsive Template DISINI
licensed under a Creative Commons Attribution 3.0 Unported License.
Males atau Bingung cara settingnya...? 
Pake JASA TOKO ONLINE 
 dari Tukang Toko Online Saja...

Panduan Setting Template BlogrStore Responsive Modif

Langkah 1 >> Upload Template yang sudah anda download ke Blog Anda. Agar lebih cepat, buka template BlogrStore Responsive Modif di notepad atau notepad++, lalu copy semua scriptnya dan timpakan ke script template HTML Blog Anda. Preview dulu, lalu Save.

Langkah 2 >> Klik untuk menuju ke opsi layout hingga muncul tampilan seperti berikut.


tampilan layout blogrstore template
Keterangan :
1. edit widget tsb. untuk melengkapi menu navigasi paling atas.


top navigation menu
2. edit widget untuk mengisi widget checkout. Copy dan paste script berikut ke dalam widget tsb.
script widget checkout:
<div class='checkout-form'> <form action='' id='contact' method='post'> <fieldset> <label for='firstname'>First Name</label> <input id='first_name' name='firstname' placeholder='First Name' title='Enter your First Name' type='text'/> <label for='lastname'>Last Name</label> <input id='last_name' name='lastname' placeholder='Last Name' title='Enter your Last Name' type='text'/> <label for='email'>Your E-mail</label> <input id='email' name='email' placeholder='Valid e-mail required.' title='Your e-mail address' type='text'/> <div id="emailInfo"> Thank You! Valid Email.</div> <br /> <label for='phone'>Phone @ H/P</label> <input id='phone' name='phone' placeholder='Preferred mobile number' type='text'/> <label for='delivery_address'><b>Your Delivery Location ? </b></label> <select id='deliveryLocation'> <option selected value="Not_Selected" /> - Tarif Pengiriman JNE OKE kota Pilihan - <option value="7000" /> Jakarta Kota - 1 pc Rp 7,000 <option value="Not_Selected" /> --Jawa Barat-- <option value="9000" /> Bandung - 1 pc Rp 9,000 <option value="12000" /> Tasikmalaya - 1 pc Rp 12,000<option value="Not_Selected" /> --Jawa Timur-- <option value="15000" /> Surabaya - 1 pc Rp 15,000 <option value="17000" /> Malang - 1 pc Rp 17,000 <option value="Not_Selected" /> --Jawa Tengah-- <option value="14000" /> Semarang - 1 pc Rp 14,000 <option value="14000" /> Solo - 1 pc Rp 14,000 <option value="Not_Selected" /> --Banten-- <option value="8000" /> Serang - 1 pc Rp 8,000 <option value="Not_Selected" /> --Bali-- <option value="17000" /> Denpasar - 1 pc Rp 17,000 <option value="Not_Selected" /> --Other-- <option value="TBC" /> Others </select> <label for='address'>Delivery Address</label> <textarea id='address' name='address' placeholder='Full address please for prompt delivery, include unit number, street, area, state and country.'/> </textarea> <label for="postcode">Postal Code</label> <input id="postcode" name="postcode" placeholder="Address postal code" type="text" /> <br /> <br /> <label for="message">Your Message</label> <textarea id="comments" name="message" placeholder="Optional"> </textarea> <br /> <a id="sent-order" class="simpleCart_checkout button" href="javascript:;">Send Order</a> <br /> <span class="submitdummy"> <a class="buttondummy" href="#">Send Order</a> </span> <br /> <p style="color: #fff;"> Rincian selengkapnya dikirimkan ke email anda secara otomatis. Kamiberharap anda puas berbelanja di toko kami. Kami akan selalu menunggu kedatangan kembali untuk pengalaman belanja di toko kami selanjutnya. Terima Kasih. </p> <p style="color: #fff;"> Mohon baca keseluruhan <a alt="terms and policy" href="/p/terms-policy.html"><strong>Terms and Policy</strong></a> Kami sebelum anda order. Semua rincian data yang dikirimkan dijaga secara rahasia dan tidak akan dipublikasikan. </p> </fieldset> </form> </div> <!-- End checkout-form -->
Anda bisa mengedit biaya pengiriman dengan asumsi 1 pc adalah 1 kg.

Tombol keranjang belanja
3. edit widget checkout note. Copy dan paste script berikut ke dalam widget tersebut.
Script widget checkout note:
<div class="checkout-details"> <b>Panduan Checkout</b> <ol> <li>Pilih Produk.</li> <li>Lengkapi form data yang sesuai dengan data anda yang valid untuk mempercepat proses order dan pengiriman. Semua data yang dikirim dijaga secara rahasia sesuai dengan kebijakan Toko Kami. </li> <li>Kirimkan (Send) order Anda. </li> <li>Sebuah e-mail otomatis akan dikirimkan ke alamat email anda sebagai pemberitahuan (periksa di INBOX atau Folder SPAM). </li> <li>Anda bisa menemukan rincian order dan metode pembayaran yang bisa membantu memilih sesuai dengan preferensi anda. </li> </ol> <b>Mitra Pembayaran Kami :</b> <ol> <li>Bank BCA (Bank Transfer) </li> <li>PAYPAL </li> <li>Google Wallet </li> <li>Bank Mandiri (Bank Transfer) </li> <li>Bank BNI (Bank Transfer)</li> <li>Bank BRI (Bank Transfer) </li> </ol> <b>Mitra Kurir Toko Kami :</b> <ol> <li><b>JNE - </b>Kurir JNE. </li> <li><b>Tiki - </b>Titipan Kilat. </li> <li><b>POS Ind. - </b>POS Indonesia. </li> </ol> </div> <!-- End checkout-details -->
Isi kalimat bisa anda edit sendiri.

Hasilnya dari widget checkout akan terlihat seperti gambar di bawah ini jika icon keranjang di klik.

widget checkout

4. Widget Header bisa anda edit untuk mengganti judul Toko Anda.
5. Sedangkan widget label di bawahnya akan secara otomatis membentuk menu navigasi horisontal, seperti contoh gambar berikut ini.
menu navigasi label

6. Edit widget icon display dan copy paste script berikut ke dalamnya.
Script Icon Display :
<div class="ico-wrapper"> <!-- 1st icon --> <div class="ico secured"> <span class="ico-text"> <b>SECURE</b><br /> Checkout </span> </div> <!-- 2nd icon --> <div class="ico range"> <span class="ico-text"> <b>PAYMENT</b><br /> Safe & Secure</span> </div> <!-- 3rd icon --> <div class="ico quality"> <span class="ico-text"> <b>MOBILE</b><br /> Ready Accessed </span> </div> <!-- 4th icon --> <div class="ico delivery"> <span class="ico-text"> <b>SHIPPING</b><br /> Trust Courier</span></div> <div class="clear"> </div> </div> <!-- End wrapper -->
Hasilnya akan nampak seperti ini :
icon display

7. Edit widget Feature Products dan masukan script berikut ke dalamnya.
Script Feature Products:
<script> var bsrpg_thumbSize = 420; var bsrpg_showTitle = false; </script> <script src="/feeds/posts/summary/-/Produk?max-results=2&alt=json-in-script&callback=bsrpGallery"></script>
Ganti kata Produk dengan label yang ingin anda tampilkan di feature blog anda, hasilnya akan nampak seperti berikut ini :
feature products

8. Widget Hot Item ini adalah Widget Popular yang hanya tampil di laman statis. Penampakannya seperti berikut ini.
widget hot item

9. Widget HTML/javascript ini bisa anda isi terserah anda.
10. Edit Widget  Produk Promo dan masukkan script berikut ini ke dalamnya.
Script Produk Promo:
<script> var bsrpg_thumbSize = 200; var bsrpg_showTitle = false; </script> <script src="/feeds/posts/summary/-/Promo?max-results=5&alt=json-in-script&callback=bsrpGallery"></script>

Ganti kata Produk dengan label yang ingin anda tampilkan di feature blog anda, hasilnya akan nampak seperti berikut ini :
promo produk

11. Edit Widget Top Commentors dan masukkan script berikut.
Script widget Top Commentor:
<script style='text/javascript' src='https://googledrive.com/host/0B7xtgq8ABLLWM1Rob2Iycnp4aU0'></script><script style='text/javascript'>var numposts = 2;var showcommentdate = false;var showposttitle = true;var numchars = 100;</script><script src='http://bloggerstoreresponsivemodif.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments'></script>
12. Widget bisa anda edit tampilannya menjadi cloud atau lainnya sesuai keinginan
13. Edit Widget Newsletter dan masukkan kode script berikut :
Script widget newsletter:
<form action="http://feedburner.google.com/fb/a/mailverify" id="emailForm" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=TemplateBloggerStoreResponsiveModif', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input class="emailText" name="email" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" type="text" value="Insert E-mail Here" /><input name="uri" type="hidden" value="TemplateBloggerStoreResponsiveModif" /><input name="loc" type="hidden" value="en_US" /><input class="emailButton" type="submit" value="Subscribe" /> </form>
Anda harus mengaktifkan dulu feed untuk email subscribe di feed burner, lalu ganti TemplateBloggerStoreResponsiveModif dengan ID feed burner blog anda.

Tampilan dari 11,12 dan 13 adalah seperti ini.
widget footer

Langkah 3 >> Entry data shopping cart langsung menuju ke template >> edit HTML, cari kode berikut ini:
UPDATE !!! : adanya update dari PHP 5.4 ke PHP 5.5 dari server hosting, membuat ada sedikit perubahan editing di setting templatenya dengan membuang / menghapus http: dari script di bawah :
  data.shop_name = "Template medical Modif herbal";
  data.shop_url = "http://demo-medicalmodifnew.blogspot.com/";
  data.shop_thankyou = "http://demo-medicalmodifnew.blogspot.com/p/success.html";
  data.shop_sendFail = "http://demo-medicalmodifnew.blogspot.com/p/error.html";
dan hasilnya nampak seperti panduan berikut :
  // Customize URL, links and Blogshop name
  data.shop_name = "Template Blogger Store Responsive Modif";
  data.shop_url = "//bloggerstoreresponsivemodif.blogspot.com/";
  data.shop_thankyou = "//bloggerstoreresponsivemodif.blogspot.com/p/success.html";
  data.shop_sendFail = "//bloggerstoreresponsivemodif.blogspot.com/p/error.html";
  data.shop_email = "bisnis.aira@gmail.com";
  // Currency to display in email invoice
  data.shop_currency = "Rp&nbsp;";
  // Customize blogshop business preferences. Leave " - " (dash) if not required
  data.shop_bizname = "Template Blogger Store Responsive Modif";
  data.shop_bizaddress = "Kuala Lumpur, Malaysia";
  data.shop_bizphone1 = "024-361 8321";
  data.shop_bizphone2 = "024-361 8321";
  data.shop_bizphone3 = "024-361 8321";
  // Customize blogshop banking preferences. Leave " - " (dash) if not required
  data.bank1 = "Bank BCA";
  data.bank1_acc_no = "1234 1234 1111 22";
  data.bank1_acc_name = "John Doe";

  data.bank2 = "Bank Mandiri";
  data.bank2_acc_no = "1234 1234 1111 22";
  data.bank2_acc_name = "Jane Doe";
  data.bank3 = "Bank BNI";
  data.bank3_acc_no = "1234 1234 1111 22";
  data.bank3_acc_name = "John Doe";
  // Customize blogshop additional notes. Leave " - " (dash) if not required
  // Additional notes to include in automated e-mail
  data.note1 = "Our PAYPAL secured gateway at http://www.your_PAYPAL_secured_link.com";
  data.note_detail1 = "Our Google Wallet secured payment gateway at http://www.your_GOOGLEWallet_secured_link.com";
  data.note2 = "Altenative Our merchant KlikBCA at:";
  data.note_detail2 = "http://www.klikBCA.com";
Ganti kata-kata yang berwarna biru dengan data anda sendiri.
Preview, lalu Save Template anda.
Invoice email

Langkah 4 >> Entry Post Template, masuk ke setting >> post dan komentar edit add post template, masukkan script berikut ini:
Script Post Template:
<div class="product-image"> <table border="1" class="store-image"><tbody> <tr> <th class="thumb_image" id="thumb"><div class="separator" style="clear: both; text-align: center;"> <a href="http://3.bp.blogspot.com/-eU0B-bf5jqE/UWJLS8vk2RI/AAAAAAAAFiQ/IeuAhEbbOGw/s1600/SyaifulBaharim.com1.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://3.bp.blogspot.com/-eU0B-bf5jqE/UWJLS8vk2RI/AAAAAAAAFiQ/IeuAhEbbOGw/s320/SyaifulBaharim.com1.jpeg" width="320" /></a></div> </th> </tr> </tbody></table> </div> <div class="product-details"> <table border="1" class="store-items"> <tbody> <tr> <td class="item_name"><h2> Add Your Product Name Goes Here 1</h2> </td> </tr> <tr> <td class="item_price">RM200.50</td> </tr> <tr> <td class="add_cart"><a class="item_add" href="javascript:;">Add to Cart</a> </td> </tr> <tr> <td class="total_quantity">Currently <strong><span class="simpleCart_quantity"></span></strong> item(s) in cart.</td></tr> <tr> <td><strong>Description</strong></td> </tr> <tr> <td class="item_description">Insert your product description here.</td> </tr> <tr> <td><strong>Delivery</strong></td> </tr> <tr> <td class="item_delivery">Insert delivery details here.</td> </tr> </tbody></table> <br /> <strong>More Images:-</strong><br /> <table border="1" class="store-imagesMore"><tbody> <tr> <td class="prettyPhoto"><div class="separator" style="clear: both; text-align: center;"> <a href="http://3.bp.blogspot.com/-gW-SzgoJ6pg/UWB6HH3cGxI/AAAAAAAAFco/POMeuHBJjdo/s1600/online-payment-gateway-th.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="161" src="http://2.bp.blogspot.com/-O-ykRe1bMOc/UV-70Dzkh5I/AAAAAAAAFbg/mceiiMid-XE/s320/_notavailable.jpg" width="200" /></a></div> </td> <td class="prettyPhoto"><a href="http://3.bp.blogspot.com/-gW-SzgoJ6pg/UWB6HH3cGxI/AAAAAAAAFco/POMeuHBJjdo/s1600/online-payment-gateway-th.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="161" src="http://2.bp.blogspot.com/-O-ykRe1bMOc/UV-70Dzkh5I/AAAAAAAAFbg/mceiiMid-XE/s320/_notavailable.jpg" width="200" /></a> </td> <td class="prettyPhoto"><div class="separator" style="clear: both; text-align: center;"> <a href="http://4.bp.blogspot.com/-a5D8iffYLdQ/UWB7MRJXgII/AAAAAAAAFcw/6pgxPAd8Auw/s1600/simpleCart-logo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="160" src="http://2.bp.blogspot.com/-O-ykRe1bMOc/UV-70Dzkh5I/AAAAAAAAFbg/mceiiMid-XE/s320/_notavailable.jpg" width="200" /></a></div> </td> <td class="prettyPhoto"><a href="http://3.bp.blogspot.com/-gW-SzgoJ6pg/UWB6HH3cGxI/AAAAAAAAFco/POMeuHBJjdo/s1600/online-payment-gateway-th.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="161" src="http://2.bp.blogspot.com/-O-ykRe1bMOc/UV-70Dzkh5I/AAAAAAAAFbg/mceiiMid-XE/s320/_notavailable.jpg" width="200" /></a> </td> </tr> </tbody></table> </div>
Tampilan pada saat membuat entry post baru adalah seperti ini.

create post

Langkah 5 >> Buat sebuah laman (laman >> tambah laman) dengan Judul Success. Pastikan hasil url nya adalah berikut :
namablog.blogspot.com/p/success.html
halaman success

Selesai, Mudah-mudahan ga ada yang kelewat..


Update :


Adanya pembaharuan file chekpout.php dari email invoice, maka mohon update untuk yang sudah mengunduh dan menggunakan Template ini sebelumnya. berikut panduan updatenya:
1. Masuk ke Template >> klik Edit HTML >> cari URL berikut :
http://www.irsah.com/phpmail/checkout.php
2. Lalu ganti dengan Url berikut ini:
http://www.irsah.com/phpmail/checkout-01.php
3. Kemudian Simpan Template

Selamat mencoba.
Semoga bermanfaat..

All posts here about online store, tips, tricks, SEO, Store Service, store builder with Blogspot, Wordpress or Opencart.
Contact me if You need help or more question about service. Enjoy reading.....

Artikel Terkait

Previous
Next Post »

26 komentar

Write komentar
Al-Faqih Shop
AUTHOR
22 April 2014 20.12 delete

gan koq Home, Cara Order, Terms & Policy sama label baju Cowok, Cewek, Gaun, Kaos, Produk dan promo ga muncul yah?
ada yg kurangkah?

Reply
avatar
23 April 2014 13.22 delete

coba deh baca lagi panduannya pelan2, biasanya ada yang kelewat itu.. :d

Reply
avatar
cah bagos
AUTHOR
30 April 2014 23.31 delete

untuk mengganti mata uang RM ke RP pada cart checkout carannya gmn???

Reply
avatar
1 Mei 2014 22.03 delete

Itu shop cartnya udah ane ganti rupiah gan :d

Reply
avatar
Kosasih nkos
AUTHOR
6 Mei 2014 14.32 delete

setelah klik SEND ORDER koq malah ngelink ke http://www.irsah.com/phpmail/checkout.php, bagaiman ya

Reply
avatar
10 Mei 2014 17.33 delete

Gan, kalo misalnya mau ditambahin slideshow bisa nggak ya?

Reply
avatar
1 Januari 2015 20.55 delete

mas punya tutorial buat buat badge (Produk terbaru,limited,habis) Terima kasih

Reply
avatar
Area Muda
AUTHOR
5 Mei 2015 20.35 delete

gan, ko ADD TO CART ane gak mau ya

Reply
avatar
6 Mei 2015 08.21 delete

baca lagi panduannya pelan-pelan.

Reply
avatar
Syuaul Amin
AUTHOR
6 Mei 2015 13.14 delete

Gan, kok saat ke checkout-01.php nya itu selalu error ya

Reply
avatar
15 Mei 2015 19.58 delete

yang diproduk promo dan feat produk itu maksudnya masukan label apa ya ? saya kurang paham nih :( untuk smuanya sudah cocok..

Reply
avatar
23 Mei 2015 11.15 delete

Makasih banyak gan, ane sekarang pake nih. Nice tutorial (y)

Reply
avatar
PC SHOP
AUTHOR
31 Mei 2015 20.40 delete

saat send order emailnya kok tidak terkirim ya??

Reply
avatar
1 Juni 2015 08.01 delete

Baca lagi panduannya pelan-pelan, khususnya di bagian edit data script invoicenya emailnya, di html template.

Reply
avatar
19 Juni 2015 10.36 delete

terima kasih. semoga diberi ganjaran dan keberkahan di bulan ramadhan ini. btw,..bisa ganti background gak misalnya warna pinky pinky gitu...

Reply
avatar
2 Juli 2015 13.55 delete

kenapa setelah sy pakai, homenya koq ga ada ya, sehingga keranjangnya jadi bergeser ke kiri... mohon pencerahannya

Reply
avatar
2 Juli 2015 14.11 delete

baca lagi panduannya pelan-pelan

Reply
avatar
2 Juli 2015 14.34 delete

sdh beres kang... oya, tapi ada masalah lagi, kenapa tampilannya saat dibuka lewat mobile, gambarnya jadi jelek, g ada framenya... masalahnya kenapa ya? tidak seperti demo dalam blog ini... mohon pencerahannya

Reply
avatar
28 Juli 2015 11.31 delete

Sama saya juga gk muncul Home, Cara order, Terms & Policy, kalo label sama promo sudah muncul

Reply
avatar
Junaedi nedi
AUTHOR
21 Agustus 2015 19.47 delete

Gan punya ane udah jadi kereennnnn,
tapi untuk jasa pengiriman gak bisa ya...?
and email pesanan cuma dikirim ke pelanggan aja ya, penjual gak ada email notifikasi....?
thanks......
minta petunjuknya gan....

Reply
avatar
Junaedi nedi
AUTHOR
21 Agustus 2015 19.54 delete

Ups sory gan udah bisa semua, kecuali ongkirnya, gak bisa langsung masuk di invoice, gimana caranya gan ???
makasih banyak gan...
suksesss

Reply
avatar
23 Agustus 2015 06.49 delete

waiting also :) [bit.ly/frmzasp]

Reply
avatar
16 September 2015 07.10 delete

koq menu navigasinya ga muncul yah?

Reply
avatar
Safruz Zamal
AUTHOR
16 Januari 2016 06.55 delete

Mantap... Udah responsive... :-bd

Reply
avatar
Tri Wardoyo
AUTHOR
22 Januari 2016 13.53 delete

Bang admin bagi tutor dong email:handsomez4ever@gmail.com .gimana tutor checkout form ke hosting lalu dari hosting di kirim kembali emailnya..

Reply
avatar

#/ Dilarang melakukan SPAM.
#/ Dilarang Komentar mengandung Link/URL di kolom komentar
#/ Dilarang Komentar SARA dan Makian
#/ Dilarang ngiklan
Melanggar ketentuan di atas, komentar langsung dihapus..!!!
Emoticon