Jason
/
safaribook-knockout-essentials
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: Jason:e52b7bb9787a8e733b81283b7cc2708ca464373c
Branches Tags
Jason:chap3
Jason:chap2
Jason:master
...
compare: Jason:e078b83455ce1dc7f625bd14ca77ee98bbfd869b
Branches Tags
Jason:chap3
Jason:chap2
Jason:master

7 Commits
e52b7bb978 ... e078b83455

Author SHA1 Message Date
Jason Zhu e078b83455 chap02 -> Creating templates -> The finish-order-modal template 2022-04-20 22:36:33 +10:00
Jason Zhu 93dae838eb chap02 -> Creating templates -> The order template 2022-04-20 22:33:50 +10:00
Jason Zhu 7256b15da7 chap02 -> Creating template -> The cart template 2022-04-20 22:04:15 +10:00
Jason Zhu a9fdd8d516 chap2 -> Creating templates -> The cart-item template 2022-04-20 21:54:35 +10:00
Jason Zhu 16d677a98c chap02 -> Creating templates -> The cart-widget template (Bug Fix) 2022-04-20 21:38:38 +10:00
Jason Zhu b1fc664fe9 chap02 -> Creating templates -> The cart-widget template 2022-04-20 21:30:56 +10:00
Jason Zhu b299143ee2 chap02 -> Creating templates -> The add-to-cart-modal template 2022-04-20 19:25:18 +10:00
2 changed files with 192 additions and 17 deletions
Show Stats Expand all files Collapse all files

153
ko-cart/index.html
View File

@ -10,17 +10,9 @@
<div class="row" id="catalogContainer">
<div class="col-xs-12" data-bind="template:{name:'header'}"></div>
<div class="col-xs-6" data-bind="template:{name:'catalog'}"></div>
<div
id="cartContainer"
class="col-xs-6 well hidden"
data-bind="template:{name:'cart'}"
></div>
<div id="cartContainer" class="col-xs-6 well hidden" data-bind="template:{name:'cart'}"></div>
</div>
<div
class="row hidden"
id="orderContainer"
data-bind="template:{name:'order'}"
></div>
<div class="row hidden" id="orderContainer" data-bind="template:{name:'order'}"></div>
<div data-bind="template: {name:'add-to-catalog-modal'}"></div>
<div data-bind="template: {name:'finish-order-modal'}"></div>
</div>
@ -84,12 +76,141 @@
</tfoot>
</table>
</script>
<script type="text/html" id="add-to-catalog-modal"></script>
<script type="text/html" id="cart-widget"></script>
<script type="text/html" id="cart-item"></script>
<script type="text/html" id="cart"></script>
<script type="text/html" id="order"></script>
<script type="text/html" id="finish-order-modal"></script>
<script type="text/html" id="add-to-catalog-modal">
<div class="modal fade" id="addToCatalogModal">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal" role="form" data-bind="with:newProduct">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button>
<h3>Add New Product to the Catalog</h3>
</div>
<div class="modal-body">
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control" placeholder="Name" data-bind="textInput:name">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control" placeholder="Price" data-bind="textInput:price">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control" placeholder="Stock" data-bind="textInput:stock">
</div>
</div>
</div>
<div class="modal-footer">
<div class="form-group">
<div class="col-sm-12">
<button type="submit" class="btn btn-default" data-bind="{click:$parent.addProduct}">
<i class="glyphicon glyphicon-plus-sign"></i> Add Product
</button>
</div>
</div>
</div>
</form>
</div> <!-- /.modal-content -->
</div> <!-- /.modal-diaglog -->
</div> <!-- /.modal -->
</script>
<script type="text/html" id="cart-widget">
Total Items: <span data-bind="text:totalItems"></span>
Price: <span data-bind="text:grandTotal"></span>
</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">
<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">
<div class="col-xs-12">
<button class="btn btn-sm btn-primary" data-bind="click:showCatalog">
Back to catalog
</button>
<button class="btn btn-sm btn-primary" data-bind="click:finishOrder">
Buy & finish
</button>
</div>
<div class="col-xs-6">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Units</th>
<th>Subtotal</th>
</tr>
</thead>
<tbody data-bind="foreach:cart">
<tr>
<td data-bind="text:product.name"></td>
<td data-bind="text:product.price"></td>
<td data-bind="text:units"></td>
<td data-bind="text:subtotal"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"></td>
<td>
Total: <span data-bind="text:grandTotal"></span>
</td>
</tr>
</tfoot>
</table>
</div>
</script>
<script type="text/html" id="finish-order-modal">
<div class="modal fade" id="finishOrderModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<h2>Your order has been completed!</h2>
</div>
<div class="modal-footer">
<div class="form-group">
<div class="col-sm-12">
<button type="submit" class="btn btn-success" data-dismiss="modal">Continue Shopping</button>
</div>
</div>
</div>
</div>
</div>
</div>
</script>
<!-- vendor library -->
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>

56
ko-cart/js/viewmodel.js
View File

@ -65,6 +65,53 @@ var vm = (function () {
}
cart(tmpCart);
};
// The cart-widget template
var totalItems = ko.computed(function() {
var tmpCart = cart();
var total = 0;
tmpCart.forEach(function(item) {
total += parseInt(item.units(), 10);
});
return total;
})
var grandTotal = ko.computed(function() {
var tmpCart = cart();
var total = 0;
tmpCart.forEach(function(item) {
total += (item.units() * item.product.price());
});
return total;
})
// The cart-item template
var removeFromCart = function (data) {
var units = data.units();
var stock = data.product.stock();
data.product.stock(units + stock);
cart.remove(data);
}
// The cart template
var hideCartDetails = function() {
$('#cartContainer').addClass("hidden");
};
var showOrder = function () {
$('#catalogContainer').addClass("hidden");
$('#orderContainer').removeClass("hidden");
}
// The order template
var showCatalog = function () {
$("#catalogContainer").removeClass("hidden");
$("$orderContainer").addClass("hidden");
};
var finishOrder = function() {
cart([]);
hideCartDetails();
showCatalog();
$("#finishOrderModal").modal('show');
}
return {
// first chapter
@ -74,7 +121,14 @@ var vm = (function () {
addProduct: addProduct,
// second chapter
cart: cart,
showCartDetails: showCartDetails
showCartDetails: showCartDetails,
totalItems: totalItems,
grandTotal: grandTotal,
removeFromCart: removeFromCart,
hideCartDetails: hideCartDetails,
showOrder: showOrder,
showCatalog: showCatalog,
finishOrder: finishOrder
};
})();
ko.applyBindings(vm);