SimpleCart (js), get some information before checkout

up vote 0 down vote favorite
I've downloaded SimpleCart (js) (http://simplecartjs.com/) and I was able to make an e-mail checkout, but I want to cellect some information from the buyer before checking out.
This is how far I've come:
The form in checkout.php:
<form action="sendjs.php" name="form" method="post">
    <input placeholder="Namn" type="text" name="namn"  value="Namn" id="namn" />
    <input placeholder="Mobilnummer" type="text" name="telefon" value="Telefon" id="telefon" />
<a href="javascript:void(0);" onclick="javascript:Bestall();" class="simpleCart_checkout">
Beställ</a>
</form>
Javascript:
me.emailCheckout = function Bestall() {    

    itemsString = "";
    for( var current in me.items ){ 
        var item = me.items[current];
        itemsString += item.quantity + " st\n" + item.name + "\n Pris: " + item.price + " kr/st \n\n";
    }


    namn += " ";
    telefon += " ";

    me.total += "" + " KR"

    var form = document.createElement("form");
    form.style.display = "none";
    form.method = "POST";
    form.action = "sendjs.php";
    form.acceptCharset = "ISO-8859-1";
    form.appendChild(me.createHiddenElement("jcitems", itemsString));
    form.appendChild(me.createHiddenElement("jctotal", me.total));
    form.appendChild(me.createHiddenElement("namn", namn));
    form.appendChild(me.createHiddenElement("telefon", telefon));
    document.body.appendChild(form);
    form.submit();
    document.form.submit();
    document.body.removeChild(form);
    }

    me.customCheckout = function() {
        return;
    };
sendjs.php:
<?php
    include 'simpleCart.js';

    $to      = 'jennifer.nilsson@hotellgruppen.se';
    $subject = 'Beställning';
    $jcitems = $_POST['jcitems'] .
               " \n SUMMA: " . $_POST['jctotal'] .
               " \n\n Namn: " . $_POST['namn'] .
               " \n Telefon: " . $_POST['telefon'] .

               " \n\n IP: " . $_SERVER['REMOTE_ADDR'] .
               " \n Datum: " . date("Y-m-d") .
               " \n Tid: " . date("H:i:s") ;

    $headers = 'From: Bestallning@Mobil' . "\r\n" .
               'Reply-To: Bestallning@Mobil' . "\r\n" .
               'X-Mailer: PHP/' . phpversion();

    mail($to, $subject, $jcitems, $headers);
    /*Clearing the cart info after succesfull order is made*/
    setcookie ("simpleCart", "", time() - 3600);
    Header('Location: tack.html');

?>
When I get the e-mail it displayed "[object HTMLInputElement]" where the "namn"-value and "telefon"-value were supposed to be displayed, then i googled around and found this:
   <script type="text/javascript" charset="utf-8">
    var namn = <?php echo json_encode($namn); ?>;
    </script>
And I put that code in checkout.php but then it displays "null" instead.
Why doesn't it collect the information from the form? Everything else works great, except the "namn" and "telefon" that I'm trying to collect from the form. Thank you for your help!
EDIT:
Found the answer I think:
namn = document.form.namn.value;
telefon = document.form.telefon.value;
Changed this in the js and it seems to work! Why didn't I think of that before? ;)
21.19

Inilah Template Toko Online Jelek Banget

Kemarin ada yang minta template Johny Sip Deh tapi tampilan warnanya ungu, yah akhirnya meskipun ungu salah satu warna yang saya tidak begitu suka karena dekat dengan pink kesannya feminim, saya kan laki jadi warnanya mesti macho. Saya mau cerita sebentar sebelum lanjut ke template yang mau saya bagikan, sebenarnya saya kalau nulis artikel pakai bahasa baku begini agak susah mesti mikir dua kali, penginnya sih nulis bahasa gaul. Misalnya tidak, nulisnya nggak, nanti jadi entar dan lain-lain, tapi nanti kalau yang datang orang luar mau translate ke bahasa mereka jadi kacau tidak bisa diterjemahkan.

Lanjut, template yang saya bagikan kali ini hanya modifikasi dari template sebelumnya. Setelah kemarin saya membagikan Johny Sip Deh template untuk blog toko online, karena ada beberapa pemakai template dari kaum Hawa yang mungkin agak kurang sreg dengan tampilan warnanya yang hitam seperti pantat penggorengan, apalagi kalau yang dijual adalah baju atau perlengkapan rumah tangga yang sifatnya Girly pasti kurang cocok. Saya akan berikan alternatif warna lain, ada dua jenis warna untuk template kali ini, yaitu Hijau dan Ungu (ungu apa pink ya?).

Template toko online kali ini saya kasih nama Johny Palelu Peang, nama itu saya ambil karena waktu hujan kemarin atap rumah bocor dan dengan sigap saya langsung membetulkan letak genteng yang melorot, tapi apa mau dikata, karena licin saya terpeleset dan terjatuh yang berakibat kepala saya agak peang dikit. Fiturnya sama dengan Johny Sip Deh, dengan tampilan slider yang berbeda dan tambahan fitur kategori produk di bawah postingan. Untuk lebih jelasnya silahkan perhatikan screenschot gambar di bawah ini :

