Hi Team
I have a dummy data from now and have an insert field for total, discount and unit price. How do i display this data to my table on html side? I do have a logic for it on jquery side. Let me share my code.
<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 isset($_SESSION['cart']) ? '<span id="cart-count">' . 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"><span id="total-amount">Total</span></th>
</tr>
</thead>
<tbody id="cart-items">
<tr>
<td><a ><img src="img/detailsquare.jpg" alt="White Blouse Armani"></a></td>
<td><a >White Blouse Armani</a></td>
<td>
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default btn-minus" type="button">-</button>
</span>
<input type="number" name="product1" value="0" min="1" class="form-control product-quantity" data-product-id="1">
<span class="input-group-btn">
<button class="btn btn-default btn-plus" type="button">+</button>
</span>
</div>
</td>
<td>R</td>
<td></td>
<td>R</td>
<td><a><i class="fa fa-trash-o"></i></a></td>
</tr>
<tr>
<td><a><img src="img/detailsquare.jpg" alt="White Blouse Armani"></a></td>
<td><a>White Blouse Armani</a></td>
<td>
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default btn-minus" type="button">-</button>
</span>
<input type="number" name="product1" value="0" min="1" class="form-control product-quantity" data-product-id="1">
<span class="input-group-btn">
<button class="btn btn-default btn-plus" type="button">+</button>
</span>
</div>
</td>
<td>R</td>
<td>%13</td>
<td>R</td>
<td><a><i class="fa fa-trash-o"></i></a></td>
</tr>
// php code
<?php
session_start();
//$_SESSION['cart'];
require_once 'dbconn.php';
// add to cart
if(isset($_POST['id'])) {
$product_id = $_POST['id'];
if(isset($_SESSION['cart'][$product_id])) {
$_SESSION['cart'][$product_id]++;
} else {
$_SESSION['cart'][$product_id] = 1;
}
echo count($_SESSION['cart']);
exit;
}
// update cart
if(isset($_POST['update_cart'])) {
$cart_data = $_POST['cart_data'];
foreach($cart_data as $product_id => $quantity) {
$_SESSION['cart'][$product_id] = $quantity;
}
$total = $_POST['total'];
echo json_encode(array('success' => true, 'total' => $total));
exit;
}
?>
// jquery code
function displayCart() {
var cart = getCart();
var cartItems = $('#cart-items');
cartItems.empty(); // remove any existing rows from the table
for (var productId in cart) {
var product = getProductId(productId);
var price = parseFloat(product.price);
var quantity = parseInt(cart[productId]);
var discount = parseFloat(product.discount);
// Check if all values are numbers before adding to the table
if (!isNaN(price) && !isNaN(quantity) && !isNaN(discount)) {
var subtotal = price * quantity * (1 - discount);
var row = $('<tr>').appendTo(cartItems);
$('<td>').text(product.name).appendTo(row);
$('<td>').text('$' + price.toFixed(2)).appendTo(row);
$('<td>').text(quantity).appendTo(row);
$('<td>').text(discount.toFixed(2)).appendTo(row);
$('<td>').text('$' + subtotal.toFixed(2)).appendTo(row);
}
}
calculate_total();
}
$(document).ready(function() {
$('.btn-plus').click(function() {
var productId = $(this).closest('.input-group').find('.product-quantity').data('product-id');
var quantityInput = $(this).closest('.input-group').find('.product-quantity');
var currentQuantity = parseInt(quantityInput.val());
var newQuantity = currentQuantity + 1;
quantityInput.val(newQuantity);
addToCart(productId, newQuantity);
});
$('.btn-minus').click(function() {
var productId = $(this).closest('.input-group').find('.product-quantity').data('product-id');
var quantityInput = $(this).closest('.input-group').find('.product-quantity');
var currentQuantity = parseInt(quantityInput.val());
if (currentQuantity > 1) {
var newQuantity = currentQuantity - 1;
quantityInput.val(newQuantity);
addToCart(productId, newQuantity);
}
});
// Initialize the cart count in the navbar
updateCartCount();
});