How to make purely client side shopping cart calculation in jquery?

Question

Above is my shopping cart. Below I show the flow.

[product image clicked] -> ajax request fetches details from database for that particular product id and appends (product name,id and price automatically appended) via jquery.

[onfocus QTY] -> jquery autocalculates sub total and displays ->

also sends ajax request to calculate total,gst and total payment and this is where the problem begins.

Since the ajax request made onfocus, each time QTY textfield is focused, it goes to the php page and make calculation for total,gst and total payment thus the amount keep increasing beyond logic.

I save all values that passed to the php page in session. So each time,ajax request carries qty and sub total values it keeps adding to the session. To save the hassle, I would like to try out purely client side calculation for the white area just like how I calculate sub total without making ajax request.

Whats the way, can somebody give me idea on how to add total quantity and total sub_total for all items without having to send to PHP page for the calculation? Maybe can introduce to me jQuery array sort of thing please. I tried searching online but couldn't understand.

HTML





    
        Product
        Price
        Qty
        Sub Total
        
    


    
    
    

    
    Total 
    

    
    GST 6% 
    

    
    Discount (x%) 
    

    
    Total Payment

Script to append elements into form

 for (i = 0; i < data.length; i++) {
                        $(".header_tbl tbody").prepend(""+data[i].catalog_name+"RM "+data[i].price_normal+"");  
                      }

Uttam Kumar Roy · Accepted Answer

here is my approach:

$( document ).ready(function() {    

    $(document).on("input paste keyup", ".product_qty", function( event ) {         
        
        var product_quantity = 0;
        var product_price = 0;
        var gst_amount = 0;

        var sub_total = 0;
        var total_qty = 0; 
        var grand_total = 0

        product_quantity = $(this).val();
        product_price = $(this).parent().prev().html();

        sub_total = product_price * product_quantity;

        $(this).parent().next().html(sub_total);


        $('.product_qty' ).each( function( k, v ) {
            product_quantity = parseInt ( $(this).val() ) ? parseInt ( $(this).val() ) : 0;
            product_price = parseFloat($(this).parent().prev().html())?parseFloat($(this).parent().prev().html()):0;

            console.log(product_quantity);
            console.log(product_price);            

            sub_total = parseFloat ( product_price * product_quantity );

            console.log(sub_total);

            total_qty +=product_quantity;

            grand_total += sub_total;

        });

        if ( grand_total > 0 ){
            gst_amount = ( grand_total * 6 ) /100;
        }
         
        $("#total_qty").html(total_qty);        
        $("#total_amount").html(grand_total);        

        grand_total +=gst_amount;

        $("#gst_amount").html(gst_amount);        
        $("#discount_amount").html(0);        
        $("#grand_total").html(grand_total);  
      
    });
    //
    $(document).on("click", ".delete", function( event ) {
        
        var cart_item = 0;
        $(this).parent().parent().remove();

        cart_item = $('.product_qty').length;
        if ( cart_item <= 0 ) 
        {
            $("#total_qty").html('0');        
            $("#total_amount").html('0');        
            $("#gst_amount").html('0');        
            $("#discount_amount").html(0);        
            $("#grand_total").html('0');             
        } else {
            $('.product_qty').trigger('keyup');  
        }      
        
    }); 
    
    
});
// End Document Ready

    .bs-example{
        background: #355979;
        margin: 20px;
    }
    a {
        color:#FFF;
        font-weight: bold;
    }
    table{
        color:#FFF;
        font-weight: bold;
    }
    table input{
        color:#000;
    }
    .delete{
        color:#E13D3D;
        font-size: 20px;
        font-weight: bold;
    }
    .checkout{
        background: #FF002A;
    }
    .checkout a{
        color: #FFF;
        font-weight: bold;
    }






     
        
            
                
                
                
                
                
                       
            
                
                    Product
                    Price
                    Quantity
                    Sub Total
                     
                
            
            
                
                    Karpap Pushing Ayu
                    5
                    
                    25
                    x
                
                
                    Slimming Tea
                    25
                    
                    125
                    x
                
                
                    Tudung Shawl Butterfly
                    15
                    
                    45
                    x
                
                
                    Tudung Shawl Butterfly 5
                    20
                    
                    40
                    x
                 

                
                    Total
                     
                    15
                    235
                     
                 
                
                    GST 6 %
                     
                     
                    14.1
                     
                 
                
                    Discount  (x%)
                     
                     
                     
                     
                   
                
                    Total Payment
                     
                     
                    249.1
                     
                 
                
                    CHECKOUT

you have to change this as you need.

How to make purely client side shopping cart calculation in jquery?

Answers (2)

Related Questions