228 lines
8.3 KiB
HTML
228 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>KO Shopping Cart</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
|
|
</head>
|
|
<body>
|
|
<div class="container-fluid">
|
|
<div class="row" data-bind="if: visibleCatalog">
|
|
<div class="col-xs-12" data-bind="template:{name:'header'}"></div>
|
|
<div class="col-xs-6" data-bind="template:{name:'catalog'}"></div>
|
|
<div class="col-xs-6 well hidden" data-bind="if: visibleCart">
|
|
<div class="well" data-bind="template:{name:'cart'}"></div>
|
|
</div>
|
|
</div>
|
|
<div class="row hidden" id="ifnot: visibleCatalog">
|
|
<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>
|
|
|
|
<!-- templates -->
|
|
<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 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>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
<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-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>
|
|
<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>
|