Hi Team

I have a dummy data from now and have an insert field for total, discount and unit price. How do i display this data to my table on html side? I do have a logic for it on jquery side. Let me share my code.

              

                

                  
Shopping cart
                  
You currently have ' . count($_SESSION['cart']) . '' : ''; ?>

                  

                  

                    

// php code
 $quantity) {
    $_SESSION['cart'][$product_id] = $quantity;
  }
  $total = $_POST['total'];
  echo json_encode(array('success' => true, 'total' => $total));
  exit;
}

?>

// jquery code

function displayCart() {
    var cart = getCart();
    var cartItems = $('#cart-items');
    cartItems.empty(); // remove any existing rows from the table
    for (var productId in cart) {
      var product = getProductId(productId);
      var price = parseFloat(product.price);
      var quantity = parseInt(cart[productId]);
      var discount = parseFloat(product.discount);

      // Check if all values are numbers before adding to the table
      if (!isNaN(price) && !isNaN(quantity) && !isNaN(discount)) {
        var subtotal = price * quantity * (1 - discount);
        var row = $('').appendTo(cartItems);
        $('');
    row.append($('

                      

                        

                          
Product
                          
Quantity
                          
Unit price
                          
Discount
                          
Total

                        
                      
                      

                        

                          

                          
White Blouse Armani
                          

                

                
                -
                
                
              
              +
            
          
                          
                          
R
                          

                          
R
                          

                        
                        

  

  
White Blouse Armani
  

    

      
        -
      
      
      
        +
      
    
  
  
R
  
%13
  
R
  

').text(product.name).appendTo(row);
        $('
').text('$' + price.toFixed(2)).appendTo(row);
        $('
').text(quantity).appendTo(row);
        $('
').text(discount.toFixed(2)).appendTo(row);
        $('
').text('$' + subtotal.toFixed(2)).appendTo(row);
      }
    }
    calculate_total();
  }

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

  // Initialize the cart count in the navbar
  updateCartCount();
});
1 Reply
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
Naimish Makwana3y agoPosted Apr 26, 2023, 8:37 AM
Accepted answer
To display data in the table on the HTML side, you can make use of jQuery to loop through your dummy data, create table rows and append them to the table body. Here's an example of how you could modify the displayCart function in your jQuery code to achieve this:

function displayCart() {
  var cart = getCart();
  var cartItems = $('#cart-items');
  cartItems.empty(); // remove any existing rows from the table
  var total = 0; // initialize total variable
  for (var productId in cart) {
    var product = getProductId(productId);
    var price = parseFloat(product.price);
    var quantity = parseInt(cart[productId]);
    var discount = parseFloat(product.discount);
    var subtotal = price * quantity * (1 - discount);
    total += subtotal; // add current subtotal to total
    var row = $('
').text(product.name));
    row.append($('
').text(quantity));
    row.append($('
').text('$' + price.toFixed(2)));
    row.append($('
').text((discount * 100).toFixed(0) + '%'));
    row.append($('
').text('$' + subtotal.toFixed(2)));
    cartItems.append(row); // add row to table body
  }
  $('#total-amount').text('$' + total.toFixed(2)); // update total amount in table
}


Thanks