Hallo sahabat Dumenity berjumpa lagi dalam tutorial kursuswebprogramming, pada tutorial kali ini kita akan belajar tentang Cara Membuat Shopping-cart dengan jQuery AJAX. Dalam tutorial ini, kita akan membuat shopping cart menggunakan jQuery AJAX. Dalam tutorial sebelumnya, kita telah membuat kode keranjang belanja sederhana menggunakan PHP tanpa jQuery atau AJAX.Dalam contoh keranjang belanja ini, kita bisa menambahkan produk ke keranjang untuk checkout. Menggunakan jQuery kami memperbarui status produk di UI apakah ditambahkan ke keranjang atau tidak.
|
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 |
<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> |
jQuery AJAX Cart Action
Script ini digunakan untuk mengirim panggilan AJAX ke PHP berdasarkan aksi.
|
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 |
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 (){} }); } |
Setelah aksi AJAX, ia akan memperbarui UI dengan item keranjang di sesi ini.
Kode Belanja PHP
Kode PHP ini akan dieksekusi pada panggilan AJAX via fungsi jQuery.
|
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 77 78 79 80 |
<?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 } ?> View Demo |
Oke itulah tadi pembahasan saya tentang Cara Membuat Shopping-cart dengan jQuery AJAX, semoga bermanfaat.