blogger online store


blogger online store


Posting Artikel

Untuk membuat sebuah postingan, perhatikan struktur kode di bawah ini :
<div class="product_image">
<a class="cloud-zoom" href="url-image.jpg" rel="softFocus: true, position:'inside', smoothMove:2"><img border="0" class="item_thumb" src="url-image.jpg" /></a>
<span class="item_price">$00.00</span></div>
<div class="product_describe">
Description your product.............
</div>
Keterangan :
Warna merah : masukkan url gambar produk anda pada kedua kode warna merah diatas.
Warna kuning : harga produk
Warna biru : deskripsi dari produk

Kode diatas adalah kode yang harus anda awali dalam membuat postingan terbaru, dan untuk memudahkan agar Anda tidak berulang kali copy paste kode tersebut sewaktu membuat artikel terbaru, masukkan kode tersebut pada kolom post template. Masuk ke setting, pilih posts and comments >> post template. Klik add, setelah itu masukkan kode diatas pada kotak kosong seperti gambar dibawah, terakhir save setting.

Slider

Slider pada template ini menampilkan postingan terbaru, untuk mengaktifkan slider, masuk ke Layout kemudian pilih kolom kosong diatas Bawah Slider. Masukkan kode ini di dalamnya :


<div id='slider'>
<div id='loopedSlider'>
<div class='container'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
</div>
<a class='previous' href='#'></a>
<a class='next' href='#'></a>
<ul class='pagination'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts0\"><\/script>");
</script>
</ul>
<script type='text/javascript'>
$(function(){


$('#loopedSlider').loopedSlider();
});
</script>
</div>
</div>
Setting Template

Untuk merubah setelan transaksi online pada template ini, cari kode berikut ini pada Edit HTML :

simpleCart.email = &#39;ncmajid@gmail.com&#39;;
simpleCart.checkoutTo = Email;
simpleCart.currency = IDR;
simpleCart.urlWebsite = &#39;http://johnysip-deh.blogspot.com&#39;;
simpleCart.taxRate  = 0.02;
simpleCart.shippingFlatRate = 3.25;
simpleCart.shippingQuantityRate = 1.00;
simpleCart.alamatPemilik = &#39;Alamat Anda &#39;;
simpleCart.noHP = &#39;081 xxxx xxxx&#39;;
simpleCart.urlFacebook = &#39;http://www.facebook.com/pages/your facebook&#39;;
simpleCart.urlTwitter = &#39;https://twitter.com/your twitter&#39;;
simpleCart.akunbank1 = &#39;Bank A&#39;;
simpleCart.norek1 = &#39;No Rekening&#39;;
simpleCart.namarek1 = &#39;Nama Pemilik Rekening Bank A&#39;;
simpleCart.akunbank2 = &#39;Bank B&#39;;
simpleCart.norek2 = &#39;No Rekening&#39;;
simpleCart.namarek2 = &#39;Nama Pemilik Rekening Bank B&#39;;
simpleCart.akunbank3 = &#39;Bank C&#39;;
simpleCart.norek3 = &#39;No Rekening&#39;;
simpleCart.namarek3 = &#39;Nama Pemilik Rekening Bank C&#39;;
simpleCart.akunbank4 = &#39;Bank D&#39;;
simpleCart.norek4 = &#39;No Rekening&#39;;
simpleCart.namarek4 = &#39;Nama Pemilik Rekening Bank D&#39;;
simpleCart.akunbank5 = &#39;Bank E&#39;;
simpleCart.norek5 = &#39;No Rekening&#39;;
simpleCart.namarek5 = &#39;Nama Pemilik Rekening Bank D&#39;;
simpleCart.akunbank6 = &#39;Bank F&#39;;
simpleCart.norek6 = &#39;No Rekening&#39;;
simpleCart.namarek6 = &#39;Nama Pemilik Rekening Bank D&#39;;
simpleCart.urlReferrer = &#39;http://www.maskolis.com&#39;;
simpleCart.businessName = &#39;Nama Toko Online Anda&#39;;
simpleCart.formatsmsKonfirmasi= &#39;(Nama, Email, Jumlah transfer, Bank Tujuan Transfer, Tanggal transfer)&#39;;
simpleCart.contohformatsmsKonfirmasi= &#39;Maskolis, email.maskolis@gmail.com, Rp 1.500.000, BCA, 12 Desember 2012 &#39;;
simpleCart.catatanTambahanInvoice= &#39;(Have a nice day for you and I hope you enjoy it)&#39;;
simpleCart.cartHeaders = [&quot;Name&quot;, &quot;thumb_image&quot; , &quot;Quantity_input&quot; ,   &quot;Total&quot;, &quot;remove&quot; ];
 
Ganti kode warna biru diatas dengan data Anda dan blog Anda.

Fungsi Reply Komentar

