Cart Price Update on KeyUp JQuery

Cart Price Update on KeyUp JQuery

by bizamajig

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
    <div class="container">
        
                <div class="col-lg-8">
                    
                    
                    
          <div class="panel panel-default" id="content-formatting">
            <div class="panel-heading">PRODUCT RANGE TITLE </div>
            <p class="lead">A range of things that do this and this</p>
              
              
              <a class="btn btn-large btn-success btn-block" href="http://bootply.com/71500" rel="nofollow" target="_blank">Check Out</a><hr>
              <div class="row-fluid well">  
                     <strong id="total">Total: &euro;<span id="sum">0.00</span> </strong></div><br><hr>
              
              
                   
<div class="product img-thumbnail" data-price="2.50">
    <img src="http://placehold.it/170x100" class="img-thumbnail"><br>
        <p>Product 1</p><small>blablab lablab. blab lab l a ba lbalbla bla balb alb l abl. bal ba.</small> <br><label>Qty: <input class="quantityTxt form-control" type="text" value="1"></label>
    <span class="productTotal"></span>
</div>

<div class="product img-thumbnail" data-price="3.50">
    <img src="http://placehold.it/170x100" class="img-thumbnail"><br>
        <p>Product 2</p> <br><label>Qty: <input class="quantityTxt form-control" type="text" value="1"></label>
    <span class="productTotal"></span>
</div>
        
        <div class="product img-thumbnail" data-price="9.50">
    <img src="http://placehold.it/170x100" class="img-thumbnail"><br>
        <p>Product 3</p> <br><label>Qty:  <input class="quantityTxt form-control" type="text" value="1"></label>
    <span class="productTotal"></span>
</div>
        
        
            
            
    </div>  </div>          
            <div class="form-inline">
    <label...

CSS

body{background:#666666;padding:40px}

.product{display:inline-block;margin:12px;background:#eee}

.product input{width: 50px;}

.product {word-wrap:break-word;}

JavaScript

var updateTotal = function() {
 
    var sumtotal;
       var sum = 0;
    //Add each product price to total
    $(".product").each(function() {
        var price = $(this).data('price');
        var quantity = $('.quantityTxt', this).val();
   
        //Total for one product
        var subtotal = price*quantity;
        //Round to 2 decimal places.
        subtotal = subtotal.toFixed(2);        
        //Display subtotal in HTML element
        $('.productTotal', this).html(subtotal);

    });
    // total
       $('.productTotal').each(function() {
        sum += Number($(this).html());
    }); 
    
        

    $('#sum').html(sum.toFixed(2));
};

//Update total when quantity changes
$(".product .quantityTxt").keyup(function() {
    updateTotal();
});

//Update totals when page first loads
updateTotal();

// set this from local
    $('span.productTotal').each(function() {
        $(this).before("&euro;")
    }); 

// unit price
   $('.product p').each(function() {
       var $price = $(this).parents("div").data('price');
      $(this).before($price);
    });