How to calculate the total in shopping cart using jquery and php?

Question

Hi Team

My total to calculate items added on the shopping cart is not showing actual total. How do i achieve this on jqeury and php?

 

// jquery

/**
*@author:Gcobani Mkontwana
*@date:18/04/2023
* this updates, delete shopping cart.
*/

// Get the cart from local storage
function getCart() {
  var cart = localStorage.getItem('cart');
  if (cart) {
    return JSON.parse(cart);
  } else {
    return {};
  }
}

// Save the cart to local storage
function saveCart(cart) {
  localStorage.setItem('cart', JSON.stringify(cart));
}

// Update the cart count in the navbar
function updateCartCount() {
  var cartCount = Object.values(getCart()).reduce((a, b) => a + b, 0);
  $('#cart-count').text(cartCount);
}

// update total to the shopping-cart.
function calculate_total() {
  var cart = getCart();
  var total = 0;
  for (var productId in cart) {
    var product = getProduct(productId);
    var price = parseFloat(product.price);
    var quantity = parseInt(cart[productId]);
    var subtotal = price * quantity;
    total += subtotal;
  }
  $('#total-amount').text('$' + total.toFixed(2)); // update the text of the total td element
  return total.toFixed(2);
}




$(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);
    }
  });



function addToCart(productId, quantity) {
  var cart = getCart();
  if (cart.hasOwnProperty(productId)) {
    var newQuantity = parseInt(quantity);
    if (newQuantity <= 0) {
      delete cart[productId];
    } else {
      cart[productId] = newQuantity;
    }
  } else {
    cart[productId] = parseInt(quantity);
  }
  saveCart(cart);
  updateCartCount();
}

      // Display message
  var productName = $('#product-name-' + productId).text();
  $('#cart-message').text(quantity + 'x ' + productName + ' added to cart').show();
  
  setTimeout(function() {
    $('#cart-message').fadeOut('slow');
  }, 3000);


  // Initialize the cart count in the navbar
  updateCartCount();
});

// html code

<td>R</td>
  <td>%13</td>
  <td>R</td>
  <td><a ><i class="fa fa-trash-o"></i></a></td>
</tr>

                      </tbody>
                      <tfoot>
                        <tr>
                          <th colspan="5" id="total-amount">Total</th>
                          <th colspan="2"></th>
                          
                        </tr>
                      </tfoot>
                    </table>
                  </div>
                  <p id="cart-message" class="text-success" style="display: none;"></p>