ساخت سبد خرید با php و جی کوئری به صورت drag & drop

در این سری از آموزش ساخت سبد خرید با php قصد داریم به شما نحوه ساخت سبد خرید با php و جی کوئری به صورت drag & drop (کشیدن و رها کردن) را نشان می دهیم . در آموزش قبلی ساخت سبد خرید با php و ajax را یاد گرفیتیم .

در این مثال ، ما یک سری محصول داریم که می توانیم آن ها را با کشیدن و رها کردن در سبد خرید به صورت ajaxی به سبد خریدمان اضافه کنیم . در هنگام کشیدن و رها کردن محصولات در قسمت سبد خرید ، در پشت صحنه یک عملیات ajax انجام می شود . از رویداد drag (کشیدن) برای دسترسی به داده های محصول استفاده شده می کنیم.

صفحه html محصولات

کد HTML زیر برای نمایش لیستی از عکس های محصولات همراه با اسم و قیمت هرکدام از دیتابیس استفاده شده است . می توانیم این عکس ها را در قسمت div سبد خرید drag and drop کنیم.

<div id="product-grid">
	<div class="txt-heading">Products</div>
	<?php
	$product_array = $db_handle->runQuery("SELECT * FROM tblproduct ORDER BY id ASC");
	if (!empty($product_array)) { 
		foreach($product_array as $key=>$value){
	?>
		<div class="product-item" data-name="<?php echo $product_array[$key]["name"]; ?>" data-price="<?php echo "$".$product_array[$key]["price"]; ?>">
			<div class="product-image"><img class="draggable" src="<?php echo $product_array[$key]["image"]; ?>" id="<?php echo $product_array[$key]["code"]; ?>"></div>
			<div><strong><?php echo $product_array[$key]["name"]; ?></strong></div>
			<div class="product-price"><?php echo "$".$product_array[$key]["price"]; ?></div>
		</div>
	<?php
			}
	}
	?>
</div>
<div class="clear-float"></div>
<div id="shopping-cart">
	<div class="txt-heading">Shopping Cart <a id="btnEmpty" onClick="cartAction('empty','');">Empty Cart</a></div>
	<div id="cart-item"></div>
</div>

<div class="txt-heading">Products</div>

<?php

$product_array = $db_handle->runQuery("SELECT * FROM tblproduct ORDER BY id ASC");

