Membuat Shopping Cart Interaktif di PHP dengan SmartCart

Membuat Shopping Cart Interaktif di PHP dengan SmartCart - Dalam Website Toko Online tentunya tidak asing dengan nama shopping cart atau dalam bahasa indonesia keranjang belanja, dimana fitur ini merupakan fungsionalitas utama dalam website ecommerce, untuk membuat shopping cart yang interaktif anda bisa menggunakan plugin jquery ini yang bernama SmartCart

Fungsi yang disediakan plugin jquery ini cukup lengkap serta instalasi yang mudah membuat developer cukup 5 menit untuk instalasi plugin jquery ini ke dalam aplikasi yang sedang anda buat dengan framework apapun.



Langkah-Langkah Untuk Pasang SmartCart di PHP
1. Download File ZIP dibawah ini
https://github.com/techlab/SmartCart/archive/master.zip
2. Plugin Cart ini sudah mendukung Boostrap 3.0 dan Jquery 1.0, jadi pastikan template ada sudah terpasang
3. Extract dan Simpan Folder CSS & JS, Dalam file yang telah anda download, akan menemukan 2 file yang sangat penting yaitu jquery.smartCart.min.js dan smart_cart.min.css
4. Sisipkan smart_cart.min.css pada bagian <HEAD> dan jquery.smartCart.min.js pada bagian <BODY>
5 .Deklarasikan fungsi cart ini dengan kode berikut:
<script type="text/javascript">
$(document).ready(function(){
$('#smartcart').smartCart();
});
</script>
 6. Implementasikan Fungsi Cart pada Tag HTML bagian Produk:
<!-- KOTAK PRODUK, dideklarasikan dengan class "sc-product-item"  -->
<div class="sc-product-item">

<!-- GAMBAR PRODUK, dideklarasikan dengan data-name="product_image"  -->
<img data-name="product_image" src="gambar-produk.jpg" alt="gambar">

<!-- NAMA PRODUK, dideklarasikan dengan data-name="product_name" atau dengan elemen name="product_name"  -->
<h4 data-name="product_name">Product 1</h4>

<!-- Deskripsi Produk,dideklarasikan dengan data-name="product_desc" atau dengan elemen name="product_desc"  -->
<p data-name="product_desc">Product details</p>

<!-- HARGA PRODUK, dideklarasikan dengan name="product_price" atau dengan elemen data-name="product_price"  -->
<input name="product_price" value="5500" type="hidden" />

<!-- ID PRODUK,dideklarasikan dengan by name="product_id" atau dengan elemen data-name="product_id"  -->
<input name="product_id" value="12" type="hidden" />

<!-- TOMBOL Add to Cart / BELI, dideklarasikan dengan class="sc-add-to-cart"  -->
<button class="sc-add-to-cart btn btn-success">Beli</button>
</div>
</div>

 7. Terakhir Delarasikan fungsi Keranjang / Cart
<form action="checkout" method="POST">
<!-- Keranjang Belanja -->
<div id="smartcart"></div>
</form>
 Apabila berhasil fungsi cart akan tampil seperti berikut:

Mau Tanya ? Silahkan Klik Disini

0 comments