-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
105 lines (100 loc) · 3.51 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html>
<head>
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title>Herbalife Test</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.mobile.min.css" />
<link rel="stylesheet" href="styles/custom.css" />
<script src="https://kendo.cdn.telerik.com/2017.2.504/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://demos.telerik.com/kendo-ui/content/shared/styles/examples-offline.css">
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div>
<a class="k-button" href="#" id="cartModal"><span class="k-icon k-i-cart"></span>My Cart</a>
<a class="k-button" href="#" id="emptyCart" data-bind="click: clearCart"><span class="k-icon k-i-delete"></span>Empty Cart</a>
<div id="listview"
data-role="listview"
data-template="template"
data-bind="source: products,
visible: isVisible,
events: {
save: onSave
}"
style="height: 900px; overflow: auto">
</div>
</div>
</div>
<div id="cart">
<h4>Cart</h4>
<div id="grid"></div>
<div id="gridTotals"></div>
</div>
<div id="confirm"></div>
<div id="dialog"></div>
<script type="text/x-kendo-tmpl" id="template">
<div class="product-view k-widget">
<dl>
<dt>Product Id</dt>
<dd>#:Id#</dd>
<dt>Product Name</dt>
<dd>#:Name#</dd>
<dt>Category</dt>
<dd>#:Category#</dd>
<dt>Unit Price</dt>
<dd>#:kendo.toString(Price, "c")#</dd>
<dt>Price</dt>
<dd id="#:Id#-price">#:kendo.toString(0, "c")#</dd>
<dt>Units In Stock</dt>
<dd id="#:Id#-stock">#:Stock#</dd>
<dt>Available</dt>
<dd>#:Availability#</dd>
</dl>
<div class="edit-buttons">
<span class="k-icon k-i-plus"
data-bind="click: increaseQuantity"
data-id="#:Id#"
data-name="#:Name#"
data-category="#:Category#"
data-stock="#:Stock#"
data-price="#:Price#"
data-availability="#:Availability#">
</span>
<span class="k-icon k-i-minus"
data-bind="click: decreaseQuantity"
data-id="#:Id#"
data-name="#:Name#"
data-category="#:Category#"
data-stock="#:Stock#"
data-price="#:Price#"
data-availability="#:Availability#">
</span>
<input type="text" id="#:Id#-quantity" maxlength="2" size="2" value="0" style="text-align: center;"
data-id="#:Id#"
data-name="#:Name#"
data-category="#:Category#"
data-stock="#:Stock#"
data-price="#:Price#"
data-availability="#:Availability#"
readonly />
<span class="k-icon k-i-save"
data-bind="click: updateCart"
data-id="#:Id#"
data-name="#:Name#"
data-category="#:Category#"
data-stock="#:Stock#"
data-price="#:Price#"
data-availability="#:Availability#">
Add to Cart
</span>
</div>
</div>
</script>
<script src="index-model.js" type="text/javascript"></script>
</div>
</body>
</html>