From b1fc664fe9ce07e7c01598717713321899e1a91b Mon Sep 17 00:00:00 2001
From: Jason Zhu <jasonzhuyq@outlook.com>
Date: Wed, 20 Apr 2022 21:30:56 +1000
Subject: [PATCH] chap02 -> Creating templates -> The cart-widget template

---
 ko-cart/index.html      |  5 ++++-
 ko-cart/js/viewmodel.js | 17 +++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/ko-cart/index.html b/ko-cart/index.html
index 67b2aab..3e6a8dc 100644
--- a/ko-cart/index.html
+++ b/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>
diff --git a/ko-cart/js/viewmodel.js b/ko-cart/js/viewmodel.js
index 8e88005..c91dfc9 100644
--- a/ko-cart/js/viewmodel.js
+++ b/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