if (!empty($product_array)) {

foreach($product_array as $key=>$value){

<div class="product-item" data-name="<?php echo $product_array[$key]["name"]; ?>" data-price="<?php echo "$".$product_array[$key]["price"]; ?>">

</div>

<?php

}

</div>

<div class="txt-heading">Shopping Cart <a id="btnEmpty" onClick="cartAction('empty','');">Empty Cart</a></div>

</div>

عملیات drag and drop (کشیدن و رها کردن) با جی کوئری

کد زیر برای مدیریت عملیات افزودن به سبد خرید با php و جی کوئری به صورت drag & drop استفاده شده است .

کد زیر id عکس های محصولات ما را برای درگ کردن دریافت می کند . با داشتن id المنت ، هنگامی که محصول مورد نظر در محل سبد خرید دراپ (drop) می شود ، یک درخواست ajax برای بروز رسانی مقدار سبد خرید در دیتابیس اجرا می شود .

$(document).ready(function() {
	$('.draggable').on('dragstart', function(e){
	   var source_id = $(this).attr('id');
	   e.originalEvent.dataTransfer.setData("source_id", source_id); 
	});
	
	$("#cart-item").on('dragenter', function (e){
		e.preventDefault();
		$(this).css('background', '#BBD5B8');
	});

	$("#cart-item").on('dragover', function (e){
		e.preventDefault();
	});

	$("#cart-item").on('drop', function (e){
		e.preventDefault();
		$(this).css('background', '#FFFFFF');
		var product_code = e.originalEvent.dataTransfer.getData('source_id');
		cartAction('add',product_code);
	});
});

$(document).ready(function() {

$('.draggable').on('dragstart', function(e){

var source_id = $(this).attr('id');

e.originalEvent.dataTransfer.setData("source_id", source_id);

});

$("#cart-item").on('dragenter', function (e){

e.preventDefault();

$(this).css('background', '#BBD5B8');

});

$("#cart-item").on('dragover', function (e){

e.preventDefault();

});

$("#cart-item").on('drop', function (e){

e.preventDefault();

$(this).css('background', '#FFFFFF');

var product_code = e.originalEvent.dataTransfer.getData('source_id');

cartAction('add',product_code);

});

کد jQuery برای درخواست ajax

تابع cartAction یک درخواست اجکس بر اساس عملیات مورد نظر (افزودن به سبد خرید – add ، حذف محصول از سبد خرید – remove ، خالی کردن سبد خرید – empty ) را که توسط کاربر درخواست شده است را اجرا می کند .

function cartAction(action,product_code) {
	var queryString = "";
	if(action != "") {
		switch(action) {
			case "add":
				queryString = 'action='+action+'&code='+ product_code;
			break;
			case "remove":
				queryString = 'action='+action+'&code='+ product_code;
			break;
			case "empty":
				queryString = 'action='+action;
			break;
		}	 
	}
	jQuery.ajax({
	url: "ajax_action.php",
	data:queryString,
	type: "POST",
	success:function(data){
		$("#cart-item").html(data);
	},
	error:function (){}
	});
}

function cartAction(action,product_code) {

var queryString = "";

if(action != "") {

switch(action) {

case "add":

queryString = 'action='+action+'&code='+ product_code;

break;

case "remove":

queryString = 'action='+action+'&code='+ product_code;

break;

case "empty":

queryString = 'action='+action;

break;

}

jQuery.ajax({

url: "ajax_action.php",

data:queryString,

type: "POST",

success:function(data){

$("#cart-item").html(data);

error:function (){}

});

}

کد php اجرای عملیات سبد خرید

کد php زیر شامل توابعی برای اجرای درخواست ajaxی که ارسال می شود است . همچنین یک فیلد برای ویرایش تعداد محصول اضافه شده به سبد خرید را نمایش می دهد .

<?php
session_start();
require_once("dbcontroller.php");
$db_handle = new DBController();

if(!empty($_POST["action"])) {
switch($_POST["action"]) {
	case "add":
		$productByCode = $db_handle->runQuery("SELECT * FROM tblproduct WHERE code='" . $_POST["code"] . "'");
		$itemArray = array($productByCode[0]["code"]=>array('name'=>$productByCode[0]["name"], 'code'=>$productByCode[0]["code"], 'quantity'=>'1', 'price'=>$productByCode[0]["price"]));
		
		if(!empty($_SESSION["cart_item"])) {
			if(in_array($productByCode[0]["code"],$_SESSION["cart_item"])) {
				foreach($_SESSION["cart_item"] as $k => $v) {
						if($productByCode[0]["code"] == $k)
							$_SESSION["cart_item"][$k]["quantity"] = $_POST["quantity"];
				}
			} else {
				$_SESSION["cart_item"] = array_merge($_SESSION["cart_item"],$itemArray);
			}
		} else {
			$_SESSION["cart_item"] = $itemArray;
		}
	break;
	case "remove":
		if(!empty($_SESSION["cart_item"])) {
			foreach($_SESSION["cart_item"] as $k => $v) {
					if($_POST["code"] == $k)
						unset($_SESSION["cart_item"][$k]);
					if(empty($_SESSION["cart_item"]))
						unset($_SESSION["cart_item"]);
			}
		}
	break;
	case "empty":
		unset($_SESSION["cart_item"]);
	break;		
}
}
?>
<?php
if(isset($_SESSION["cart_item"])){
    $item_total = 0;
?>	
<table cellpadding="10" cellspacing="1">
<tbody>
<tr>
<th><strong>Name</strong></th>
<th><strong>Code</strong></th>
<th><strong>Quantity</strong></th>
<th><strong>Price</strong></th>
<th><strong>Action</strong></th>
</tr>	
<?php		
    foreach ($_SESSION["cart_item"] as $item){
		?>
				<tr>
				<td><strong><?php echo $item["name"]; ?></strong></td>
				<td><?php echo $item["code"]; ?></td>
				<td><input name="quantity" value="<?php echo $item["quantity"]; ?>" size=3 onChange="calculateTotal(<?php echo $item["quantity"]; ?>,this.value,<?php echo $item["price"]; ?>);" /></td>
				<td align=right><?php echo "$".$item["price"]; ?></td>
				<td><a onClick="cartAction('remove','<?php echo $item["code"]; ?>')" class="btnRemoveAction cart-action">Remove Item</a></td>
				</tr>
				<?php
        $item_total += ($item["price"]*$item["quantity"]);
		}
		?>

<tr>
<td colspan="5" align=right><strong>Total: </strong> $<div id="totalAmount" style="float:right;"><?php echo $item_total; ?></div></td>
</tr>
</tbody>
</table>		
  <?php
}
?>

<?php

session_start();

require_once("dbcontroller.php");

$db_handle = new DBController();

if(!empty($_POST["action"])) {

switch($_POST["action"]) {

case "add":

$productByCode = $db_handle->runQuery("SELECT * FROM tblproduct WHERE code='" . $_POST["code"] . "'");

$itemArray = array($productByCode[0]["code"]=>array('name'=>$productByCode[0]["name"], 'code'=>$productByCode[0]["code"], 'quantity'=>'1', 'price'=>$productByCode[0]["price"]));

if(!empty($_SESSION["cart_item"])) {

if(in_array($productByCode[0]["code"],$_SESSION["cart_item"])) {

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

if($productByCode[0]["code"] == $k)

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

}

} else {

$_SESSION["cart_item"] = array_merge($_SESSION["cart_item"],$itemArray);

}

} else {

$_SESSION["cart_item"] = $itemArray;

}

break;

case "remove":

if(!empty($_SESSION["cart_item"])) {

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

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

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

if(empty($_SESSION["cart_item"]))

unset($_SESSION["cart_item"]);

}

break;

case "empty":

unset($_SESSION["cart_item"]);

break;

}

<?php

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

$item_total = 0;

<tbody>

<tr>

<th><strong>Quantity</strong></th>

<th><strong>Price</strong></th>

<th><strong>Action</strong></th>

</tr>

<?php

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

<tr>

<td><input name="quantity" value="<?php echo $item["quantity"]; ?>" size=3 onChange="calculateTotal(<?php echo $item["quantity"]; ?>,this.value,<?php echo $item["price"]; ?>);" /></td>

<td><a onClick="cartAction('remove','<?php echo $item["code"]; ?>')" class="btnRemoveAction cart-action">Remove Item</a></td>

</tr>

<?php

$item_total += ($item["price"]*$item["quantity"]);

}

<tr>

<td colspan="5" align=right><strong>Total: </strong> $<div id="totalAmount" style="float:right;"><?php echo $item_total; ?></div></td>

</tr>

</tbody>

</table>

<?php

}

بعد از افزودن به سبد خرید با php و جی کوئری به صورت drag & drop می توانیم تعداد رو هم تغییر بدیم . بر اساس مقدار عددی که کاربر تعیین می کند مقدار مبلع کل سبد به صورت لحظه ای با کد زیر تغییر می کند .

function calculateTotal(qty,qty_new,price) {
	var total = $('#totalAmount').html();
	total = parseInt(total) - (parseInt(qty)*parseInt(price));
	total = parseInt(total) + (parseInt(qty_new)*parseInt(price));
	$('#totalAmount').html(total);
}

function calculateTotal(qty,qty_new,price) {

var total = $('#totalAmount').html();

total = parseInt(total) - (parseInt(qty)*parseInt(price));

total = parseInt(total) + (parseInt(qty_new)*parseInt(price));

$('#totalAmount').html(total);

}

امیدوارم از آموزش ساخت سبد خرید با php و جی کوئری به صورت drag & drop لذت برده باشید و با توجه به آموزش های قبل سبد خریدی که در پروژه هاتون استفاده می کندی را توسعه بدید .

اگر آموزش های قبلی ساخت سبد خرید را دنبال نکردید ، می توانید از سورس کد مورد نظر که برای دانلود کذاشتیم ، استفاده کنید و به راحتی آن را بر روی سایت یا لوکال هاست برای تمرین پیاده سازی کنید.

برای دانلود سورس کد کامل ساخت سبد خرید با php و جی کوئری به صورت drag & drop از باکس دانلود استفاده کنید

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