Skip to main content

Cara Menambahkan Shopping Cart di Template Blogspot

Bagaimana cara menambahkan shopping cart ke template blogspot? Seringkali Tips SEO Terbaik menerima pertanyaan ini. Nah tulisan kali ini akan mencoba memberikan panduan mengenai cara memasang shopping cart ke template blogspot. Shopping cart yang dipasang adalah dengan checkout via paypal.

Panduan memasang atau menambahkan shopping cart ke template blogspot ini sebenarnya pernah ditulis oleh Kangismet di blognya blog.kangismet.com.  Script shopping cart sendiri diambilkan dari scriptnya simplecart buatan thewoojogroup.com.

Pemakaian SimpleCart.js ini sangat cocok untuk platform blogspot yang tidak menggunakan php.
Pemasangannya sebenarnya cukup sederhana.

memasang shopping cart di template blogspot

Sebelum membaca lebih lanjut panduan menambahkan shopping cart di template blogspot ini ada baiknya anda melihat dulu live demonya DISINI

Berikut panduannya.

Memasang Script Shopping Cart di Template


Langkah 1.

Pastikan template anda sudah memasang  frame works jquery di template anda, jika belum simpan script berikut ini tepat di atas </head>

<script src='http://yourjavascript.com/01135519565/jquery-cookie.js' type='text/javascript'/>
<script src='https://cdn.rawgit.com/wojodesign/simplecart-js/email/simpleCart.js' type='text/javascript'/>

Note : Sebaiknya 2 file Javascript di atas disimpan di hosting Anda sendiri untuk keamanan. Anda bisa membaca artikel panduan penyimpanan file javascript, html atau CSS di hosting gratis dengan memakai server Github ini.


Langkah 2.
Pemasangan script checkout paypal dilakukan di atas kode </head> tadi. Berikut script yang dipasang.
<script type='text/javascript'>
//<![CDATA[
simpleCart.email = 'bisnis.aira@gmail.com';
simpleCart.checkoutTo = PayPal;
simpleCart.currency = USD;
simpleCart.cartHeaders = ['name','thumb_image','Quantity_input','increment',  'decrement','Total'];
//]]>
</script>
Keterangan :
Ganti alamat email dengan email akun paypal anda.

Penulisan Kode pada laman posting


Penulisan kode di saat melakukan posting produk perlu diperhatikan dengan seksama.
Cara penulisan kode postingan adalah seperti ini:
<div class="simpleCart_shelfItem">
    <img alt="nama produk" class="item_thumb" src="http://url-gbr-produk.jpg"/>
    <h2 class="item_name"> Nama Produk </h2>
    <p> <input value="1" class="item_Quantity" type="text"><br>
    <span class="item_price">$35.99</span><br>
    <a class="item_add" href="javascript:;"> Add to Cart </a></p>
</div>
Keterangan:
  • Text warna merah adalah text yang bisa anda ganti dengan data produk anda.
  • Perhatikan pula bahwa setiap objek seperti nama, gambar, dan harga ada di dalam class simpleCart_shelfItem.
Penulisan laman posting juga bisa dilakukan dengan cara seperti ini.
<img alt="nama produk" src="http://link-gbr-produk.jpg" />
<h3>Nama Produk</h3>
<span class="price">$50</span>
<a class="add-to-cart" href="#" onclick="simpleCart.add('quantity=1', 'name=Nama Produk','price=50','thumb=http://link-gbr-produk.jpg');return false;">add to cart</a>
Keterangan :
text warna merah disesuaikan dengan data produk anda.

Beberapa kode HTML yang dipakai di Laman atau Widget Checkout.


Beberapa kode berikut ini adalah cukup penting karena dipakai untuk membuat widget halaman checkout.
Sedangkan penempatannya bisa anda atur sendiri disesuaikan dengan kreasi anda.
// menampilkan jumlah pesanan (item)
<span class='simpleCart_quantity'></span>

// menampilkan detail pesanan
<span class='simpleCart_items'></span>

// menghapus daftar belanja
<a class='simpleCart_empty' href='javascript:;'>Empty Cart</a>

// checkout
<a class='simpleCart_checkout' href='javascript:;'>Checkout</a>

// jumlah total
<span class='simpleCart_total'></span>

Kostumisasi shopping cart


Dengan memanfaatkan inspect elemen pada browser, baik itu firefox maupun chrome, anda bisa mencontoh beberapa script CSS pada demo laman shopping cartnya.
Namun jika anda lebih mahir dengan CSS, bahkan hasilnya bisa jauh lebih bagus dan sesuai dengan keinginan desain yang bisa anda lakukan.

Nah panduan cara menambahkan shopping cart di template blogspot tersebut merupakan panduan yang sangat sederhana. Lebih jauh bisa dikembangkan sendiri, namun yang jelas. dasar-dasarnya adalah seperti itu. Semoga bermanfaat.

Sumber: blog.kangismet.com

