From 4b8c3312f05d5f23f2672da8564965119f1bccf6 Mon Sep 17 00:00:00 2001
From: "jason.zhu" <jason.zhu@xero.com>
Date: Thu, 27 May 2021 05:43:48 +0000
Subject: [PATCH] chap2->Creating templates->The header template

---
 ko-cart/index.html      | 19 ++++++++++++++++++-
 ko-cart/js/viewmodel.js | 11 +++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/ko-cart/index.html b/ko-cart/index.html
index aa7870f..e2baf47 100644
--- a/ko-cart/index.html
+++ b/ko-cart/index.html
@@ -26,7 +26,24 @@
     </div>
 
     <!-- templates -->
-    <script type="text/html" id="header"></script>
+    <script type="text/html" id="header">
+      <h1>Catalog</h1>
+
+      <button
+        class="btn btn-primary btn-sm"
+        data-toggle="modal"
+        data-target="#addToCatalogModal"
+      >
+        Add New Product
+      </button>
+      <button
+        class="btn btn-primary btn-sm"
+        data-bind="click: showCartDetails, css:{ disabled: cart().length  < 1}"
+      >
+        Show Cart Details
+      </button>
+      <hr />
+    </script>
     <script type="text/html" id="catalog"></script>
     <script type="text/html" id="add-to-catalog-modal"></script>
     <script type="text/html" id="cart-widget"></script>
diff --git a/ko-cart/js/viewmodel.js b/ko-cart/js/viewmodel.js
index 4f4c56d..889e3b3 100644
--- a/ko-cart/js/viewmodel.js
+++ b/ko-cart/js/viewmodel.js
@@ -40,12 +40,23 @@ var vm = (function () {
     });
     return filtered;
   });
+  
+  var cart = ko.observableArray([]);
+  var showCartDetails = function () {
+    if (cart().length > 0) {
+      $("#cartContainer").removeClass("hidden");
+    }
+  };
 
   return {
+    // first chapter
     searchTerm: searchTerm,
     catalog: filteredCatalog,
     newProduct: newProduct,
     addProduct: addProduct,
+    // second chapter
+    cart: cart,
+    showCartDetails: showCartDetails
   };
 })();
 ko.applyBindings(vm);