Pada kesempatan kali ini saya akan membuat interaksi keranjang belanja menggunakan jQuery dan CSS.

Ide dasarnya adalah agar interaksi keranjang belanja ini berbeda seperti pada umumnya, dan dari sisi user experience interaksi ini dibuat simpel.

CSS property menggunakan efek transisi, opacity, width, height. Anda bisa mendownload Demo file di halaman paling bawah.

 

Secara konsep bisa dilihat seperti gambar dibawah ini :

 

Struktur dasar htmlnya seperti ini :

<!-- Start Keranjang Belanja -->
<div class="cart-container empty">
	<a href="javascript:;" class="cart-small">
           <i class="fa fa-shopping-cart"></i>
           <span class="cart-small-num">0</span>
        </a>
	<div class="cart-wrapper">
	    <div class="cart-header">
		<b>Keranjang Belanja</b>
		<a href="javascript:;" id="closeCart"><i class="fa fa-close"></i></a>
	    </div>
	    <div class="cart-content"></div>
	    <div class="cart-footer">
	        <b>Total Belanja &nbsp;</b> <span>IDR. 0</span>
	    </div>
	</div>
			
</div>

Fungsi Tambah Keranjang (Add To Cart)

 // Tambah Keranjang
function _addToCart(){

  var productItem = '<div class="cart-item">\
                   <img src="assets/img/product-1.jpg" />\
                   <div class="text">\
                   <h6 class="title">\
                   <span>Judul Produk </span>\
                   <span>IDR. 100,000</span>\
                   </h6>\
                   <div class="action">\
                    <a href="javascript:;" class="trash-item text-muted">Hapus</a>\
                   </div>\
                  </div>\
                  </div>';

  $cartContent.append(productItem); 
  _cartTotalItem();
}

Demo Preview