PHP Shopping Cart dengan jQuery Drag and Drop

1 67

Dalam tutorial ini, kita akan melihat contoh keranjang belanja atau shopping cart. Dalam contoh ini, kami menambahkan produk ke keranjang dengan drag and drop. Dalam tutorial sebelumnya, kita telah melihat shopping cart multi-tab wizard menggunakan jQuery AJAX.

Dalam contoh ini, kami memiliki item produk yang dapat diseret. Kami menambahkan barang-barang ini ke keranjang dengan menyeret dan menjatuhkan. Data produk draggable dapat ditransfer ke PHP melalui panggilan AJAX untuk melakukan gerobak. Drag event object digunakan untuk mengakses data ini selama event handling.

Gambar Produk Draggable HTML

Ini menunjukkan kode HTML untuk menampilkan daftar gambar produk dengan nama dan harga dari database. Kita bisa menyeret gambar ini dan masuk ke keranjang belanja DIV.

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

jQuery Tarik dan Drop add-to-cart Action

Kode ini untuk penanganan add-to-cart dengan jQuery drag and drop. Pada tutorial sebelumnya, kita telah melihat bagaimana cara memindahkan gambar menggunakan drag dan drop jQuery.

Kode ini menjadi elemen draggable elemen id pada drag. Dengan referensi id ini, memicu aksi addtocart AJAX pada drop event untuk memperbarui item keranjang di database.

$(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 Cart Action

Kode ini memanggil permintaan AJAX berdasarkan tindakan keranjang (gerobak keranjang belanja, keranjang-keranjang, keranjang kosong) yang diminta oleh pengguna.

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 (){}
	});
}

Tindakan Keranjang Belanja PHP

Kode ini mencakup fungsi sisi PHP yang dipanggil untuk permintaan AJAX. Ini memberi field masukan untuk mengedit kuantitas item keranjang tambahan.

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

Setelah menambahkan ke keranjang kita bisa mengubah jumlah barang. Berdasarkan jumlah yang dipilih, jumlah total dihitung secara dinamis. Kode itu,

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

Get real time updates directly on you device, subscribe now.

1 Comment
  1. […] mungkin dengan menambahkan fitur yang diperlukan ke keranjang belanja. Misalnya, dengan memberikan drag and drop dapat menjadi fitur utama dalam keranjang belanja dan meningkatkan penjualan. Sebelumnya, dalam […]

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.