chap2->Creating templates->The header template

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>

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);