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

در این آموزش , قصد داریم به شما نحوه ساخت سبد خرید با php و جی کویری (jQuery) به صورت ajax نشان بدیم . در آموزش قبلی نحوه ساخت سبد خرید با php را بدون jquery یا ajax را دیدیم .

در مثال سبد خرید , می تواینم یک محصول را بدون لود دوباره صفحه به سبد خرید اضافه کنیم و بعد با استفاده از jquery وضعیت محصول را به added یا اضافه شده تغییر می دهیم . مثل تصویر زیر که میبنید محصول به سبد خرید اضافه شده و دکمه مورد نظر به added تغییر یافته است .

لیست محصولات

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

<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">
			<form id="frmCart">
			<div class="product-image"><img src="<?php echo $product_array[$key]["image"]; ?>"></div>
			<div><strong><?php echo $product_array[$key]["name"]; ?></strong></div>
			<div class="product-price"><?php echo "$".$product_array[$key]["price"]; ?></div>
			<div><input type="text" id="qty_<?php echo $product_array[$key]["code"]; ?>" name="quantity" value="1" size="2" />
			<?php
				$in_session = "0";
				if(!empty($_SESSION["cart_item"])) {
					$session_code_array = array_keys($_SESSION["cart_item"]);
				    if(in_array($product_array[$key]["code"],$session_code_array)) {
						$in_session = "1";
				    }
				}
			?>
			<input type="button" id="add_<?php echo $product_array[$key]["code"]; ?>" value="Add to cart" class="btnAddAction cart-action" onClick = "cartAction('add','<?php echo $product_array[$key]["code"]; ?>')" <?php if($in_session != "0") { ?>style="display:none" <?php } ?> />
			<input type="button" id="added_<?php echo $product_array[$key]["code"]; ?>" value="Added" class="btnAdded" <?php if($in_session != "1") { ?>style="display:none" <?php } ?> />
			</div>
			</form>
		</div>
	<?php
			}
	}
	?>
</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><input type="text" id="qty_<?php echo $product_array[$key]["code"]; ?>" name="quantity" value="1" size="2" />

<?php

$in_session = "0";

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

$session_code_array = array_keys($_SESSION["cart_item"]);

if(in_array($product_array[$key]["code"],$session_code_array)) {

$in_session = "1";

}

<input type="button" id="add_<?php echo $product_array[$key]["code"]; ?>" value="Add to cart" class="btnAddAction cart-action" onClick = "cartAction('add','<?php echo $product_array[$key]["code"]; ?>')" <?php if($in_session != "0") { ?>style="display:none" <?php } ?> />

<input type="button" id="added_<?php echo $product_array[$key]["code"]; ?>" value="Added" class="btnAdded" <?php if($in_session != "1") { ?>style="display:none" <?php } ?> />

</div>

</form>

</div>

<?php

}

</div>

برای کپی صحیح و کامل کدها ، دابل کلیک کرده تا وارد محیط سفید و کپی شوید در غیر اینصورت امکان دارد اجرای کدها با مشکل روبرو شود

عملیات ajax با جی کویری

در اسکریپت زیر ما یک درخواست ajax را به صفحه ajax_action.php برای تغییر وضعیت محصول به added ارسال می کنیم و همچنین یک سیشن برای ذخیره محصول مورد نظر در سبد خرید کاربر می سازیم .

function cartAction(action,product_code) {
var queryString = "";
	if(action != "") {
		switch(action) {
			case "add":
				queryString = 'action='+action+'&code='+ product_code+'&quantity='+$("#qty_"+product_code).val();
			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);
		if(action != "") {
			switch(action) {
				case "add":
					$("#add_"+product_code).hide();
					$("#added_"+product_code).show();
				break;
				case "remove":
					$("#add_"+product_code).show();
					$("#added_"+product_code).hide();
				break;
				case "empty":
					$(".btnAddAction").show();
					$(".btnAdded").hide();
				break;
			}	 
		}
	},
	error:function (){}
	});	
}