Untuk mengaktifkan fungsi reply pada kotak komentar pada kedua template ini cari Blog ID masing-masing demo template ini. Untuk Johny Palelu Peang : 2047062320562941851 dan Johny Pink Store : 5422099799591763959. Silahkan cari kode blog ID itu di Edit HTML pada template demo, kemudian ganti dengan Blog ID Anda masing-masing. Dan terakhir untuk widget popular post, centang hanya thumbnail, kotak snippet biarkan kosong.

Oya hampir lupa, untuk mengisi widget Bawah Slider dan Product Category tinggal ketik label pada kolom widget tersebut.

Kedua template ini tersedia untuk dua pilihan sistem pembayaran online, yang satu menggunakan invoice email seperti yang terlihat pada demo, dan menggunakan pembayaran melalui Paypal (demonya nggak ada karena kebanyakan bikin blog nanti). Buat yang kemarin request template Toko Online warna ungu silahkan dipakai, kalau nggak cocok yah nggak apa-apa buat koleksi aja, buat bungkus kacang juga boleh, buat dijelek-jelekin juga boleh, buat diomelin juga boleh.... ngomong apa sih????

Silahkan tinggalkan pesan jika masih ada yang mau ditanyakan, atau baca tata cara komentar dulu disini sebelum mengisi kotak komentar yang tersedia.

Penting untuk diperhatikan bagi pengguna kedua template diatas :
  1. Buatlah sebuah page atau halaman statis dengan judul : Terima Kasih. 
  2. Isi terserah Anda, contoh bisa dilihat disini http://johnysip-deh.blogspot.com/p/terima-kasih.html
  3. Halaman ini digunakan untuk redirect URL setelah selesai pengisian formulir pemesanan.
  4. Download Template Toko Online Dengan Invoice Email
00.22

Edit Template Johny Sip Deh

Setelah anda mendowload template toko online yang saya sediakan pada artikel sebelumnya maka langkah selanjutnya adalah mengganti template blogspot anda yang lama dengan yang baru.

Untuk itu ada beberapa hal yang harus anda setting mulai dari Posting Produk, mengedit halaman pemesanan menjadi sesuai dengan keinginan anda, mengganti menu horizontal dan juga mengatur widget berlangganan.


Posting Produk

Untuk menambahkan produk pada template Johny tersebut caranya sedikit berbeda dari cara biasanya. Kode untuk menampilkan postingannya kurang lebih seperti dibawah ini !
<div class="product_image">
<a class="cloud-zoom" href="url-image.jpg" rel="softFocus: true, position:'inside', smoothMove:2"><img border="0" class="item_thumb" src="url-image.jpg" /></a>
<span class="item_price">$00.00</span></div>
<div class="product_describe">
Description your product.............
</div>

Coba anda perhatikan bahwa ada beberapa kode yang sengaja saya beri warna khusus. Untuk kode yang diberi warna merah, harap diganti dengan link gambar produk anda. (Gambar baiknya berukuran 300px x 300px)

Untuk yang berwarna hijau itu, silahkan anda ganti dengan harga produk anda. Terakhir adalah kode yang berwarna biru, silahkan ganti dengan deskripsi/penjelasan dari produk anda.

Nantinya kode tersebut harus ada pada setiap post anda. Karena jika tidak, maka produk anda tidak akan bisa tampil seperti yang ada pada demo. Untuk itu anda bisa meletakan kode ini di bagian post setting. Gunanya adalah agar setiap kali anda membuat post baru, maka kode ini akan muncul secara otomatis.

Silakan masuk ke menu SETELAN, POS dan KOMENTAR, lalu pada bagian TEMPLATE ENTRI klik TAMBAHKAN + . Copy kode pada kotak script di atas ke sini dan bila sudah klik tombol SIMPAN SETELAN di bagian atas.

Edit Template Johny Sip Deh

Edit Pemesanan

Seperti yang saya bilang bahwa template ini menggunakan sistem pemesanan via sms. Halaman order ini akan muncul ketika anda menekan tombol BELI pada setiap produk. Itu artinya anda harus membuat sebuah halaman baru bernama ORDER dan silakan anda isikan dengan detail pemesanan yang anda mau. Untuk contoh, silahkan lihat yang ada pada toko demo.

Setelah anda membuat sebuah halaman pemesanan langkah selanjutnya dengan menuju ke menu TEMPLATE, lalu pilih EDIT HTML. 

Cari kata "BELI" dengan menggunakan CTRL + F . Anda akan menemukan kode kira-kira seperti di bawah ini !

Edit Template Johny Sip Deh

Silakan ganti link http://dmondjersey.blogspot.com/p/order.html dengan link URL dari halaman pemesanan pada blog anda tersebut. 

Jika sudah, silahkan save template dan lihat perubahannya.

Mengganti Menu Horizontal di Bagian Atas

Anda juga bisa mengganti menu horizontal yang ada di bagian atas blog.. Sama seperti langkah sebelumnya yaitu menuju menu TEMPLATE lalu pilih EDIT HTML.

Cari kode "Welcome" dengan menggunakan CTRL + F dan anda akan menemukan 1 baris kode menu. Silakan anda ganti sesuai keinginan anda.

