From 7256b15da7197ba41e750e4ea3aeabd531d6bfdc Mon Sep 17 00:00:00 2001
From: Jason Zhu <jasonzhuyq@outlook.com>
Date: Wed, 20 Apr 2022 22:02:20 +1000
Subject: [PATCH] chap02 -> Creating template -> The cart template

---
 ko-cart/index.html      | 12 +++++++++++-
 ko-cart/js/viewmodel.js | 15 ++++++++++++++-
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/ko-cart/index.html b/ko-cart/index.html
index a67ca75..fa0885c 100644
--- a/ko-cart/index.html
+++ b/ko-cart/index.html
@@ -152,7 +152,17 @@
         </div>
       </div>
     </script>
-    <script type="text/html" id="cart"></script>
+    <script type="text/html" id="cart">
+      <button type="button" class="close pull-right" data-bind="click:hideCartDetails">
+        <span>&times;</span>
+      </button>
+      <h1>Cart</h1>
+      <div data-bind="template: {name: 'cart-item', foreach:cart}" class="list-group"></div>
+      <div data-bind="template: {name: 'cart-widget'}"></div>
+      <button class="btn btn-primary btn-sm" data-binid="click:showOrder">
+        Confirm Order
+      </button>
+    </script>
     <script type="text/html" id="order"></script>
     <script type="text/html" id="finish-order-modal"></script>
     <!-- vendor library -->
diff --git a/ko-cart/js/viewmodel.js b/ko-cart/js/viewmodel.js
index 02a3cc4..c09e1bf 100644
--- a/ko-cart/js/viewmodel.js
+++ b/ko-cart/js/viewmodel.js
@@ -66,6 +66,7 @@ var vm = (function () {
     cart(tmpCart);
   };
   
+  // The cart-widget template
   var totalItems = ko.computed(function() {
     var tmpCart = cart();
     var total = 0;
@@ -83,6 +84,7 @@ var vm = (function () {
     return total;
   })
 
+  // The cart-item template
   var removeFromCart = function (data) {
     var units = data.units();
     var stock = data.product.stock();
@@ -90,6 +92,15 @@ var vm = (function () {
     cart.remove(data);
   }
 
+  // The cart template
+  var hideCartDetails = function() {
+    $('#cartContainer').addClass("hidden");
+  };
+  var showOrder = function () {
+    $('#catalogContainer').addClass("hidden");
+    $('#orderContainer').removeClass("hidden");
+  }
+
   return {
     // first chapter
     searchTerm: searchTerm,
@@ -101,7 +112,9 @@ var vm = (function () {
     showCartDetails: showCartDetails,
     totalItems: totalItems,
     grandTotal: grandTotal,
-    removeFromCart: removeFromCart
+    removeFromCart: removeFromCart,
+    hideCartDetails: hideCartDetails,
+    showOrder: showOrder
   };
 })();
 ko.applyBindings(vm);