function cartAction(action,product_code) {

var queryString = "";

if(action != "") {

switch(action) {

case "add":

queryString = 'action='+action+'&code='+ product_code+'&quantity='+$("#qty_"+product_code).val();

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

if(action != "") {

switch(action) {

case "add":

$("#add_"+product_code).hide();

$("#added_"+product_code).show();

break;

case "remove":

$("#add_"+product_code).show();

$("#added_"+product_code).hide();

break;

case "empty":

$(".btnAddAction").show();

$(".btnAdded").hide();

break;

}

error:function (){}

});

}

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

کد ساخت سبد خرید با php (فایل ajax_action.php)

این کد زمانی که درخواست ajax با جی کویری ارسال می شود , اجرا خواهد شد .

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

if(!empty($_POST["action"])) {
switch($_POST["action"]) {
	case "add":
		if(!empty($_POST["quantity"])) {
			$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'=>$_POST["quantity"], '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><?php echo $item["quantity"]; ?></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> <?php echo "$".$item_total; ?></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":

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

$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'=>$_POST["quantity"], '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><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> <?php echo "$".$item_total; ?></td>

</tr>

</tbody>

</table>

<?php

}

ساخت سبد خرید با php و ajax بسیار ساده و جذاب می باشد . و باعث می شود کاربر بسیار سریع و راحت سبد خرید خود را مدیریت کند و این موضوع تو بحث ux مهم و کاربردی است .

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

کلاس ها , عکس , دیتابیس و تمام فایل های استفاده شده در این آموزش را برای دانلود قرار دادیم تا اگر آموزش قبلی را دنبال نکردید به راحتی بتوانید از سورس کد استفاده کنید

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

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

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

لغو پاسخ

مهدی ۵ آبان ۱۳۹۸

سلام وقت بخیر مهندس جان اول از همه باید تشکر کنم بخاطر تمامی آموزش ها.موقع import کردن sql خطای Error

Static analysis:

۶ errors were found during analysis.

Unexpected beginning of statement. (near “id” at position 291)
Unexpected beginning of statement. (near “name” at position 297)
Unexpected beginning of statement. (near “code” at position 305)
Unexpected beginning of statement. (near “image” at position 313)
Unexpected beginning of statement. (near “price” at position 322)
Unrecognized statement type. (near “VALUES” at position 331)

SQL query:

CREATE TABLE IF NOT EXISTS tblproduct ( id int(8) NOT NULL AUTO_INCREMENT, name varchar(255) NOT NULL, code varchar(255) NOT NULL, image text NOT NULL, price double(10,2) NOT NULL, PRIMARY KEY (id), UNIQUE KEY product_code (code) ) INSERT INTO tblproduct (id, name, code, image, price) VALUES (1, ‘3D Camera’, ‘3DcAM01’, ‘product-images/camera.jpg’, 1500.00), (2, ‘External Hard Drive’, ‘USB02’, ‘product-images/external-hard-drive.jpg’, 800.00), (3, ‘Wrist Watch’, ‘wristWear03’, ‘product-images/watch.jpg’, 300.00) میده
ممنون میشمراهنمایی کنید.

پاسخ

حسن شفیعی ۸ آبان ۱۳۹۸

سلام. ممنون. خوشحالیم که مفید واقع شده.
ابتدا باید از قبل یک دیتابیس داشته باشید و بعد انتخاب آن دیتابیس این فایل sql رو که در واقع دو تا کویری ساخت جدول و اینسرت داده ها است رو ایمپورت کنید.
خود فایل sql بازم ویرایش داده شد از اول از باکس دانلود دریافت و وارد دیتابیس خود در phpmyadmin شوید و فایل sql را ایمپورت کنید
موفق باشید.

پاسخ

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

لیست محصولات

عملیات ajax با جی کویری

کد ساخت سبد خرید با php (فایل ajax_action.php)

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

دانـلود باکــس

ساخت سبد خرید در php بدون دیتابیس

نمایش سریع محصولات همانند آمازون با php و ajax

بزرگنمایی تصویر با php و جاوااسکریپت

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

لغو پاسخ

دوره آموزش ساخت دیجی کالا با php به همراه اپلیکیشن اندروید

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه