Compare commits
5 Commits
e078b83455
...
fe598fc132
| Author | SHA1 | Date |
|---|---|---|
 Jason Zhu
|
fe598fc132 | |
|
Jason Zhu
|
708353b7f8 | |
|
Jason Zhu
|
1b13bd0e0c | |
|
Jason Zhu
|
9b7f2fefbe | |
|
Jason Zhu
|
0e06cb0806 |
|
|
@ -1,223 +1,39 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>KO Shopping Cart</title>
|
<title>KO Shopping Cart</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
|
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class="row" id="catalogContainer">
|
<div class="row" data-bind="if: visibleCatalog">
|
||||||
<div class="col-xs-12" data-bind="template:{name:'header'}"></div>
|
<div
|
||||||
<div class="col-xs-6" data-bind="template:{name:'catalog'}"></div>
|
class="col-xs-12"
|
||||||
<div id="cartContainer" class="col-xs-6 well hidden" data-bind="template:{name:'cart'}"></div>
|
data-bind="template:{name:'header'}"
|
||||||
</div>
|
></div>
|
||||||
<div class="row hidden" id="orderContainer" data-bind="template:{name:'order'}"></div>
|
<div
|
||||||
<div data-bind="template: {name:'add-to-catalog-modal'}"></div>
|
class="col-xs-6"
|
||||||
<div data-bind="template: {name:'finish-order-modal'}"></div>
|
data-bind="template:{name:'catalog'}"
|
||||||
</div>
|
></div>
|
||||||
|
<div class="col-xs-6 well hidden" data-bind="if: visibleCart">
|
||||||
<!-- templates -->
|
<div class="well" data-bind="template:{name:'cart'}"></div>
|
||||||
<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">
|
|
||||||
<div class="input-group">
|
|
||||||
<span class="input-group-addon">
|
|
||||||
<i class="glyphicon glyphicon-search"></i> Search
|
|
||||||
</span>
|
|
||||||
<input type="text" class="form-control" data-bind="textInput:searchTerm">
|
|
||||||
</div>
|
|
||||||
<table class="table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Name</th>
|
|
||||||
<th>Price</th>
|
|
||||||
<th>Stock</th>
|
|
||||||
<th></th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody data-bind="foreach:catalog">
|
|
||||||
<tr data-bind="style:lineColor">
|
|
||||||
<td data-bind="text:name"></td>
|
|
||||||
<td data-bind="text:price"></td>
|
|
||||||
<td data-bind="text:stock"></td>
|
|
||||||
<td>
|
|
||||||
<button class="btn btn-primary" data-bind="click:$parent.addToCart">
|
|
||||||
<i class="glyphicon glyphicon-plus-sign"></i> Add
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
<tfoot>
|
|
||||||
<tr>
|
|
||||||
<td colspan="3">
|
|
||||||
<strong>Items:</strong><span data-bind="text:catalog().length"></span>
|
|
||||||
</td>
|
|
||||||
<td colspan="1">
|
|
||||||
<span data-bind="template:{name: 'cart-widget'}"></span>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tfoot>
|
|
||||||
</table>
|
|
||||||
</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">×</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>
|
||||||
<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>×</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>
|
</div>
|
||||||
</span>
|
<div class="row" data-bind="if: visibleCart">
|
||||||
|
<div data-bind="template:{name:'order'}"></div>
|
||||||
|
</div>
|
||||||
|
<div data-bind="template: {name:'add-to-catalog-modal'}"></div>
|
||||||
|
<div data-bind="template: {name:'finish-order-modal'}"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</script>
|
<!-- vendor library -->
|
||||||
<script type="text/html" id="cart">
|
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
|
||||||
<button type="button" class="close pull-right" data-bind="click:hideCartDetails">
|
<script type="text/javascript" src="js/bootstrap.js"></script>
|
||||||
<span>×</span>
|
<script type="text/javascript" src="js/knockout-3.2.0.js"></script>
|
||||||
</button>
|
<!-- app -->
|
||||||
<h1>Cart</h1>
|
<script type="text/javascript" src="js/models/Product.js"></script>
|
||||||
<div data-bind="template: {name: 'cart-item', foreach:cart}" class="list-group"></div>
|
<script type="text/javascript" src="js/models/CartProduct.js"></script>
|
||||||
<div data-bind="template: {name: 'cart-widget'}"></div>
|
<script type="text/javascript" src="js/viewmodel.js"></script>
|
||||||
<button class="btn btn-primary btn-sm" data-binid="click:showOrder">
|
</body>
|
||||||
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>
|
|
||||||
<script type="text/javascript" src="js/knockout-3.2.0.js"></script>
|
|
||||||
<!-- app -->
|
|
||||||
<script type="text/javascript" src="js/models/Product.js"></script>
|
|
||||||
<script type="text/javascript" src="js/models/CartProduct.js"></script>
|
|
||||||
<script type="text/javascript" src="js/viewmodel.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,134 +1,169 @@
|
||||||
"use strict";
|
|
||||||
var vm = (function () {
|
var vm = (function () {
|
||||||
var catalog = ko.observableArray([
|
"use strict";
|
||||||
Product(1, "T-Shirt", 10.0, 20),
|
|
||||||
Product(2, "Trousers", 20.0, 10),
|
|
||||||
Product(3, "Shirt", 15.0, 20),
|
|
||||||
Product(4, "Shorts", 5.0, 10),
|
|
||||||
]);
|
|
||||||
|
|
||||||
var newProduct = Product("", "", "", "");
|
var visibleCatalog = ko.observable(true);
|
||||||
var clearNewProduct = function () {
|
var visibleCart = ko.observable(false);
|
||||||
newProduct.name("");
|
|
||||||
newProduct.price("");
|
|
||||||
newProduct.stock("");
|
|
||||||
};
|
|
||||||
|
|
||||||
var addProduct = function (context) {
|
var catalog = ko.observableArray([
|
||||||
var id = new Date().valueOf(); // random id from time
|
Product(1, "T-Shirt", 10.0, 20),
|
||||||
|
Product(2, "Trousers", 20.0, 10),
|
||||||
|
Product(3, "Shirt", 15.0, 20),
|
||||||
|
Product(4, "Shorts", 5.0, 10),
|
||||||
|
]);
|
||||||
|
|
||||||
var product = Product(id, context.name(), context.price(), context.stock());
|
var newProduct = Product("", "", "", "");
|
||||||
catalog.push(product);
|
var clearNewProduct = function () {
|
||||||
clearNewProduct();
|
newProduct.name("");
|
||||||
};
|
newProduct.price("");
|
||||||
|
newProduct.stock("");
|
||||||
|
};
|
||||||
|
|
||||||
var searchTerm = ko.observable("");
|
var addProduct = function (context) {
|
||||||
var filteredCatalog = ko.computed(function () {
|
var id = new Date().valueOf(); // random id from time
|
||||||
// if catalog is empty return empty array
|
|
||||||
if (!catalog()) {
|
var product = Product(
|
||||||
return [];
|
id,
|
||||||
}
|
context.name(),
|
||||||
var filter = searchTerm().toLowerCase();
|
context.price(),
|
||||||
// if filter is empty return all the catalog
|
context.stock()
|
||||||
if (!filter) {
|
);
|
||||||
return catalog();
|
catalog.push(product);
|
||||||
}
|
clearNewProduct();
|
||||||
//filter data
|
$('#addToCatalogModal').modal('hide');
|
||||||
var filtered = ko.utils.arrayFilter(catalog(), function (item) {
|
|
||||||
var strProp = ko.unwrap(item["name"]).toLocaleLowerCase();
|
};
|
||||||
return (strProp.indexOf(filter) > -1);
|
|
||||||
|
var searchTerm = ko.observable("");
|
||||||
|
var filteredCatalog = ko.computed(function () {
|
||||||
|
// if catalog is empty return empty array
|
||||||
|
if (!catalog()) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
var filter = searchTerm().toLowerCase();
|
||||||
|
// if filter is empty return all the catalog
|
||||||
|
if (!filter) {
|
||||||
|
return catalog();
|
||||||
|
}
|
||||||
|
//filter data
|
||||||
|
var filtered = ko.utils.arrayFilter(catalog(), function (item) {
|
||||||
|
var strProp = ko.unwrap(item["name"]).toLocaleLowerCase();
|
||||||
|
return strProp.indexOf(filter) > -1;
|
||||||
|
});
|
||||||
|
return filtered;
|
||||||
});
|
});
|
||||||
return filtered;
|
|
||||||
});
|
|
||||||
|
|
||||||
var cart = ko.observableArray([]);
|
var cart = ko.observableArray([]);
|
||||||
var showCartDetails = function () {
|
var showCartDetails = function () {
|
||||||
if (cart().length > 0) {
|
if (cart().length > 0) {
|
||||||
$("#cartContainer").removeClass("hidden");
|
visibleCart(true);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
var addToCart = function(data) {
|
var addToCart = function (data) {
|
||||||
var item = null;
|
var item = null;
|
||||||
var tmpCart = cart();
|
var tmpCart = cart();
|
||||||
var n = tmpCart.length;
|
var n = tmpCart.length;
|
||||||
while(n--) {
|
while (n--) {
|
||||||
if (tmpCart[n].product.id() === data.id()) {
|
if (tmpCart[n].product.id() === data.id()) {
|
||||||
item = tmpCart[n];
|
item = tmpCart[n];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (item) {
|
if (item) {
|
||||||
item.addUnit();
|
item.addUnit();
|
||||||
} else {
|
} else {
|
||||||
item = new CartProduct(data, 0);
|
item = new CartProduct(data, 0);
|
||||||
item.addUnit();
|
item.addUnit();
|
||||||
tmpCart.push(item);
|
tmpCart.push(item);
|
||||||
}
|
}
|
||||||
cart(tmpCart);
|
cart(tmpCart);
|
||||||
};
|
};
|
||||||
|
|
||||||
// The cart-widget template
|
// The cart-widget template
|
||||||
var totalItems = ko.computed(function() {
|
var totalItems = ko.computed(function () {
|
||||||
var tmpCart = cart();
|
var tmpCart = cart();
|
||||||
var total = 0;
|
var total = 0;
|
||||||
tmpCart.forEach(function(item) {
|
tmpCart.forEach(function (item) {
|
||||||
total += parseInt(item.units(), 10);
|
total += parseInt(item.units(), 10);
|
||||||
|
});
|
||||||
|
return total;
|
||||||
});
|
});
|
||||||
return total;
|
var grandTotal = ko.computed(function () {
|
||||||
})
|
var tmpCart = cart();
|
||||||
var grandTotal = ko.computed(function() {
|
var total = 0;
|
||||||
var tmpCart = cart();
|
tmpCart.forEach(function (item) {
|
||||||
var total = 0;
|
total += item.units() * item.product.price();
|
||||||
tmpCart.forEach(function(item) {
|
});
|
||||||
total += (item.units() * item.product.price());
|
return total;
|
||||||
});
|
});
|
||||||
return total;
|
|
||||||
})
|
|
||||||
|
|
||||||
// The cart-item template
|
// The cart-item template
|
||||||
var removeFromCart = function (data) {
|
var removeFromCart = function (data) {
|
||||||
var units = data.units();
|
var units = data.units();
|
||||||
var stock = data.product.stock();
|
var stock = data.product.stock();
|
||||||
data.product.stock(units + stock);
|
data.product.stock(units + stock);
|
||||||
cart.remove(data);
|
cart.remove(data);
|
||||||
}
|
};
|
||||||
|
|
||||||
// The cart template
|
// The cart template
|
||||||
var hideCartDetails = function() {
|
var hideCartDetails = function () {
|
||||||
$('#cartContainer').addClass("hidden");
|
visibleCart(false);
|
||||||
};
|
};
|
||||||
var showOrder = function () {
|
var showOrder = function () {
|
||||||
$('#catalogContainer').addClass("hidden");
|
visibleCatalog(false);
|
||||||
$('#orderContainer').removeClass("hidden");
|
};
|
||||||
}
|
|
||||||
|
|
||||||
// The order template
|
// The order template
|
||||||
var showCatalog = function () {
|
var showCatalog = function () {
|
||||||
$("#catalogContainer").removeClass("hidden");
|
visibleCatalog(true);
|
||||||
$("$orderContainer").addClass("hidden");
|
};
|
||||||
};
|
var finishOrder = function () {
|
||||||
var finishOrder = function() {
|
cart([]);
|
||||||
cart([]);
|
hideCartDetails();
|
||||||
hideCartDetails();
|
showCatalog();
|
||||||
showCatalog();
|
$("#finishOrderModal").modal("show");
|
||||||
$("#finishOrderModal").modal('show');
|
};
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
// first chapter
|
return {
|
||||||
searchTerm: searchTerm,
|
// first chapter
|
||||||
catalog: filteredCatalog,
|
searchTerm: searchTerm,
|
||||||
newProduct: newProduct,
|
catalog: filteredCatalog,
|
||||||
addProduct: addProduct,
|
newProduct: newProduct,
|
||||||
// second chapter
|
addProduct: addProduct,
|
||||||
cart: cart,
|
// second chapter
|
||||||
showCartDetails: showCartDetails,
|
cart: cart,
|
||||||
totalItems: totalItems,
|
showCartDetails: showCartDetails,
|
||||||
grandTotal: grandTotal,
|
addToCart: addToCart,
|
||||||
removeFromCart: removeFromCart,
|
totalItems: totalItems,
|
||||||
hideCartDetails: hideCartDetails,
|
grandTotal: grandTotal,
|
||||||
showOrder: showOrder,
|
removeFromCart: removeFromCart,
|
||||||
showCatalog: showCatalog,
|
hideCartDetails: hideCartDetails,
|
||||||
finishOrder: finishOrder
|
showOrder: showOrder,
|
||||||
};
|
showCatalog: showCatalog,
|
||||||
|
finishOrder: finishOrder,
|
||||||
|
visibleCatalog: visibleCatalog,
|
||||||
|
visibleCart: visibleCart,
|
||||||
|
};
|
||||||
})();
|
})();
|
||||||
ko.applyBindings(vm);
|
|
||||||
|
var templates = [
|
||||||
|
"header",
|
||||||
|
"catalog",
|
||||||
|
"cart",
|
||||||
|
"cart-item",
|
||||||
|
"cart-widget",
|
||||||
|
"order",
|
||||||
|
"add-to-catalog-modal",
|
||||||
|
"finish-order-modal",
|
||||||
|
];
|
||||||
|
|
||||||
|
var busy = templates.length;
|
||||||
|
templates.forEach(function (tpl) {
|
||||||
|
"use strict";
|
||||||
|
$.get("views/" + tpl + ".html").then(function (data) {
|
||||||
|
$("body").append(data);
|
||||||
|
busy--;
|
||||||
|
if (!busy) {
|
||||||
|
ko.applyBindings(vm);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,76 @@
|
||||||
|
<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">×</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>
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
<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>×</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>
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
<script type="text/html" id="cart-widget">
|
||||||
|
Total Items: <span data-bind="text:totalItems"></span> Price:
|
||||||
|
<span data-bind="text:grandTotal"></span>
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
<script type="text/html" id="cart">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="close pull-right"
|
||||||
|
data-bind="click:hideCartDetails"
|
||||||
|
>
|
||||||
|
<span>×</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-bind="click:showOrder">
|
||||||
|
Confirm Order
|
||||||
|
</button>
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
<script type="text/html" id="catalog">
|
||||||
|
<div class="input-group">
|
||||||
|
<span class="input-group-addon">
|
||||||
|
<i class="glyphicon glyphicon-search"></i> Search
|
||||||
|
</span>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="form-control"
|
||||||
|
data-bind="textInput:searchTerm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<table class="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Price</th>
|
||||||
|
<th>Stock</th>
|
||||||
|
<th></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody data-bind="foreach:catalog">
|
||||||
|
<tr data-bind="style:lineColor">
|
||||||
|
<td data-bind="text:name"></td>
|
||||||
|
<td data-bind="text:price"></td>
|
||||||
|
<td data-bind="text:stock"></td>
|
||||||
|
<td>
|
||||||
|
<button
|
||||||
|
class="btn btn-primary"
|
||||||
|
data-bind="click:$parent.addToCart"
|
||||||
|
>
|
||||||
|
<i class="glyphicon glyphicon-plus-sign"></i> Add
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<td colspan="3">
|
||||||
|
<strong>Items:</strong
|
||||||
|
><span data-bind="text:catalog().length"></span>
|
||||||
|
</td>
|
||||||
|
<td colspan="1">
|
||||||
|
<span data-bind="template:{name: 'cart-widget'}"></span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
<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>
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
<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>
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
<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>
|
||||||
Loading…
Reference in New Issue