I have created a shopping cart script in order to add or delete products using PHP and MySQL. The script works as expected, but it is not very comfortable. I am trying to use it with ajax calls.
1. I add the selected product in the shopping cart
$('#add-product').on('click',function() {
$.ajax({
var product_id = $(this).data('id'); //Product id
url: 'cart.php',
data:{add:product_id },
type:'GET',
success: function(data) {
if(!data.error){
$('#show-cart').html(data);
}
}
});
});
2. cart.php
<?php
require_once('resource/init.php');
//ADD A PRODUCT IN THE SHOPPING CART
if(isset($_GET['add'])) {
$query = query("SELECT * FROM products WHERE id = ".escape_string($_GET['add']));
confirm($query);
while ($row = fetch_array($query)) {
if($row['quantity'] != $_SESSION['product_'.$_GET['add']]){
$_SESSION['product_'.$_GET['add']] +=1;
}
}
}
//DELETE PRODUCT FROM SHOPPING CART
if(isset($_GET['delete'])) {
$_SESSION['product_'.$_GET['delete']] = '0';
unset($_SESSION['total']);
unset($_SESSION['quantity']);
}
$total = 0;
$item_quantity = 0;
$item_name = 1;
$item_number = 1;
$amount = 1;
$quantity = 1;
foreach ($_SESSION as $name => $value) {
if(substr($name, 0,8) == 'product_' && $value > 0){
$lenght =strlen($name);
$id = substr($name, 8, $lenght);
$query = query("SELECT * FROM products WHERE id = ".escape_string($id)." ");
confirm($query);
while($row = fetch_array($query)) {
$sub_price = pr_get_sub_price($row['price'],$row['discount'],$row['id'],$value,$lang);
$item_quantity += $value;
$product_image = 'images/products/'.$row['image'];
$price = show_product_price($row['price'],$row['discount'],$lang);
$discounted_price = get_product_price_by_discount($row['price'],$row['discount'],$row['id'],$lang);
?>
<!--THIS IS THE SHOPPING CART-->
<table>
<tr style="text-align:left">
<td><a href="#"><img src="<?php echo $product_image;?>" alt="cart-hover" style="float:left;width: 58px; margin-right:14px;"/></a></td>
<td><a title="<?php echo $row['title'];?>" href="#" style="margin-right:10px;"><span class="cart-title"><?php echo $row['title'];?> (<?php echo $value;?>)</span></a></td>
<td><span style="font-size: 90%; margin-right: 8px; position:relative;top:2px;"><?php echo $price;?> <?php echo $discounted_price;?></span></td>
<!--DELETE BUTTON-->
<td>
<button data-id = "<?php echo $row['id'];?>" class="delete-product"> <i class="fa fa-close"></i> Delete</button></td>
</tr>
</table>
<input type="hidden" name="item_name_<?php echo $item_name;?>" value="<?php echo $row['title'];?>">
<input type="hidden" name="item_number_<?php echo $item_number;?>" value="<?php echo $row['id'];?>">
<input type="hidden" name="amount_<?php echo $amount;?>" value="<?php echo $row['price'];?>">
<input type="hidden" name="quantity_<?php echo $quantity;?>" value="<?php echo $value;?>">
<?php
$item_name++;
$item_number++;
$amount++;
$quantity++;
$_SESSION['total'] = $total += $sub_price;
$_SESSION['quantity'] = $item_quantity;
}
}
}
?>
<!--DELETE PRODUCT-->
<script>
$('.delete-product').click(function() {
var product_id = $(this).data('id');//PRODUCT ID
$.ajax({
url: 'cart.php?delete=' + product_id,
type: 'get',
success:function(data){
$('#show-cart').html(data);
}
});
});
</script>
The scripts above work as expected, but not for the DELETE action.
If I have, for istance, a product in the shopping cart: Product one (3) $250.00
and I click on the DELETE icon, the selected product continues to be shown in the shopping cart as it was in the beginning before clicking on the DELETE icon: Product one (3) $250.00
If I try to add the same product in the cart, then it will be displayed starting with the value 1: Product one (1) $250.00
This is the first time that I work using PHP/MySQL with Ajax and I do not know how to solve this issue.