chap2 -> Creating templates -> The cart-item template

ko-cart/index.html

@@ -131,7 +131,27 @@
       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-item">
+      <div class="list-group-item" style="overflow: hidden">
+        <button type="button" class="close pull-right" data-bind="click:$root.removeFromCart">
+          <span>&times;</span>
+        </button>
+        <h4 class="" data-bind="text:product.name"></h4>
+        <div class="input-group cart-unit">
+          <input type="text" class="form-control" data-bind="textInput:units" readonly/>
+          <span class="input-group-addon">
+            <div class="btn-group-vertical">
+              <button class="btn btn-default btn-xs" data-bind="click:addUnit">
+                <i class="glyphicon glyphicon-chevron-up"></i>
+              </button>
+              <button class="btn btn-default btn-xs" data-bind="click:removeUnit">
+                <i class="glyphicon glyphicon-chevron-down"></i>
+              </button>
+            </div>
+          </span>
+        </div>
+      </div>
+    </script>
     <script type="text/html" id="cart"></script>
     <script type="text/html" id="order"></script>
     <script type="text/html" id="finish-order-modal"></script>

ko-cart/js/viewmodel.js

@@ -83,6 +83,13 @@ var vm = (function () {
     return total;
   })
 
+  var removeFromCart = function (data) {
+    var units = data.units();
+    var stock = data.product.stock();
+    data.product.stock(units + stock);
+    cart.remove(data);
+  }
+
   return {
     // first chapter
     searchTerm: searchTerm,
@@ -93,7 +100,8 @@ var vm = (function () {
     cart: cart,
     showCartDetails: showCartDetails,
     totalItems: totalItems,
-    grandTotal: grandTotal
+    grandTotal: grandTotal,
+    removeFromCart: removeFromCart
   };
 })();
 ko.applyBindings(vm);