Edit Template Johny Sip Deh

Mengganti Email Berlangganan 

Menurut saya fitur ini sangat penting bagi toko online anda. Fitur ini diibaratkan seperti katalog anda. Jadi setiap ada produk baru yang anda post, maka para pembaca anda akan mengetahuinya melalui E-mail.

Cari kode "<form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post'" dengan menggunakan CTRL + F.

Nantinya anda akan menemukan 1 baris kode seperti ini :
<form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=http://feeds.feedburner.com/D-mondJersey&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input id='subbox' name='email' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Enter your email address...&apos;;}' onfocus='if (this.value == &apos;Enter your email address...&apos;) {this.value = &apos;&apos;;}' type='text' value='Enter your email address...'/><input name='uri' type='hidden' value='http://feeds.feedburner.com/D-mondJersey'/><input name='loc' type='hidden' value='en_US'/><input id='subbutton' type='submit' value='Enter'/></form>

Untuk kode yang saya beri warna merah silakan diganti dengan alamat feed anda sendiri. 

Saya rasa itu saja yang bisa saya beritahukan kepada anda guna mengedit template toko online dari maskolis ini. Semoga bermanfaat !
13.46

Cara Membuat Toko Online di Blogger Gratis Lengkap

Cara Membuat Toko Online di Blogger Gratis Lengkap Setelah saya membahas atau mereview tentang Rakuten.co.id: Toko Online Murah, Serba Ada Barang Unik Jepang, Ekiosku.com Jual Beli Online Aman Menyenangkan, Bajumurmer.com Toko Baju Online Jual Atasan Wanita Dress Ecer Grosir Reseller Murah yaitu sebuah toko online yang sangat terkenal sekali pada saat ini di indonesia, dan kali ini saya akan mengulas bagaimana Cara Membuat Toko Online di Blogger Gratis Lengkap, Baik Untuk Membuat toko online di Blogger itu cukup mudah, tidak perlu pakai plugins, anda hanya perlu meng-install tema (template) blogger. Proses listing produk juga relatif mudah. Tentu tidak sesimpel proses listing produk di WooCommerce yang super simpel, tapi tetap cukup mudah karena yang diperlukan hanyalah memasukkan detail produk dalam template HTML yang telah disediakan.
Tanpa pakai banyak bicara, langsung saja deh…

Panduan Cara Membuat Toko Online di Blogger

Untuk proses pembuatan toko jual beli online di blogger atau blogspot ini, akan saya bagi dalam 3 bagian, pertama adalah proses peng-install-an template blogger (blogspot), kedua adalah proses listing produk (menampilkan produk dan detilnya seperti harga dan lain-lain ke dalam toko online), dan ketiga adalah proses sistem pembayaran.

Persiapan: Buat Google Account dan Login Blogger.com

Tentu saja anda harus login dengan membuat akun Blogger terlebih dahulu jika anda ingin membuat toko online di blogger! 
Anda bisa dengan mudah membuat akun di Blogger dengan mengikuti video tutorial ini: Video Cara Membuat Akun di Google Account.
Setelahnya, buat blog di Blogger. Lihat tutorialnya di sini: Cara Membuat Blog di Blogger.
Sudah? Lanjut ke langkah selanjutnya…

#1 Meng-Install Template Toko Online Blogger

Anda bisa mencari template blogger gratis yang memang dikhususkan untuk toko online. Di tahap ini, saya asumsikan blog anda sudah jadi dan siap ubah menjadi toko online. 
Note: Tutorial ini menggunakan setting bahasa inggris karena saya rasa bahasa Indonesia terdengar aneh untuk tutorial.
Karena awal pelanggan itu akan melihat tampilan website kita, apabila tampilan website kita gak meyakinkan maka, kredebelitas toko online kita akan jelek juga cuma gara-gara tampilan website yang kurang bagus dan menarik, seperti toko online Rakuten.co.id: Toko Online Murah, Serba Ada Barang Unik Jepang, Ekiosku.com Jual Beli Online Aman Menyenangkan, Bajumurmer.com Toko Baju Online Jual Atasan Wanita Dress Ecer Grosir Reseller Murah Yang mempunyai tampilan website yang baik sekali, dan mudah dipahami oleh pelanggannya.

