Cara Menambahkan Shopping Cart

Cara Menambahkan Shopping Cart

Cara Menambahkan Shopping Cart Di Template Blogspot

Cara Menambahkan Shopping Cart  –  Sering saya mendapat pertanyaan dari temen-temen tentang bagaimana cara menambahkan shopping cart ke template blogspot? Dan untuk menjawab pertanyaan itu pada kesempatan posting kali ini saya akan coba menjawabnya dengan pembahasan cara menambahkan shopping cart ke template blogspot dengan checkout lewat paypal.

Tutorial cara menambahkan shopping cart ke template blogspot ini saya kutip dari tulisan teman blogger saya yang memiliki blog.kangismet.com. Dan untuk script shopping cartnya saya ambilkan dari simplecart yang di buat oleh thewoojogroup.com.

Kenapa kita menggunakan Simplecart.js ini? sebab script ini sangat cocok sekali untuk blogspot, dimana blogspot tidak menggunakan php dalam platformnya. Dan cara memasangnya pun cukup sederhana sekali.

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

Baca juga: Cara Pasang Facebook Pixel di Blogspot

Berikut panduan Cara Menambahkan Shopping Cart di Template Blogspot

Langkah 1.

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

<script src=”http://yourjavascript.com/01135519565/jquery-cookie.js” type=”text/javascript”>// <![CDATA[
<br />
<script src=’https://cdn.rawgit.com/wojodesign/simplecart-js/email/simpleCart.js’ type=’text/javascript’/>

Note : Demi keamanan Sebaiknya 2 file Javascript di atas disimpan di hosting Anda sendiri. 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

Untuk Penulisan kode ketika melakukan posting produk perlu diperhatikan dengan seksama. Dan Cara penulisan kode untuk 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 bisa anda gunakan 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.

Baca juga: Tools Untuk Merubah Kode HTML untuk Di Taruh Di Postingan.

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

Leave a Reply

Your email address will not be published. Required fields are marked *