In this tutorial, we are going to see a wizard like a shopping cart. In a previous tutorial, we have seen shopping cart with jQuery AJAX.

In this wizard-like shopping cart example, we separate products and cart items by using tabs. While adding products, the cart tab is updated with the cart item count.

View Demo

Shopping Cart Tabs

This is for showing the shopping cart tabs.

<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

This function highlights selected tab and shows corresponding content.

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

View DemoDownload