ویرایش سبد خرید با php و ajax

در این قسمت از ساخت سبد خرید با php ، قصد افزودن قابلیت ویرایش سبد خرید را با جی کوئری ajax داریم . در آموزش قبلی با نحوه ساخت خرید با php و ajax آشنا شدیم . قابلیت ویرایش سبد خرید به ما امکان تغییر تعداد موجودی کالای سبد خرید را در سئشن می دهد.

در این مثال ، ما مقدار تعداد محصول در سبد خرید را در یک فیلد textbox نمایش می دهیم تا کاربر بتواند آن را تغییر بدهد . تابع ویرایش سبد خرید جی کوئری ajax با رویداد blur فیلد تعداد ، فراخوانی می شود .

ما یک درخواست ajax را با کد محصول و تعداد آن به فایل php ارسال می کنیم که باعث تغییر مقدار آن در سئشن سبد خرید و محاسبه قیمت کل آن می شود . پاسخ ارسال در صورت موفقیت آمیز بودن اجکس ، قیمت کل سبد خرید خواهد بود .

کد لیست محصولات و HTML ویرایش سبد خرید

در این کد ، ما محصولات سبد خرید را از طریق session خوانده و در گالری نمایش می دهیم . هر یک از آیتم های سبد خرید ما یک آیکون delete (حذف) برای حذف محصول از سبد خرید و خب طبیعتا از سیشن کاربر خواهد داشت . و همچنین یک لینک برای پاکسازی سبد خرید و حذف یکجای محصولات را خواهیم داشت .

<div id="shopping-cart">
<div class="txt-heading">Shopping Cart </div>
<form name="frmCartEdit" id="frmCartEdit">
<?php
$total_price = 0.00;
if(isset($_SESSION["cart_item"])){
?>	
<?php foreach ($_SESSION["cart_item"] as $item) { 
		$code = $item["code"];
		$productByCode = $product_array["$code"];
		$total_price += $item["price"] * $item["quantity"];	
?>
	<div class="product-item" onMouseOver="document.getElementById('remove<?php echo $item["code"]; ?>').style.display='block';"  onMouseOut="document.getElementById('remove<?php echo $item["code"]; ?>').style.display='';" >
		<div class="product-image"><img src="../<?php echo $productByCode["image"]; ?>"></div>
		<div><strong><?php echo $item["name"]; ?></strong></div>
		<div class="product-price"><?php echo "$".$item["price"]; ?></div>
		<div>Quantity: <input type="text" name="quantity" id="<?php echo $item["code"]; ?>" value="<?php echo $item["quantity"]; ?>" size="2" onBlur="saveCart(this);" /></div>
		<div class="btnRemoveAction" id="remove<?php echo $item["code"]; ?>"><a href="?action=remove&code=<?php echo $item["code"]; ?>" title="Remove from Cart">x</a></div>
	</div>
<?php
	}
}
?>
</form>
<div class="cart_footer_link">
<div>Total Price: <span id="total_price"><?php echo "$". number_format($total_price,2); ?></span></div>
<a href="?action=empty">Clear Cart</a>
<a href="../" title="Cart">Continue Shopping</a>
</div>

<div class="txt-heading">Shopping Cart </div>

<?php

$total_price = 0.00;

if(isset($_SESSION["cart_item"])){

<?php foreach ($_SESSION["cart_item"] as $item) {

$code = $item["code"];

$productByCode = $product_array["$code"];

$total_price += $item["price"] * $item["quantity"];

<div class="product-item" onMouseOver="document.getElementById('remove<?php echo $item["code"]; ?>').style.display='block';" onMouseOut="document.getElementById('remove<?php echo $item["code"]; ?>').style.display='';" >

<div>Quantity: <input type="text" name="quantity" id="<?php echo $item["code"]; ?>" value="<?php echo $item["quantity"]; ?>" size="2" onBlur="saveCart(this);" /></div>

<div class="btnRemoveAction" id="remove<?php echo $item["code"]; ?>"><a href="?action=remove&code=<?php echo $item["code"]; ?>" title="Remove from Cart">x</a></div>

</div>

<?php

}

</form>

<div>Total Price: <span id="total_price"><?php echo "$". number_format($total_price,2); ?></span></div>

<a href="?action=empty">Clear Cart</a>

<a href="../" title="Cart">Continue Shopping</a>

</div>

تابع جی کوئری برای ارسال تغییرات سبد خرید

اسکریپت زیر برای ارسال یک درخواست (request) اجکس به کد های php برای ویرایش تعداد محصول مورد نظر از سبد خرید و ثبت مقدار جدید استفاده شده است . این تابع ajax در هنگام اجرای رویداد blur (کلیک کردن بر روی فیلد تعداد و بعد کلیک بر روی یک المنت دیگر (loosing focus)) فراخوانی میشود . همینکه تعداد تغییر کرد ، قیمت کل محصولات سبد خرید دوباره محاسبه و بروز رسانی خواهد شد .

<script>
function saveCart(obj) {
	var quantity = $(obj).val();
	var code = $(obj).attr("id");
	$.ajax({
		url: "?action=edit",
		type: "POST",
		data: 'code='+code+'&quantity='+quantity,
		success: function(data, status){$("#total_price").html(data)},
		error: function () {alert("Problen in sending reply!")}
	});
}
</script>

function saveCart(obj) {

var quantity = $(obj).val();

var code = $(obj).attr("id");

$.ajax({

url: "?action=edit",

type: "POST",

data: 'code='+code+'&quantity='+quantity,

success: function(data, status){$("#total_price").html(data)},

error: function () {alert("Problen in sending reply!")}

});

}

</script>

ویرایش سبد خرید با php + بروزرسانی قیمت کل

کد php زیر به شما منطق تغییر سئشن سبد خرید و قیمت کل را بر اساس تعداد جدید نشان می دهد.

case "edit":
	$total_price = 0;
	foreach ($_SESSION['cart_item'] as $k => $v) {
	  if($_POST["code"] == $k) {
		  if($_POST["quantity"] == '0') {
			  unset($_SESSION["cart_item"][$k]);
		  } else {
			$_SESSION['cart_item'][$k]["quantity"] = $_POST["quantity"];
		  }
	  }
	  $total_price += $_SESSION['cart_item'][$k]["price"] * $_SESSION['cart_item'][$k]["quantity"];	
		  
	}
	if($total_price!=0 && is_numeric($total_price)) {
		print "$" . number_format($total_price,2);
		exit;
	}
break;

case "edit":

$total_price = 0;

foreach ($_SESSION['cart_item'] as $k => $v) {

if($_POST["code"] == $k) {

if($_POST["quantity"] == '0') {

unset($_SESSION["cart_item"][$k]);

} else {

$_SESSION['cart_item'][$k]["quantity"] = $_POST["quantity"];

}

$total_price += $_SESSION['cart_item'][$k]["price"] * $_SESSION['cart_item'][$k]["quantity"];

}

if($total_price!=0 && is_numeric($total_price)) {

print "$" . number_format($total_price,2);

exit;

}

break;

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

اگر آموزش های قبل را دنبال نکردید می توانید سورس کد کامل را از اینجا دانلود کنید و با خیال راحت در پروژه هایی که می نویسید استفاده کنید

برای دانلود سورس کد کامل ویرایش سبد خرید با php وajax از باکس دانلود استفاده کنید

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

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