Making cart to increase and decrease correctly

Hi Team

I have cart and its not updating correctly. The cart suppose to start from 0 if a user did not + and when a user click + or - it must update accordingly including the value of the price should change to. Currently my logic is not doing that at the moment and using javascript to do this and need some help.

// javascript

$(document).ready(function() {
  // Add to cart button click event
  $('.btn-plus').on('click', function(e) {
    e.preventDefault();
    var quantityInput = $(this).closest('.input-group').find('input');
    var quantityValue = parseInt(quantityInput.val());

    // Increase quantity value and update input
    quantityInput.val(quantityValue + 1);

    // Update cart value and total
    updateCart();
  });

  // Remove from cart button click event
  $('.btn-minus').on('click', function(e) {
    e.preventDefault();
    var quantityInput = $(this).closest('.input-group').find('input');
    var quantityValue = parseInt(quantityInput.val());

    // Decrease quantity value and update input
    if (quantityValue > 0) {
      quantityInput.val(quantityValue - 1);

      // Update cart value and total
      updateCart();
    }
  });

  // Function to update cart value and total
  function updateCart() {
    var cartValue = 0;
    var cartTotal = 0;

    // Loop through each product row
    $('tbody tr').each(function() {
      var quantityInput = $(this).find('input');
      var quantity = parseInt(quantityInput.val());
      var price = parseFloat($(this).find('.align-middle:nth-child(2)').text().replace('R', ''));

      // Update cart value and total
      cartValue += quantity;
      cartTotal += quantity * price;
    });

    // Update cart value and total in the HTML
    $('.badge').text(cartValue);
    $('.cart-total').text('R' + cartTotal.toFixed(2));
  }

  // Initialize the cart value and total on page load
  updateCart();
});

// html code

  
                    
                    0
                




        

            

                

                    

                        

                            
Products
                            
Price
                            
Quantity
                            
Total
                            
Remove
                        
                    
                    

                        

                            
 Colorful Stylish Shirt
                            
R150
                            

                                

                                    

                                        
                                        
                                        
                                    
    
3 Replies
Know the answer? Post it — somebody with the same question will find it here.
Sign in to answer this question
It is the same account you read, post and publish with — and you will come straight back to this page.
Sign inCreate an account
Mohamed Azarudeen Z3y agoPosted May 10, 2023, 2:23 PM
Hi Gcobani Mkontwana 

One thing you can try is to add some console log statements to your updateCart() function to see if the values are being calculated correctly. For example, you can add the following lines at the end of the function:

console.log('Cart value: ' + cartValue); console.log('Cart total: ' + cartTotal);

Then, open your browser's developer console and check the console output when you update the quantity of a product. This will give you more information about what's going wrong.

If you're still having trouble, you can share your updated code and any error messages you're seeing, and I can try to help you further.
GU
Guest User3y agoPosted May 10, 2023, 1:28 PM
Hi Mohamed

I have update the function update Cart, but i can see i am still experience the same issue it defaults to 5 instead of 0. Yet when incrementing the quantity its not updating nor the price. I have used debugger just to see if my current update-cart.js does not receive any errors. There are none, also try to clear the catche and i m not winning.
Mohamed Azarudeen Z3y agoPosted May 10, 2023, 12:20 PM
Hi 

It seems like you are missing the logic to start the cart value from 0 when the page loads. To implement this, you can add the following line at the beginning of your `updateCart()` function:

// Set cart value to 0
var cartValue = 0;


This will ensure that the cart value starts from 0 when the function is called.

Next, you can modify your existing logic to update the cart value and total based on the current quantity value. To achieve this, you can modify the `updateCart()` function as follows:

function updateCart() {
  var cartValue = 0;
  var cartTotal = 0;

  // Loop through each product row
  $('tbody tr').each(function() {
    var quantityInput = $(this).find('input');
    var quantity = parseInt(quantityInput.val());
    var price = parseFloat($(this).find('.align-middle:nth-child(2)').text().replace('R', ''));

    // Set cart value to the sum of all quantity values
    cartValue += quantity;

    // Calculate the total price for this row and add it to the cart total
    var rowTotal = quantity * price;
    cartTotal += rowTotal;

    // Update the total for this row
    $(this).find('.align-middle:nth-child(4)').text('R' + rowTotal.toFixed(2));
  });

  // Update cart value and total in the HTML
  $('.badge').text(cartValue);
  $('.cart-total').text('R' + cartTotal.toFixed(2));
}


Here, we first set the cart value to 0 and then loop through each product row to calculate the total price for that row and add it to the cart total. We also update the total price for that row in the HTML.

Note that we are using `toFixed(2)` to format the total price to two decimal places.

I hope this helps you resolve the issue with your cart update logic!