chap02 -> Creating template -> The cart template

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

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