ساخت سبد خرید چند مرحله ای با php و ajax

در این قسمت از سری آموزش های ساخت سبد خرید با php , قصد داریم به شما نحوه ساخت سبد خرید چند مرحله ای با php و ajax و tab بندی شده نشان بدیم .

در آموزش قبلی نحوه ساخت سبد خرید با php و ajax را دیدیم. بنابراین فقط کد هایی که برای تب بندی محصولات و سبد خرید را به پروژه قبلیمان اضافه می کنیم و آن را توسعه میدیم .

در مثال سبد خرید چند مرحله ای , ما دو قسمت محصولات و سبد خرید (cart) را با استفاده از tab جدا می کنید . زمانی که محصولی به سبد خرید اضافه شد , مقدار عددی تب cart را بروزرسانی می کنیم.

ساخت تب های سبد خرید چند مرحله ای

کد های زیر برای جدا سازی بخش سبد خرید و محصولات با tab استفاده شده است .

<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>

<li id="product" class="highlight">Products</li>

</ul>

برای ساخت سبد خرید چند مرحله ای به سادگی از رویداد click در جی کویری استفاده می کنیم.

هندلر jquery برای ساخت سبد خرید چند مرحله ای

ای تابع تب انتخاب شده highlight (شفاف) می کند و داده های مربوط به آن تب را نمایش می دهد .

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

$("li").on("click", function() {

$("li").removeClass("highlight");

$(this).addClass("highlight");

$(".content").hide();

var id = $(this).attr("id");

$("#"+id+"-grid").show();

});

امیدوارم از این آموزش نهایت استفاده رو برده باشید و در پروژه هایی که می نویسید استفاده کنید

اگر آموزش های قبلی ساخت سبد خرید با php را دنبال نکردید می توانید تمام فایل های آموزش قبلی + سبد خرید چند مرحله ای را از لینک زیر دانلود و استفاده کنید

هر سوالی داشتید ، از قسمت نظرات اقدام کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید