/
orders.html
272 lines (235 loc) · 11.8 KB
/
orders.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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
<!doctype html>
<html lang="en"> <!-- Set this to the main language of your site -->
<head>
<meta charset="utf-8">
<title>Orders - My Account</title>
<meta name="description" content="View Order History">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/normalize.css" rel="stylesheet" media="all">
<!-- For legacy support (IE 6/7, Firefox < 4, and Safari < 5) use normalize-legacy.css instead -->
<!--<link href="css/normalize-legacy.css" rel="stylesheet" media="all">-->
<link href="css/styles.css" rel="stylesheet" media="all">
<!--[if lt IE 9]>
<script type='text/javascript' src="js/html5shiv-printshiv.js" media="all"></script><![endif]-->
<script type="text/javascript" src="js/modernizr-2.6.2.js"></script>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/moment.js"></script>
<script type="text/javascript" src="js/handlebars_1.0.js"></script>
<script type="text/javascript" src="js/underscore_1.4.4.js"></script>
<script type="text/javascript" src="js/backbone_1.0.js"></script>
<script type="text/javascript" src="js/myaccount_rest_1.4.js"></script>
<script type="text/javascript" src="js/myaccount.js"></script>
<script type="text/javascript" src="orders.js"></script>
<script type="text/template" id="tracking-template">
<h4 class='disabled-looking'>Tracking Information</h4>
{{#each tracking}}
{{#if hasTrackingUrl}}
Tracking Number: <strong><a target='_blank' href="{{trackingUrl}}">{{trackingNumber}}</a></strong>
{{else}}
Tracking Number: <strong>{{trackingNumber}}</strong>: <em>No tracking information available for this tracking
number.</em>
{{/if}}
<br><br>
{{/each}}
</script>
<script type="text/template" id="orders-template">
{{#if loading}}
Please wait. We're loading your orders now.<br>
<img src='images/jquery.smallhbar.indicator.gif'/>
{{else}}
<section>
<header class='order-header'>
<nav role="navigation">
{{#if showPagination}}
<table class='orderPaginationTable' summary='order pagination'>
<tr>
<td class='orderPaginationTableSearchCell'>
<strong>{{totalRecords}}</strong> orders {{#if isSearch}} match your search.{{/if}}{{#if
isFilterByTime}}placed in <strong>{{timePeriod}}</strong>.{{/if}} Showing orders
{{firstRecordOnPage}}-{{lastRecordOnPage}}
</td>
<td class='orderPaginationTableFilterCell'>
{{#if showGotoPage}}
{{#if showPrevious}}<a class="orderNavCell" href="#">Previous</a> << {{/if}}
<strong>Page {{pageNumber}} of {{totalPages}}</strong>
{{#if showNext}} >> <a class="orderNavCell" href="#">Next</a>{{/if}}
{{/if}}
</td>
</tr>
</table>
{{/if}}
</nav>
</header>
<div id="orders">
<!-- individual orders will render here. -->
</div>
<footer class='order-footer'>
<nav role="navigation">
{{#if showPagination}}
<table class='orderPaginationTable' summary='order pagination'>
<tr>
<td class='orderPaginationTableSearchCell'>
<strong>{{totalRecords}}</strong> orders {{#if isSearch}} match your search.{{/if}}{{#if
isFilterByTime}}placed in <strong>{{timePeriod}}</strong>.{{/if}} Showing orders
{{firstRecordOnPage}}-{{lastRecordOnPage}}
</td>
<td class='orderPaginationTableFilterCell'>
{{#if showGotoPage}}
{{#if showPrevious}}<a class="orderNavCell" href="#">Previous</a> << {{/if}}
<strong>Page {{pageNumber}} of {{totalPages}}</strong>
{{#if showNext}} >> <a class="orderNavCell" href="#">Next</a>{{/if}}
{{/if}}
</td>
</tr>
</table>
{{/if}}
</nav>
</footer>
</section>
{{/if}}
</script>
<script type="text/template" id="order-template">
<!-- the backbone view will wrap this content in an <article class="order"></article> tag -->
<div class='order-details'>
<div class='order-tiny-word'>ORDER PLACED</div>
<h2>{{dateFormat creationDate}}</h2>
<div class='order-detail-link'><a href="order-detail.html?orderId={{orderId}}">Order Details</a></div>
<div class='order-detail-line order-tiny-word'>ORDER #{{orderId}}</div>
<div class='order-detail-line order-tiny-word'>RECIPIENT {{shipToFirstName}} {{shipToLastName}}</div>
<div class='order-detail-line order-tiny-word'>TOTAL {{totalFormatted}}</div>
</div>
<div class='order-actions'>
<div><input type="button" value="Track Package" class='trackingButton order-action-button'/></div>
<div style='display:none'><!-- NOT IMPLEMENTED YET --><input type="button" value="Return or Replace Items"
class='rmaButton order-action-button'/></div>
<div><input type="button"
value="{{#if orderCase}}View Comments{{else}}Send Comment to Customer Service{{/if}}"
class='commentButton order-action-button'/>
</div>
<div><input type="button" value="Write Product Review" class='reviewButton order-action-button'/></div>
<div class='reviewItemsPanel'>
Select an item to review:
<ol>
{{#each items}}
<li class="reviewItemSelector" data-itemid="{{itemId}}">{{description}}</li>
{{/each}}
</ol>
</div>
</div>
<div class='order-header'>
<h4 class='disabled-looking'>Status: {{status}}</h4>
</div>
<div class='order-items'>
<table>
{{#each items}}
<tr>
<td>
{{#with metaData}}{{#if defaultImageUrl}}<img class='order-item-thumbnail'
src="https://secure.ultracart.com/thumbs/{{defaultImageUrl}}"
alt=''/>{{/if}}{{/with}}
</td>
<td><a href="{{#with metaData}}{{viewUrl}}{{/with}}">{{description}}</a></td>
</tr>
{{/each}}
</table>
</div>
<div class='tracking-container'></div>
<div class='case-container'>
<h4 class='disabled-looking'>Comments</h4>
{{#if orderCase}}
<div class='case-subject'>
Subject: {{orderCase.subject}} <em>Conversation began {{dateFormat
creationDate}}</em>
</div>
<div class='case-messages'>
{{#each orderCase.messages}}
<div class='case-message sender-{{classify messageSender}}'>
<div class='case-message-header'>
On {{dateFormat messageDate}},
{{#compare messageSender 'Customer' operator="=="}}
from you to customer service:
{{/compare}}
{{#compare messageSender 'Customer Service' operator="=="}}
from customer service to you:
{{/compare}}
</div>
<div class='case-message-body'>
{{message}}
</div>
</div>
{{/each}}
</div>
{{/if}}
<div class='message-entry'>
<div class='case-subject'></div>
{{#if orderCase}}{{else}}
<div>Subject:<br><input type="text" class="case-subject-field" size="50" maxlength="200"
value="{{subject}}"/></div>
{{/if}}
Comment:<br><textarea class="case-message-field" cols="100" rows="5"></textarea><br>
<em>limit 2000 characters.</em><br>
<input type="button" class='case-message-button' value='Send Comment'/>
</div>
</div>
<div style='clear:both'></div>
</script>
</head>
<body>
<!-- The page header typically contains items such as your site heading, logo and possibly the main site navigation -->
<!-- ARIA: the landmark role "banner" is set as it is the prime heading or internal title of the page -->
<header role="banner">
<img src='images/logo.png' alt='store logo' class='logo-image'/>
<h2>UltraCart Store</h2>
<h4><a href="index.html">My Account</a> > <span class='disabled-looking'>My Orders</span></h4>
<nav role="navigation">
<div class='orderNavigationWrapper'>
<table class='orderNavigationTable' summary='order navigation'>
<tr>
<td class='orderNavigationTableSearchCell'>
Search Your Orders:
<input type="text"
id="searchOrdersField"
placeholder="Order ID or Item"/>
<input type="button" value="Search Orders" id="searchOrdersButton"/>
</td>
<td class='orderNavigationTableFilterCell'>
Orders placed in:
<select id="timeFilter">
<option value='help-text' disabled='disabled'>Select a time period</option>
<option value="last30days">Last 30 days</option>
<option value="last6months">Last 6 months</option>
<!-- additional values are added to this list dynamically during page ready -->
</select>
<input type="button" value="Go" id="filterOrdersButton"/>
</td>
</tr>
</table>
</div>
</nav>
</header>
<div class="wrap content">
<main role='main' id='orders'>
</main>
</div>
<footer role="contentinfo">
<!-- Copyright information can be contained within the <small> element. The <time> element is used here to indicate that the '2015' is a date -->
<small>Copyright www.ultracart.com ©
<time datetime="2015">2015</time>
</small>
</footer>
<!-- Google Analytics - Optimized version by Mathias Bynens -->
<!-- See: http://mathiasbynens.be/notes/async-analytics-snippet -->
<!-- Change the UA-XXXX-XX string to your site's ID -->
<script type='text/javascript'>
var _gaq = [
['_setAccount', 'UA-XXXX-XX'],
['_trackPageview']
];
(function (a, b) {
var c = a.createElement(b), d = a.getElementsByTagName(b)[0];
c.src = ("https:" == location.protocol ? "//ssl" : "//www") + ".google-analytics.com/ga.js";
d.parentNode.insertBefore(c, d)
})(document, "script");
</script>
</body>
</html>