Comments

  1. kerren tutorialnya, thank you for sharing

    ReplyDelete
  2. saya akan coba, mudah2an berhasil..

    ReplyDelete
  3. gan ko itu ga ada kode CSS nya?? apa bisa itu?

    ReplyDelete
    Replies
    1. Kalau untuk kode cssnya, tinggal inspect elemen aja dari live demo, atau anda bisa buat sendiri jika jago CSS.

      Delete
  4. gan kalo rubah cart nya jadi idr bisa nggak? ada perubahan lain atau langsung di rubah saja?

    ReplyDelete
    Replies
    1. Karen ini checkoutnya memakai paypal, jadi untuk rubah ke currecny IDR jadi tidak berfungsi paypalnya, karena paypal sampai saat reply ini saya tulis masih belum support mata uang rupiah.
      Kalau mau pakai mata uang rupiah anda bisa memilih beberapa template toko online lainnya yang sudah support dengan IDR.

      Delete
  5. gan itu koq harganya gak masuk item chart ya ?

    ReplyDelete
    Replies
    1. Coba di cek lagi Gan, sudah ada update untuk file javascriptnya.

      Delete
  6. Salam bos....
    Mau tanya nih... kok yg sy untuk kode =
    //menampilkan detail pesanan
    < span class='simpleCart_items' >< /span >

    kok keluar =
    name
    thumb
    Quantity
    increment
    decrement
    Total

    Kalau mau ngilangin gimana gan....
    Trus kalau mau buat klik view seperti
    http://blogtutorialdemo.blogspot.my/p/shopping-cart.html
    gimana gan

    rencana mau buat toko online www.hamrashop.net
    sy lagi coba2 dulu di koyank.blogspot.com
    tengqyu gan

    ReplyDelete
    Replies
    1. kalau pake template redesain harus disesuaikan dengen elemen CSS yang sudah terbentuk sebelumnya Gan.
      Coba di cek lagi script css yang berhubungan dengan elemen yang agan maksudkan.
      Pakai aja inspect elemen dari browser untuk cek elemennya biar lebih mudah dan tepat mana yang harusnya diedit.

      Delete
  7. Bos gimna caranya adit tamplate bawaan jadi toko online tanpa harus ganti trmplate soalnya template bawaan

    ReplyDelete
  8. Thanks tutorialnya..
    Untuk yang kirim ke email bukan paypal dong..

    ReplyDelete
  9. Mantabs tutorialnya, bisa dipakai disemua template?

    ReplyDelete
  10. Maaf, saya baru pemula banget, bisa dijelaskan apa yang dimaksud " frame works jquery di template "? Makasih

    ReplyDelete
  11. Bagus, udah saya coba dan berhasil http://www.jejualandistro.com/

    ReplyDelete
  12. kok ADD TO CART nya tidak berfungsi, mohon bantuannya

    ReplyDelete
  13. A web application developed based on the shopping cart migration concept will adopt the layout of the application.

    ReplyDelete
  14. A ecommerce store is very necessary Develope E-Commerce Store

    ReplyDelete
  15. Great job, keep posting Data Entry also visit us.

    ReplyDelete

Post a Comment

Popular Posts

5 template blogspot toko online terbaik dan gratis

Template blogspot untuk toko online yang terbaik dan gratis sudah banyak bertebaran di internet. Namun kali ini tips SEO terbaik akan membagikan informasi khusus untuk template blogger toko online terbaik sekaligus SEO namun tetap gratis khusus untuk pengunjung blog ini. Pilihan untuk template blogspot toko online banyak sekali, bahkan untuk template blogspot toko online yang gratis pun banyak yang memiliki kualitas seperti halnya template premium alias template berbayar. Informasi mengenai template toko online blogspot gratis ini sengaja dibagikan di blog ini untuk memudahkan anda menentukan pilihan mengenai template yang paling cocok dan sesuai untuk memajang produk-produk anda. Baca tips SEO dan alternatif template toko online terbaru lainnya berikut: Cara submit sitemap terbaru di google webmaster Gratis 9 Template Toko Online Blogspot Full Responsive Semua template yang diinformasikan di sini ada yang memiliki fitur shopping cart dan ada yang tidak sehingga bisa menyesua

Optimasi Search Engine (SEO) Toko Online Blogspot

Ada beberapa pertanyaan menarik yang pernah atau bahkan sering mampir ke Saya mengenai SEO, khususnya untuk para pengguna blogspot yang memanfaatkannya sebagai toko online. Apakah toko online dengan blogspot bisa berhasil? Bagaimana SEO blogspot untuk toko Online? Apakah SEO Blogspot Toko Online berbeda dengan SEO Toko Online lainnya? dan masih banyak lagi pertanyaan yang serupa dengan 3 pertanyaan di atas, namun poinnya tetap sama yaitu SEO Toko Online Blogspot. Baiklah, kita mulai pembahasannya. Saya akan langsung ke poin-poinnya yang penting saja. Agar tidak melebar kemana-mana. Platform blogspot bisa dibilang memiliki struktur yang sederhana, sehingga cukup mudah bagi para pemula dan terbukti banyak sekali yang memanfaatkan platform ini untuk berbagai tujuan. Meski blogspot awalnya memang hanya bertujuan buat nge-Blog. Bahkan teknik SEO pada blogspot pun sebenarnya juga cukup sederhana. Anda bisa mempelajari dari berbagai sumber, yang memiliki poin yang sama, karen