Membuat Shopping Cart Dengan Multi-Tab Wizard Menggunakan jQuery AJAX

1 42

Dalam tutorial ini, kita akan membuat wizard seperti shopping cart. Dalam tutorial sebelumnya, kita telah membuat shopping cart dengan jQuery AJAX. Dalam contoh shopping cart wizard seperti ini, kami memisahkan produk dan item keranjang dengan menggunakan tab. Sambil menambahkan produk, tab keranjang diperbarui dengan jumlah item keranjang.

Tab Belanja

Ini untuk menampilkan tab keranjang belanja.

<ul id="cart-tab">
<li id="product" class="highlight">Products</li>
<li id="cart">Cart <span id="cart-item-count"><?php if(!empty($_SESSION["cart_item"])){ echo count($_SESSION["cart_item"]);} else{ echo "0"; } ?></span></li>
</ul>

jQuery Multi-Tab Handler

Fungsi ini menyoroti tab yang dipilih dan menampilkan konten yang sesuai.

$("li").on("click", function() {
	$("li").removeClass("highlight");
	$(this).addClass("highlight");
	$(".content").hide();
	var id = $(this).attr("id");
	$("#"+id+"-grid").show();
});
Demo

Get real time updates directly on you device, subscribe now.

1 Comment
  1. […] Dalam tutorial ini, kita akan melihat contoh keranjang belanja atau shopping cart. Dalam contoh ini, kami menambahkan produk ke keranjang dengan drag and drop. Dalam tutorial sebelumnya, kita telah melihat shopping cart multi-tab wizard menggunakan jQuery AJAX. […]

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.