Sekarang di Dashboard Blogger anda, klik nama blog anda yang baru saja anda buat.
cara membuat toko online di blogger 2 Tutorial Cara Membuat Toko Online di Blogger Gratis, Super Lengkap!
Setelahnya, lihat bagian bawah, di sidebar. Cari tulisan Template dengan ikon kuas cat. *Maaf tidak ada panah, saya lupa nambahin.
cara membuat toko online di blogger 3 Tutorial Cara Membuat Toko Online di Blogger Gratis, Super Lengkap!
Kemudian, klik di bagian kanan atas, Backup/Restore.
cara membuat toko online di blogger 4 Tutorial Cara Membuat Toko Online di Blogger Gratis, Super Lengkap!
Sampai tahap ini, anda akan melakukan proses upload blogger template. Nah, tentu anda harus punya template toko online nya dulu donk… 
Jika anda belum punya template toko online blogger yang bagus, kenalan saya, Rifki Aria Gumelar telah mendesain sebuah template toko online yang cantik dan ciamik, dengan fitur yang cukup lengkap dan canggih untuk kategori toko online blogspot gratisan. 
Anda bisa download di website nya Om Agus Ramadhani (yang membantu mempopulerkan theme ini) secara langsung: Blogger Store v2
Tutorial Cara Membuat Toko Online di Blogger Gratis, Super Lengkap!
Atau download di sini: Blogger Store v2 Mirror (server saya).
Setelah itu, ekstrak file ZIP yang baru saja anda download, cari file dengan ekstensi XML (bloggerstore-v2.xml). *Jangan lupa baca read more nya. 
Kembali ke dashboard blogger anda, jendela seperti gambar di bawah akan terbuka setelah anda klik Backup/Restore. 
cara membuat toko online dengan blogger 6 Tutorial Cara Membuat Toko Online di Blogger Gratis, Super Lengkap!
Klik Browse dan cari file bernama bloggerstore-v2.xml tersebut, klik Upload.
Jika anda melakukannya dengan benar, anda akan melihat template anda sudah terganti dengan template toko online baru anda yang ciamik. Klik View Site di bagian atas untuk melihat blog (toko online) baru anda.

#2 Menambahkan Produk ke Toko Online Blogger Anda

Okay, template sudah ter-install. Tapi akan terasa ‘hampa’ alias kosongan karena memang belum kita isi apa-apa…
Sekarang waktunya untuk menambahkan produk di toko online Blogger baru kita. 
Beruntung bagi anda, sangat mudah untuk menambahkan produk di toko online ini. Klik saja tombol New Post di dashboard anda.
cara membuat toko online di blogger 7 Tutorial Cara Membuat Toko Online di Blogger Gratis, Super Lengkap!
Di halaman Post ini, ganti format penulisan ke HTML. 
cara membuat toko online di blogger 8 Tutorial Cara Membuat Toko Online di Blogger Gratis, Super Lengkap!
Kemudian tambahkan produk dalam template HTML yang sudah di sediakan. 
Jika anda malas melihat file TEMPLATE POST.txt yang ada di file ZIP yang baru saja anda download, salin saja kode di bawah ini sebagai template HTML produk baru anda.

<div class="item_image">
<img border="0" class="item_thumb" src="image.jpg" />
<span class="item_price">$00.00</span>
</div>
<div class="item_Description">
Descriptions... </div>
Kemudian masukkan data mengenai produk anda sesuai tempat yang seharusnya. 
Contoh:
<div class="item_image">
<img border="0" class="item_thumb" src="link ke gambar anda "/>
<span class="item_price">$10.00</span>
</div>
<div class="item_Description">
</div> 

Tas punggung pink cantik dengan kualitas terbaik, Software erp indonesia, cocok untuk tas sekolah anak, iconia pc tablet dengan windows 8, ESER Unlimited Power Bank, Masterbet88 Grand Opening Promo Bonus 50% Sportsbook dan Casino Online,  Agen Bola Ligabet88 Promo Bonus 100% IBCBET SBOBET 368BET bla-bla-bla...

Ubah “link ke gambar anda” dengan link beneran yang mengarah ke gambar produk anda. Upload gambar ke Blogger seperti biasa dan salin URL gambar anda ke bagian ini. 
“$10.00″ ubah dengan harga produk anda. 
“Tas punggung pink cantik dengan kualitas terbaik, simple dan plain, cocok untuk tas sekolah anak, bla-bla-bla…” ubah dengan deskripsi mengenai produk anda.
Selesai? Kini berikan Label, label “Backpack” saya gunakan dalam contoh kasus saya. Kemudian klik “Publish“!
Jika semuanya berjalan lancar, seharusnya anda akan melihat hal yang kurang lebih seperti ini.
cara membuat toko online di blogger Tutorial Cara Membuat Toko Online di Blogger Gratis, Super Lengkap!

Hm… terlihat agak sepi yah… 
Tentu saja, karena masih satu produk yang ditambahkan ke toko online anda. Anda harus tambahkan lebih banyak produk lagi agar toko online anda tampak lebih bagus.

cara membuat toko onine di blogger 9 Tutorial Cara Membuat Toko Online di Blogger Gratis, Super Lengkap!

Hm… jauh lebih baik. 
Saya serahkan proses kustomisasi sepenuhnya pada anda. Ini alasan kenapa saya malas berurusan dengan blogger lagi. Sangat-sangat repot dan tangan harus kotor dengan kode-kode yang saya tidak mengerti. Hahahahaha….

#3 Proses Pembayaran

Ada kelemahan dari toko online Blogger, pertama adalah mata uang tergantung dari mata uang yang didukung oleh PayPal. Benar, toko online kita di atas menggunakan PayPal sebagai proses pembayaran. Yang artinya tidak support mata uang rupiah untuk sementara ini. 
Bisakah jika kita ingin menjual produk dengan mata uang rupiah? Bisa. Tapi tak ada proses checkout untuk anda. Dan setahu saya, konsekuensinya adalah keranjang belanja di atas kanan itu bakalan tak ada gunanya.

