در این سری از آموزش ساخت سبد خرید با php قصد داریم به شما نحوه ساخت سبد خرید با php و جی کوئری به صورت drag & drop (کشیدن و رها کردن) را نشان می دهیم . در آموزش قبلی ساخت سبد خرید با php و ajax را یاد گرفیتیم .
در این مثال ، ما یک سری محصول داریم که می توانیم آن ها را با کشیدن و رها کردن در سبد خرید به صورت ajaxی به سبد خریدمان اضافه کنیم . در هنگام کشیدن و رها کردن محصولات در قسمت سبد خرید ، در پشت صحنه یک عملیات ajax انجام می شود . از رویداد drag (کشیدن) برای دسترسی به داده های محصول استفاده شده می کنیم.
صفحه html محصولات
کد HTML زیر برای نمایش لیستی از عکس های محصولات همراه با اسم و قیمت هرکدام از دیتابیس استفاده شده است . می توانیم این عکس ها را در قسمت div سبد خرید drag and drop کنیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<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> |
عملیات drag and drop (کشیدن و رها کردن) با جی کوئری
کد زیر برای مدیریت عملیات افزودن به سبد خرید با php و جی کوئری به صورت drag & drop استفاده شده است .
کد زیر id عکس های محصولات ما را برای درگ کردن دریافت می کند . با داشتن id المنت ، هنگامی که محصول مورد نظر در محل سبد خرید دراپ (drop) می شود ، یک درخواست ajax برای بروز رسانی مقدار سبد خرید در دیتابیس اجرا می شود .
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
$(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 ) را که توسط کاربر درخواست شده است را اجرا می کند .
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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ی که ارسال می شود است . همچنین یک فیلد برای ویرایش تعداد محصول اضافه شده به سبد خرید را نمایش می دهد .
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
<?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 و جی کوئری به صورت drag & drop می توانیم تعداد رو هم تغییر بدیم . بر اساس مقدار عددی که کاربر تعیین می کند مقدار مبلع کل سبد به صورت لحظه ای با کد زیر تغییر می کند .
1 2 3 4 5 6 |
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 از باکس دانلود استفاده کنید
موفق و پیروز باشید.