Cara Membuat Shopping-cart dengan jQuery AJAX

Hallo rekan-rekan Dumenity berjumpa lagi pada tutorialÂ kursuswebprogramming, di panduan kali ini kita akan belajar mengenai Cara Merancang Shopping-cart dengan jQuery AJAX. Pada panduan ini, kita akan merancang shopping cart menggunakan jQuery AJAX. Pada panduan sebelumnya, kita telah merancang kode keranjang belanja sederhana menggunakan PHP tanpa jQuery atau AJAX.Pada contoh keranjang belanja ini, kita dapat menambahkan produk ke keranjang bagi checkout. Menggunakan jQuery kami memperbarui status produk di UI apakah ditambahkan ke keranjang atau tak.

<div id=”product-grid”><br />
	<div class=”txt-heading”>Products</div><br />
	<?php<br />
	$product_array = $db_handle->runQuery(“SELECT * FROM tblproduct ORDER BY id ASC”);<br />
	if (!empty($product_array)) {<br />
		foreach($product_array as $key=>$value){<br />
	?><br />
		<div class=”product-item”><br />
			<form id=”frmCart”><br />
			<div class=”product-image”><img src=”<?php echo $product_array[$key][“image”]; ?>”></div><br />
			<div><strong><?php echo $product_array[$key][“name”]; ?></strong></div><br />
			<div class=”product-price”><?php echo “$”.$product_array[$key][“price”]; ?></div><br />
			<div><input type=”text” id=”qty_<?php echo $product_array[$key][“code”]; ?>” name=”quantity” value=”1″ size=”2″ /><br />
			<?php<br />
				$in_session = “0”;<br />
				if(!empty($_SESSION[“cart_item”])) {<br />
					$session_code_array = array_keys($_SESSION[“cart_item”]);<br />
				    if(in_array($product_array[$key][“code”],$session_code_array)) {<br />
						$in_session = “1”;<br />
				    }<br />
				}<br />
			?><br />
			<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 } ?> /><br />
			<input type=”button” id=”added_<?php echo $product_array[$key][“code”]; ?>” value=”Added” class=”btnAdded” <?php if($in_session != “1”) { ?>style=”display:none” <?php } ?> /><br />
			</div><br />
			</form><br />
		</div><br />
	<?php<br />
			}<br />
	}<br />
	?><br />
</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>

jQuery AJAX Cart Action

Script ini digunakan bagi mengirim panggilan AJAX ke PHP merujuk pada aksi.

function cartAction(action,product_code) {<br />
var queryString = “”;<br />
	if(action != “”) {<br />
		switch(action) {<br />
			case “add”:<br />
				queryString = ‘action=’+action+’&code=’+ product_code+’&quantity=’+$(“#qty_”+product_code).val();<br />
			break;<br />
			case “remove”:<br />
				queryString = ‘action=’+action+’&code=’+ product_code;<br />
			break;<br />
			case “empty”:<br />
				queryString = ‘action=’+action;<br />
			break;<br />
		}<br />
	}<br />
	jQuery.ajax({<br />
	url: “ajax_action.php”,<br />
	data:queryString,<br />
	type: “POST”,<br />
	success:function(data){<br />
		$(“#cart-item”).html(data);<br />
		if(action != “”) {<br />
			switch(action) {<br />
				case “add”:<br />
					$(“#add_”+product_code).hide();<br />
					$(“#added_”+product_code).show();<br />
				break;<br />
				case “remove”:<br />
					$(“#add_”+product_code).show();<br />
					$(“#added_”+product_code).hide();<br />
				break;<br />
				case “empty”:<br />
					$(“.btnAddAction”).show();<br />
					$(“.btnAdded”).hide();<br />
				break;<br />
			}<br />
		}<br />
	},<br />
	error:function (){}<br />
	});<br />
}

function cartAction(action,product_code) {

var queryString = “”;

if(action != “”) {

switch(action) {

case “add”:

queryString = ‘action=’+action+

(Visited 59 times, 1 visits today)

Leave a Reply Cancel reply