Proses order dilakukan secara manual melalui transfer bank, beri tahu bagaimana cara agar pengunjung anda bisa melakukan order terhadap produk anda. Misal order melalui email atau SMS.contohnya anda dapat bekerja sama dengan bank-bank yang besar dan terpercaya di indonesia ini seperti Bank BCA, Bank Mandiri Bank Terbaik di Indonesia, Bank BNI, Bank BRI, dsb.

Untuk ide proses pembayaran anda bisa baca post saya yang ini atau lihat video saya dimana saya menunjukkan pada anda bagaimana saya membuat informasi pemesanan yang sangat jelas di sidebar toko online saya: Video Tips & Trik Toko Online Professional.

Untuk proses pengaturan jika anda ingin menggunakan fasilitas pembayaran melalui PayPal, silakan merujuk ke dokumentasi dari mas Rifki Aria Gumelar di blognya sendiri: http://javatemplates.com/blog/installing-and-customize-blogger-store-v2/
Dan saya rasa, cukup post ini… Saya yakin sekarang anda sudah tahu cara langkah demi langkah membuat Rakuten.co.id toko online di Blogger.

Jika anda ada pertanyaan mengenai hal ini, jangan tanya saya. Saya tidak tahu…
Saya hanya menulis tutorial ini dan jujur saya tidak tahu banyak mengenai kustomisasi situs Blogger. Saya lebih nyaman menggunakan WordPress dan WooCommerce untuk membuat toko online. 
Jika anda ingin membuat toko online yang tanpa repot, link di atas akan membawa anda ke e-Course gratis dari saya yang akan memandu anda bagaimana cara membuat toko online profesional menggunakan WordPress.Menu Live di website AGEN BOLA LIGABET88 PROMO BONUS 100% IBCBET SBOBET 368BET*. Lebih dari ratusan domain host di RAJAWEBHOST. Kami bukan penyedia web hosting kagetan yang sering mempermainkan pasar industri dengan harga yang fantastis. Kami lebih fokus pada kontinuitas bisnis. Oleh karena itu, kami cenderung lebih mentargetkan market corporate dengan tingkat loyalitas tinggi dan tahu akan kualitas Mudah-mudahan artikel saya diatas mengenai Cari Uang Lewat Ekiosku.com bermanfaat untuk anda informasi Ayo Ikutan Kontes Humor JOKES.WEB.ID*.

Sepuluh video gratis tentang hampir semua yang anda perlukan untuk membangun toko online profesional anda menunggu anda di sana… Serius, klik di sini: http://www.syamsulalam.net/ecourse/toko-online

Dan… akhirnya terima kasih karena sudah membaca Cara Membuat Toko Online di Blogger Gratis Lengkap hingga akhir. 
Saya akan sangat menghargainya, baca juga artikel tentang Agen Bola Ligabet88 Promo Bonus 100% IBCBET SBOBET 368BET

Terima Kasih Anda Sudah Membaca Artikel Tentang Cara Membuat Toko Online di Blogger Gratis Lengkap



Sumber : http://jembersantri.blogspot.com/2013/04/cara-membuat-toko-online-di-blogger.html#ixzz2XOayRdBa 
Follow us: jembersantri.blogspot.com on Facebook
13.32

Shopping Cart Free Blogger Theme

Shopping Cart Free Blogger Theme

Finally a shopping cart e-commerce theme for blogger. Designed byBloggerMint, its a 4 column free template that comes with 'Add to Cart' and 'PayPal Checkout' function for Blogger. 
 
Once the template is uploaded, go to Settings--Formatting, set the desired number of posts to be shown on the blog, and then insert this code in Post Template and save the changes -


<table border="1" style="width: 660px;">
<tbody>
<tr>
<th class="item_thumb" id="thumb" width="45%"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjeIZwIYhNwNoGIqxSxJy535MtYbPrR0RbSfipfYuIcPjfI83hjh7YzLzVURbV2WwAiiDdecAGdDlD6xYujL3l7pXV6lXj8dX74CnWtIArMQlL1_RsEHiT7b9CWbJXLPbj8-rpXyQIKNHK/s1600/blue.gif" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5610175970378217570" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjeIZwIYhNwNoGIqxSxJy535MtYbPrR0RbSfipfYuIcPjfI83hjh7YzLzVURbV2WwAiiDdecAGdDlD6xYujL3l7pXV6lXj8dX74CnWtIArMQlL1_RsEHiT7b9CWbJXLPbj8-rpXyQIKNHK/s400/blue.gif" style="cursor: hand; cursor: pointer; display: block; height: 164px; margin: 0px auto 10px; text-align: center; width: 148px;" /></a></th>
<td><input class="item_add" type="button" value="Add to Cart" /></td>
</tr>
<tr>
<th><b>Item Name</b></th>
<td class="item_name">Product Name Goes here!</td>
</tr>
<tr>
<th><b>Price</b></th>
<td class="item_price">$99.99</td>
</tr>
<tr>
<th><b>Description</b></th>
<td class="item_Description">Your product description here!</td>
</tr>
<tr>
<th><b>Available Stock</b></th>
<td>Stock count here!</td>
</tr>
<tr>
<th><b>Misc</b></th>
<td>Place extra thumbs/images of product here</td>
</tr>
</tbody>
</table>

