chap02 -> Creating templates -> The cart-widget template

ko-cart/index.html

@@ -127,7 +127,10 @@
         </div> <!-- /.modal-diaglog -->
       </div> <!-- /.modal -->
     </script>
-    <script type="text/html" id="cart-widget"></script>
+    <script type="text/html" id="cart-widget">
+      Total Items: <span data-bind="text:totalItems"></span>
+      Price: <span data-bind="text:grandTotal"></span>
+    </script>
     <script type="text/html" id="cart-item"></script>
     <script type="text/html" id="cart"></script>
     <script type="text/html" id="order"></script>

ko-cart/js/viewmodel.js

@@ -65,6 +65,23 @@ var vm = (function () {
     }
     cart(tmpCart);
   };
+  
+  var totalItems = ko.computed(function() {
+    var tmpCart = cart();
+    var total = 0;
+    tmpCart.forEach(function(item) {
+      total += parseInt(item.units(), 10);
+    });
+    return total;
+  })
+  var grandTotal = ko.computed(function() {
+    var tmpCart = cart();
+    var total = 0;
+    tmpCart.forEach(function(item) {
+      total += (item.units() * item.product.price());
+    });
+    return total;
+  })
 
   return {
     // first chapter