Hi Team
I have a button that adds an item but its not increment nor decrementing, can anyone can help with this? I am using jquery and php pdo to do. Below is my logic both front end and back end. How do i also show quantity to the table and total, when this is to be send to checkout page?
// html code
<!--Basket for item to be added to cart-->
<div id="search-not-mobile" class="navbar-collapse collapse"></div><a data-toggle="collapse" #search" class="btn navbar-btn btn-primary d-none d-lg-inline-block"><span class="sr-only">Toggle search</span><i class="fa fa-search"></i></a>
<div id="basket-overview" class="navbar-collapse collapse d-none d-lg-block">
<a "basket.html" class="btn btn-primary navbar-btn">
<i class="fa fa-shopping-cart"></i>
<span><?php echo count($_SESSION['cart']); ?></span>
</a>
</div>
<!--end bakset to add cart-->
<div class="container">
<div class="row">
<div class="col-lg-12">
<!-- breadcrumb-->
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a >Home</a></li>
<li aria-current="page" class="breadcrumb-item active">Shopping cart</li>
</ol>
</nav>
</div>
<div id="basket" class="col-lg-9">
<div class="box">
<form method="post" action="add_to_cart.php">
<h1>Shopping cart</h1>
<p class="text-muted">You currently have <span id="cart-count"><?php echo count($_SESSION['cart']); ?></span>
<p id="cart-message" class="text-success" style="display: none;"></p>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th colspan="2">Product</th>
<th>Quantity</th>
<th>Unit price</th>
<th>Discount</th>
<th colspan="2">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td><a><img src="img/detailsquare.jpg" alt="White Blouse Armani"></a></td>
<td><a>White Blouse Armani</a></td>
<td>
<button class="update-cart" data-product-id="1" data-type="add">+</button>
<span id="cart-count-item1"><?php echo (isset($_SESSION['cart'][1])) ? $_SESSION['cart'][1] : 0; ?></span>
<button class="update-cart" data-product-id="1" data-type="subtract">-</button>
</td>
<td></td>
<td></td>
<td></td>
<td><a ><i class="fa fa-trash-o"></i></a></td>
</tr>
<tr>
<td><a ><img src="img/basketsquare.jpg" alt="Black Blouse Armani"></a></td>
<td><a >Black Blouse Armani</a></td>
<td>
<button class="add-to-cart" data-product-id="1">Add to Cart</button>
</td>
<td></td>
<td></td>
<td></td>
<td><a ><i class="fa fa-trash-o"></i></a></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5">Total</th>
<th colspan="2"></th>
</tr>
</tfoot>
</table>
</div>
// jquery code
$(document).on('click', '.update-cart', function() {
var product_id = $(this).data('product-id');
var type = $(this).data('type');
var quantity = parseInt($('#cart-count-item'+product_id).text());
if (type == 'add') {
quantity += 1;
} else if (type == 'subtract') {
quantity -= 1;
if (quantity < 0) {
quantity = 0;
}
}
// Send AJAX request to update cart quantity
$.ajax({
url: 'update_cart.php',
type: 'POST',
data: {product_id: product_id, quantity: quantity},
success: function(response) {
// Update cart count
$('#cart-count').text(response);
$('#cart-count-item'+product_id).text(quantity);
}
});
});
// php code
<?php
session_start();
if (isset($_POST['product_id']) && isset($_POST['quantity'])) {
$product_id = $_POST['product_id'];
$quantity = $_POST['quantity'];
if ($quantity == 0) {
// Remove item from cart
unset($_SESSION['cart'][$product_id]);
} else {
// Update cart quantity
$_SESSION['cart'][$product_id] = $quantity;
}
// Return updated cart count
$cart_count = count($_SESSION['cart']);
echo $cart_count;
}
?>