This code will add the table in each 'New Post', now you have to fill in other information in the table like Item Name, Price and Description, which will be used as values during Paypal checkout. Also remove the default image from the code and add you own (keep the image sizes medium for it to fit properly).

Please not that you would have to remove the 'div class' and 'a href' from the image code, which should look something like this - 

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy5Ebyi38ZLdeC7JWftUxPnFlooWXJDyRMqq_Q7-3m-0RchOAoxNMfpaSFeKXuWCudhiNurkO1svWqXWqNJIFcVoj-i40fBKKH_i6PDE4goTbn7tO2a3BgjItRnwsbMDlHyCIYH4il8SRg/s1600/P1020156.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="240" width="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy5Ebyi38ZLdeC7JWftUxPnFlooWXJDyRMqq_Q7-3m-0RchOAoxNMfpaSFeKXuWCudhiNurkO1svWqXWqNJIFcVoj-i40fBKKH_i6PDE4goTbn7tO2a3BgjItRnwsbMDlHyCIYH4il8SRg/s320/P1020156.jpg" /></a></div>

And keep only this code in the table, those are the only changes you need to make and publish your post -

<img border="0" height="240" width="320" src="YOUR_IMAGE.jpg" />

Now moving on to Paypal Email set-up, go to Design--Edit Html and search for this code -

<script type='text/javascript'>
simpleCart.email = &quot;bloggermint@gmail.com&quot;;
simpleCart.checkoutTo = PayPal;
simpleCart.currency = USD;

Replace the text in bold, which is the Paypal email id, with your own and save the changes.

For those who don't have a Paypal account or credit card, can still purchase the product by filling the contact form. In order to integrate the form, you need to follow the steps below -

1) Sign up for Kontactr, once that is done scroll down the page until you find “Ajax Embed Widget” or “Buttons Code” and get your Kontactr ID, it will look something like this - id=39662, copy it.

2) Access Design--Edit HTML and insert this code right before the closing </head> tag. 

<script type="text/javascript" src="http://kontactr.com/kpu/kontactr.js"></script>

3)Now replace this code in Edit Html, it will appear in the top part of the CSS -

