2
Answers

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

Photo of Guest User

Guest User
2y
1.8k
1 JQuery

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>

Answers (2)