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

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

Hi Namish

See my changes prior to the given answer but i am still unsuccessful, below is my code

// jquery code

// 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
  $('#total').val(total.toFixed(0));
  return total.toFixed(0);
}

// php code

 $quantity) {
    $_SESSION['cart'][$product_id] = $quantity;
  }
  $total = $_POST['total'];
  echo 'success';
  exit;
}

?>

// html code


                    

// How to calculate discount as well both jquery and php side using this table?
Naimish Makwana3y agoPosted Apr 20, 2023, 4:05 PM
Based on the code you provided, it seems that you are already calculating the total amount of the items in the shopping cart in the calculate_total() function. However, you are only updating the text of the total td element (#total-amount) and not the actual value.

To update the actual value of the total amount, you can add a hidden input field to your HTML code:




Then, in the calculate_total() function, you can set the value of this input field to the calculated total:

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
  $('#total').val(total.toFixed(2)); // update the value of the hidden input field
  return total.toFixed(2);
}


Finally, when submitting the form to complete the purchase, you can retrieve the value of this input field using PHP and use it to process the payment:

$total = $_POST['total'];
// process the payment using the total amount


Thanks

                      
                        
                          Product
                          Quantity
                          Unit price
                          Discount
                          Total