input.item_add{

with the one below -

span.item_add{

4) Similarly, search for this code -

input.item_add {

and change it to one below -

span.item_add {

The next step will be to go to Settings--Formatting, scroll down to the end of the page, you will find 'Post Template' where you have to insert the following code, change the Kontactr id=39662 with yours - 

<table border="1" style="width: 660px;">
<tbody>
<tr>
<th class="item_thumb" id="thumb" width="45%"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjeIZwIYhNwNoGIqxSxJy535MtYbPrR0RbSfipfYuIcPjfI83hjh7YzLzVURbV2WwAiiDdecAGdDlD6xYujL3l7pXV6lXj8dX74CnWtIArMQlL1_RsEHiT7b9CWbJXLPbj8-rpXyQIKNHK/s1600/blue.gif" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5610175970378217570" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjeIZwIYhNwNoGIqxSxJy535MtYbPrR0RbSfipfYuIcPjfI83hjh7YzLzVURbV2WwAiiDdecAGdDlD6xYujL3l7pXV6lXj8dX74CnWtIArMQlL1_RsEHiT7b9CWbJXLPbj8-rpXyQIKNHK/s400/blue.gif" style="cursor: hand; cursor: pointer; display: block; height: 164px; margin: 0px auto 10px; text-align: center; width: 148px;" /></a></th>
<td><span class="item_add"><script type="text/javascript"> id=39662; t=1; ctxt="Order Now"; </script>
<script type="text/javascript" src="http://kontactr.com/kpu/kontactr.js"></script></span></td>
</tr>
<tr>
<th><b>Item Name</b></th>
<td class="item_name">Product Name Goes here!</td>
</tr>
<tr>
<th><b>Price</b></th>
<td class="item_price">$99.99</td>
</tr>
<tr>
<th><b>Description</b></th>
<td class="item_Description">Your product description here!</td>
</tr>
<tr>
<th><b>Available Stock</b></th>
<td>Stock count here!</td>
</tr>
<tr>
<th><b>Misc</b></th>
<td>Place extra thumbs/images of product here</td>
</tr>
</tbody></table>

Shopping Cart template also has a 4 column footer and a single sidebar on the right to display other blogger widgets like Archive, Categories, etc. 
13.29

Cara Memasang Blog Toko Online

Shopping cart yang  gunakan disini adalah simplecart made inwojodesign.com. Sudah di masukkan currency IDR atau rupiah pada script tersebut tapi tetap saja tidak bisa digunakan untuk transaksi langsung via paypal, karena Paypal belum menerima rupiah sebagai alat pembayaran. Jadi jika Anda ingin memakai template ini untuk jualan online, barangnya dinilai pakai dollar Saja.

Posting Artikel

Dalam membuat artikel baru, perhatikan struktur kode di bawah ini :
 
Description your product.............
Keterangan :
Warna merah : masukkan url gambar produk anda pada kedua kode warna merah diatas. Usahakan gambar yang Anda upload ukuran panjang dan lebar sama, misalnya 300 x 300 px
Warna kuning : harga produk
Warna biru : deskripsi dari produk

Kode diatas adalah kode yang harus anda awali dalam membuat postingan terbaru, dan untuk memudahkan agar Anda tidak berulang kali copy paste kode tersebut sewaktu membuat artikel terbaru, masukkan kode tersebut pada kolom post template. Masuk ke setting, pilih posts and comments>> post template. Klik add, setelah itu masukkan kode diatas pada kotak kosong seperti gambar dibawah, terakhir save setting.


Shopping Cart

Fitur Shopping Cart disini digunakan untuk memudahkan pengelola toko online dalam transaksi via Paypal. Tapi karena Paypal belum menerima pembayaran Rupiah, jadi setting untuk currency masih dalam dollar. Untuk mengganti akun Paypal yang terdapat pada blog demo ini dengan akun Paypal Anda, cari kode dibawah ini :
Ganti email warna merah diatas dengan email Anda (email yang sudah didaftarkan di Paypal)

Fitur Pendukung
  1. Slider yang saya pasang disini bekerja otomatis, menampilkan artikel terbaru anda dengan jumlah 8 postingan. Jika Anda ingin menampilkan per kategori atau label, cari kode ini pada Edit HTML (jangan lupa centangexpand widget templates) :
    Ganti dengan kode berikut :
    Ganti kode warna biru dengan label yang ingin Anda tampilkan pada slider.
  2. Untuk mengganti email berlangganan yang ada di bawah navigasi, cari kode dibawah ini pada Edit HTML (jangan lupa untuk mencentang kotak expand widget templates) :
    blogspot/htbgh', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" id="subscribe" action="http://feedburner.google.com/fb/a/mailverify">blogspot/htbgh" name="uri" />
    Keterangan :
    Warna biru : ganti dengan alamat feed anda.
  3. Template ini menggunakan model kotak komentar yang sudah dimodifikasi, untuk mengaktifkan fungsi reply anda harus cari kode dibawah ini pada Edit HTML, sekali lagi jangan lupa untuk centang kotakexpand widget templates :
    Warna merah pada kode diatas adalah ID blog demo, Anda harus ganti dengan ID blog anda yang terletak pada browser jika anda masuk ke dashbord, seperti gambar di bawah ini :

  4. Widget popular post thumbnail, setting seperti pada gambar dibawah ini :
    popular

    Yang perlu diperhatikan adalah centang hanya thumbnail, biarkan kotaksnippet kosong tidak perlu dicentang. Judul dan jumlah post yang ingin ditampilkan terserah Anda. Untuk lebih jelasnya silahkan baca tutorialnya disini.
Fitur yang lain saya kira mudah, seperti memasang Yahoo Messenger dan lain-lain. Template ini juga dilengkapi dengan efek zooming pada gambar jika Anda mengarahkan cursor pada gambar, gambar itu akan otomatis membesar sesuai dengan letak cursor. Mungkin hanya itu yang perlu saya jelaskan mengenai template ini, seperti biasa jika ada yang kurang jelas silahkan tinggalkan komentar Anda pada kotak komentar yang ada di bawah. Selamat mencoba dan semoga bermanfaat.

Showcase
Jika Anda ingin melihat blog yang sudah memakai template ini. bisa dilihat disini :
Toko Madu Mulia Alam Nusantara

Sangat disarankan :
  1. Baca tutorial pemasangan template ini sampai selesai.
  2. I suggest to upload gambar produk dengan ukuran panjang dan lebar sama, misalnya 300 x 300 px.
  3. Agar hasil akhir dalam penggunaan template ini maksimal dan tata letak post teratur, judul post jangan terlalu panjang, karena akan menggeser gambar ke bawah.
Update
Untuk merubah simbol currency dari $ (dollar) menjadi Rp (rupiah) pada shopping cart :
  1. Cari URL script ini di Edit HTML :
    http://kauman.googlecode.com/files/WojosimpleCart-IDR.js
    Setelah ketemu ganti dengan URL script berikut :
    http://kauman.googlecode.com/files/WojosimpleCart-Rupiah.js
  2. Langkah selanjutnya, masih pada Edit HTML ganti USD pada kode ini :
    simpleCart.currency = USD;
    menjadi 
    simpleCart.currency = IDR;
Terakhir save templates, dan currency anda akan berubah menjadi rupiah. Tapi perlu diingat disini, itu hanya sekedar penggantian currency saja, tidak bisa untuk melakukan checkout atau pembayaran langsung lewat Paypal. Karena Paypal belum menerima Rupiah sebagai alat pembayaran.
13.28