To fix the issue where the subtotal is not showing correctly in the Cart Summary at the Bottom, we need to ensure that the JavaScript correctly updates the value for the .sub_total element in the cart summary, just as it does for the table's subtotal. not display sub total how to slove this problem i am new php devloper
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cart Summary</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
.fixed-bottom-clr1 {
background-color: #f8f9fa;
}
.badgescntr {
position: absolute;
left: 33%;
}
.medium {
font-size: 1.2rem;
}
</style>
</head>
<body>
<div class="container mt-5">
<h2>Price List</h2>
<table class="table table-bordered pricelist_table mb-0">
<thead>
<tr>
<th class="text-center">Product Name</th>
<th class="text-center">Price</th>
<th class="text-center">Quantity</th>
<th class="text-center">Total</th>
</tr>
</thead>
<tbody>
<!-- Product 1 -->
<tr>
<td class="text-center">Product 1</td>
<td class="text-center">50</td>
<td class="text-center">
<input type="number" class="form-control product-quantity" data-price="50" value="1" min="1">
</td>
<td class="text-center product-total">50</td>
</tr>
<!-- Product 2 -->
<tr>
<td class="text-center">Product 2</td>
<td class="text-center">30</td>
<td class="text-center">
<input type="number" class="form-control product-quantity" data-price="30" value="1" min="1">
</td>
<td class="text-center product-total">30</td>
</tr>
<!-- Total Calculation -->
<tr>
<td colspan="3" class="text-right">Subtotal:</td>
<td class="text-center sub_total">80</td>
</tr>
</tbody>
</table>
</div>
<!-- Fixed Cart Summary at Bottom -->
<div class="container py-2">
<div class="row justify-content-center">
<div class="col-lg-6 text-center fixed-bottom-clr1 px-4">
<div class="d-flex align-items-center justify-content-center">
<div class="medium fnt2 align-self-center">
<span class="total_products_count">2</span> items .
<i class="bi bi-currency-rupee"></i> <span class="sub_total">80.00</span>
</div>
<span class="px-2"> | </span>
<span class="medium fnt1 font-weight-bold align-self-center" style="position: relative;">
<div class="badges1 badgescntr medium total_products_count">2</div>
<i class="bi bi-cart3"></i> View Cart
</span>
</div>
</div>
</div>
</div>
<script>
// Function to update the total when quantity changes
document.querySelectorAll('.product-quantity').forEach(input => {
input.addEventListener('input', updateCart);
});
function updateCart() {
let totalItems = 0;
let subTotal = 0;
// Loop through all product rows and calculate the total and subtotal
document.querySelectorAll('.product-quantity').forEach(input => {
const quantity = parseInt(input.value) || 0;
const price = parseFloat(input.getAttribute('data-price')) || 0;
const productTotal = quantity * price;
// Update the individual product total
input.closest('tr').querySelector('.product-total').textContent = productTotal.toFixed(2);
// Update subtotal and total items
subTotal += productTotal;
totalItems += quantity;
});
// Update subtotal in both table and cart summary
document.querySelector('.sub_total').textContent = subTotal.toFixed(2);
document.querySelector('.total_products_count').textContent = totalItems;
}
// Initial call to update the cart
updateCart();
</script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
With reference to this code block
// Update subtotal in both table and cart summary
document.querySelector('.sub_total').textContent = subTotal.toFixed(2);
In this case document.querySelector will return only the 1st elemet. In your case you have 2x elements with the .sub_total class.
You need to select all of the elements with this class
Above block of code can be corrected as follow
// Update subtotal in both table and cart summary
let subtotals = (document.getElementsByClassName('sub_total'))
console.log(subtotals)
for (var i = 0; i < subtotals.length; i++) {
subtotals[i].textContent = subTotal.toFixed(2);
}
document.querySelector('.total_products_count').textContent = totalItems;
Here is a reference to the entire html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cart Summary</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
.fixed-bottom-clr1 {
background-color: #f8f9fa;
}
.badgescntr {
position: absolute;
left: 33%;
}
.medium {
font-size: 1.2rem;
}
</style>
</head>
<body>
<div class="container mt-5">
<h2>Price List</h2>
<table class="table table-bordered pricelist_table mb-0">
<thead>
<tr>
<th class="text-center">Product Name</th>
<th class="text-center">Price</th>
<th class="text-center">Quantity</th>
<th class="text-center">Total</th>
</tr>
</thead>
<tbody>
<!-- Product 1 -->
<tr>
<td class="text-center">Product 1</td>
<td class="text-center">50</td>
<td class="text-center">
<input type="number" class="form-control product-quantity" data-price="50" value="1" min="1">
</td>
<td class="text-center product-total">50</td>
</tr>
<!-- Product 2 -->
<tr>
<td class="text-center">Product 2</td>
<td class="text-center">30</td>
<td class="text-center">
<input type="number" class="form-control product-quantity" data-price="30" value="1" min="1">
</td>
<td class="text-center product-total">30</td>
</tr>
<!-- Total Calculation -->
<tr>
<td colspan="3" class="text-right">Subtotal:</td>
<td class="text-center sub_total">80</td>
</tr>
</tbody>
</table>
</div>
<!-- Fixed Cart Summary at Bottom -->
<div class="container py-2">
<div class="row justify-content-center">
<div class="col-lg-6 text-center fixed-bottom-clr1 px-4">
<div class="d-flex align-items-center justify-content-center">
<div class="medium fnt2 align-self-center">
<span class="total_products_count">2</span> items .
<i class="bi bi-currency-rupee"></i> <span class="sub_total">80.00</span>
</div>
<span class="px-2"> | </span>
<span class="medium fnt1 font-weight-bold align-self-center" style="position: relative;">
<div class="badges1 badgescntr medium total_products_count">2</div>
<i class="bi bi-cart3"></i> View Cart
</span>
</div>
</div>
</div>
</div>
<script>
// Function to update the total when quantity changes
document.querySelectorAll('.product-quantity').forEach(input => {
input.addEventListener('input', updateCart);
});
function updateCart() {
let totalItems = 0;
let subTotal = 0;
// Loop through all product rows and calculate the total and subtotal
document.querySelectorAll('.product-quantity').forEach(input => {
const quantity = parseInt(input.value) || 0;
const price = parseFloat(input.getAttribute('data-price')) || 0;
const productTotal = quantity * price;
// Update the individual product total
input.closest('tr').querySelector('.product-total').textContent = productTotal.toFixed(2);
// Update subtotal and total items
subTotal += productTotal;
totalItems += quantity;
});
// Update subtotal in both table and cart summary
document.querySelector('.sub_total').textContent = subTotal.toFixed(2);
document.querySelector('.total_products_count').textContent = totalItems;
}
// Initial call to update the cart
updateCart();
</script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>