Scoped Cart

Updating values within scope

by davestein

HTML

<form id="say-form" onsubmit="return false;" action="#">
    <table cellspacing="0" cellpadding="0">
        <tr>
            <th>Name</th>
            <th>Qty</th>
            <th>Price</th>
            <th colspan="2">Total</th>
            
        </tr>
        <tr>
            <td class="title">Prod A</td>
            <td class="qty" id="qty_a">0</td>
            <td class="price">$<span id="price_a">5.00</span></td>
            <td class="price">$<span id="total_price_a">0.00</span></td>
            <td>
              <input type="button" id="add_a" value="+" />
              <input type="button" id="sub_a" value="-" />
            </td>
        </tr>
        <tr>
            <td class="title">Prod B</td>
            <td class="qty" id="qty_b">0</td>
            <td class="price">$<span id="price_b">10.00</span></td>
            <td class="price">$<span id="total_price_b">0.00</span></td>
            <td>
              <input type="button" id="add_b" value="+" />
              <input type="button" id="sub_b" value="-" />
            </td>
        </tr>
        <tr>
            <td></td>
            <td colspan="2" style="font-weight: bold;">Grand Total:</td>
            <td>$<span id="grand_total">0.00</span></td>
        </tr>
    </table>
</form><br />
<br />
<div id="cart"></div>

CSS

td, th { padding: 3px 0; }
th { font-weight: bold; }
.title { width: 100px; }
.qty { width: 50px; }
.price { width: 75px; }
tr:hover td { background-color: #EFEFEF; }
input { padding: 3px; }

JavaScript

var Cart = {
    
    products : [ 'a', 'b' ],
    
    prod_info : {
  
        a : {
            items : 0,
            price : 5
        },
        
        b : {
            items : 0,
            price : 10   
        }
    }, // prod_info
    
    init : function() {
        
        for ( var i = 0; i < Cart.products.length; ++i ) {
            Cart.initializeProduct( Cart.products[i] );   
        }
        
    }, // init 
    
    updateGrandTotal : function() {
    
        var grand_total = 0;
        
        for ( key in Cart.prod_info ) {
          grand_total = grand_total + ( Cart.prod_info[ key ].items * Cart.prod_info[ key ].price );
        }
        
        document.getElementById( 'grand_total' ).innerHTML = grand_total.toFixed( 2 );
        
    }, // updateGrandTotal 
    
    updateItems : function( product, qty, total_price ) {
    
        var price = product.items * product.price;
        
        qty.innerHTML = product.items;
        
        total_price.innerHTML = price.toFixed( 2 );
        
        Cart.updateGrandTotal();
        
    }, // updateItems
    
    initializeProduct : function( product_id ) {
   
        var product     = Cart.prod_info[ product_id ];
        var qty         = document.getElementById( 'qty_' + product_id );
        var add         = document.getElementById( 'add_' + product_id );
        var sub         = document.getElementById( 'sub_' + product_id );
        var total_price = document.getElementById( 'total_price_' + product_id );
        
        add.onclick = function() {
          product.items = product.items + 1;
          Cart.updateItems( product, qty, total_price );
        };
        
        sub.onclick = function() {
            
          if ( product.items == 0 ) {
            return false;
          }
            
          product.items = product.items - 1;
          Cart.updateItems( product, qty, total_price );
            
        };
        
        
        
    } //...