-
Notifications
You must be signed in to change notification settings - Fork 57
/
Copy pathapp-quickstart.html
1585 lines (1023 loc) · 72.6 KB
/
app-quickstart.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
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- do not populate or add meta data, the SEO layer will add it -->
<title>Quickstart</title><!-- this will get populated by the SEO layer -->
<!-- used for optional social media extensions -->
<meta property="og:type" content="" id='ogType' >
<meta property="og:image" content="" id='ogImage' >
<meta property="og:description" content="" id='ogDescription' >
<meta name=viewport content="width=device-width, initial-scale=1">
<base href='' /><!-- leave blank so it works for a local file. updated to / if protocol is not file: -->
<script type="text/javascript">
var myCreole, baseURL;
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
// Replace the UA number below with the UA property to send tracking info to.
ga('create', 'UA-XXXX-Y', 'auto');
ga('require','linker');
ga('require','ecommerce', 'ecommerce.js');
ga('set', {
// Replace name below
'appName' : 'MyAppName',
'appID' : 'ZMVC',
'appVersion' : '201405'
});
ga('send','pageview');
ga('send','screenview');
//set base url so images, css, js, etc all load from appropriate location once deployed.
//baseURL as blank lets loadScript function run off local copy when testing locally.
if(document.location.protocol == 'file:') {
baseURL = "";
}
else {
baseURL = document.location.protocol+"//"+document.domain+"/";
}
document.getElementsByTagName('base')[0].href = baseURL;
</script>
<!--
all css includes need to be after the js that changes the base url.
css files should be included before any .js file to ensure they are downloaded in parallel
-->
<link rel="stylesheet" type="text/css" href="app-quickstart.css" />
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/ui-lightness/jquery-ui.css" />
<!-- jquery and jquery ui are pivotal to the functionality of the app. load them early -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="controller.js"></script>
<script src="model.js"></script>
<!-- ### TODO -> test how the load process goes w/ these in init. if includes is moved, move the new Parse -->
<script src="resources/jquery.ui.anyplugins.js"></script>
<script type="text/javascript" src="includes.js"></script><!-- contains some polyfills and should be loaded early -->
<script type="text/javascript">
$(document).ready(function(){
var paramStr = window.location.href.replace(window.location.hash, '').split('?')[1];
if(!paramStr || paramStr.indexOf('_escaped_fragment_') < 0){
window.myApp = new initApp({
"release":"201405.a", //increment this with each change. should solve caching issues. format: YYYYMMDDHHMMSS
"_clientid":"zmvc", //zmvc for store app, 1pc for one page checkout.
"baseURL":baseURL, //used in non-local mode.
"checkoutAuthMode" : "active",//can be passive, active or required
"testURL":"http://app.sporks.zoovy.com/", //used ONLY if protocol is file: (for testing)
"addjQueryPointer" : true,
"analyticsPointer" : "ga",
"initComplete" : function(){
dump(" -> init is complete");
myApp.u.loadScript('app-quickstart-init.js',function(){
var progress = myApp.u.loadResources(); //the object returns by loadResources will get updated as the resources finish loading.
myApp.u.showProgress(progress);
});
$('#appversion').text(myApp.vars.release);
}
});
myApp.vars.initComplete();
myCreole = new Parse.Simple.Creole();
}
});
</script>
</head>
<body>
<!-- DELETE THIS WHEN YOU GET STARTED -->
<h1>WELCOME TO QUICKSTART</h1>
This file is intended to go along with the 10-step tutorial at:
<a href="https://github.com/zoovy/AnyCommerce-Development/wiki/quickstart">https://github.com/zoovy/AnyCommerce-Development/wiki/quickstart</a>
<!-- /DELETE THIS WHEN YOU GET STARTED -->
<!-- what is displayed onLoad until the view is loaded -->
<div id='appPreView'>
<table>
<tr>
<td><!-- put logo here --></td>
<td>
<div id="loader">
<h3>One moment please.</h3>
<div class='alignCenter'>
<progress id="appPreViewProgressBar" max="100" value="0"></progress><br>
</div>
<div id='appPreViewProgressText'>0% Complete</div>
</div>
<div id="clickToLoad" class="displayNone pointer">
Click here to load your shopping experience!
</div>
<div class='appMessaging'></div>
</td>
</tr>
</table>
</div>
<div id='appView' class='displayNone'>
<!--
ANIMATION TESTING
<div style="background: black; float: left;">
<div data-animation-mouseenter="cogs?animFunc=fwd" data-animation-mouseout="cogs?animFunc=back" style="width: 55px; height: 55px;" id="cogs"></div>
</div>
-->
<!-- VIEW CONTENT -->
<!-- leave the appView div, put your your html here ... -->
<!--
** REMINDER : DO NOT PUT ANY GRAPHICS/CONTENT THAT SHOULD NOT APPEAR ON EVERY PAGE IN THE VIEW (HERE)
** INSTEAD PUT THEM INTO <div id='homepageTemplate'></div>
-->
<div id='globalMessaging' class='appMessaging'></div><!-- DO NOT REMOVE - used for some high level error handling (usually appears below breadcrumb nav or top bar) -->
<!-- These add specific functionality for the app. In most cases, you want to leave them alone. -->
<div id='appNav'>
<button class='displayNone prodDetailNextItemButton' data-app-role='prodDetailNextItemButton'>Next</button>
<button class='displayNone prodDetailPrevItemButton' data-app-role='prodDetailPrevItemButton'>Previous</button>
</div>
<div id='mainContentArea'></div><!-- DO NOT REMOVE - this is where the specific page (ex: homepage, product, category) content is going to go -->
<!-- ... your html ends -->
<!-- /VIEW CONTENT -->
</div>
<!--
*************************************************************************************************************
**
**
** C A R T M E S S A G E U I S T A R T S H E R E
**
** A mechanism where buyers and merchants can communicate in real time.
**
*************************************************************************************************************
-->
<div id='cartMessenger' class='displayNone seoStrip' data-app-role='cartMessenger' title="help">
<form novalidate='novalidate' onSubmit="return false">
<div class='messageHistoryContainer'>
<section data-app-role='messageHistory'></section>
</div>
<fieldset data-app-role='messageInput' class='smallButton messageInputContainer displayNone'>
<textarea name='message' required='required' class='fullWidth' rows='5' placeholder='send a message'></textarea>
<button class='applyButton' data-app-click='cart_message|chatPostExec' data-app-role='messageSubmitButton'>Send Message</button>
</fieldset>
<input type='text' placeholder='first name' name='bill/firstname' value='' data-tlc="bind $var 'bill.firstname'; apply --select=$var;" data-app-blur='cco|cartSetAttrib' />
<section data-app-role='messageCommands' class='messageCommandsContainer'>
<button class='applyButton displayNone show4ActiveChat' data-app-click="quickstart|cartMessagePageSend" title='Show the associate what page I am on.'>Send Page</button>
<button data-app-click="cart_message|cartCSRShortcutExec" class='applyButton hide4ActiveChat'>Cart Shortcut</button><!-- if the buyer is already on the phone w/ the merchant, they could use this so the admin can access the cart -->
</section>
</form>
</div>
<!--
*************************************************************************************************************
**
**
** T E M P L A T E S S T A R T H E R E
**
** template id's are specified within myria.js and loaded, then interpolated with dynamic data from the api.
**
*************************************************************************************************************
-->
<div id='appTemplates' class='displayNone seoStrip'>
<!--
############################
COMMONLY EDITED TEMPLATES
############################
-->
<!--
the homepageTemplate template is loaded into mainContentArea by default when the application loads
-->
<div id="homepageTemplate" class="homeTemplate">
<ul data-tlc="bind $var '.@subcategoryDetail'; store_navcats#categorylist --detail='max' --templateid='categoryListTemplate' --legacy;" class="listStyleNone fluidList clearfix noPadOrMargin categoryList"></ul>
<ul data-tlc="bind $var '.@products'; store_prodlist#productlist --hideSummary='1' --withReviews='1' --withVariations='1' --withInventory='1' --templateid='productListTemplate' --legacy;" class="listStyleNone fluidList clearfix noPadOrMargin productList"></ul>
<p data-tlc="bind $var '.%page.description'; if (is $var --notblank;) {{ render --wiki='quickstart'; apply --append;}};"></p>
<ul data-tlc="quickstart#searchbytag --tag='IS_BESTSELLER' --title='Best Sellers' --size='8' --templateid='productListTemplateResultsNoPreview';" class='listStyleNone fluidList clearfix noPadOrMargin productList'></ul>
<!--
<ul data-tlc="bind $var '.$listName.@products'; store_prodlist#productlist --hideSummary='1' --withReviews='1' --withVariations='1' --withInventory='1' --templateid='productListTemplate' --legacy;" class="listStyleNone fluidList clearfix noPadOrMargin productList"></ul>
-->
</div>
<!--
used to organize content when a category is clicked.
each of the 'sections' are used to load another template. don't change the id.
don't modify the 'data-templateid' unless you are changing template names and updating everywhere appropriate.
-->
<div id="categoryTemplate" class=" categoryTemplate">
<span class="displayNone" data-tlc="bind $navcat '.navcat'; bind $seo '.pretty'; bind $hash ''; store_routing#categorylink --navcat=$navcat --seo=$seo; apply --attrib='data-routing-hash';"></span>
<ul data-tlc="bind $var '.path'; store_navcats#breadcrumb --templateid='breadcrumbTemplate' --legacy;" class="breadcrumb clearfix noPadOrMargin fluidList"></ul>
<img data-tlc="bind $var '.%page.banner1'; quickstart#banner --height='250' --width='750' --legacy;" src="images/blank.gif" alt="">
<h2 data-tlc="bind $var '.%page.header'; if (is $var --notblank;) {{apply --append;}};"></h2>
<p data-tlc="bind $var '.%page.description'; if (is $var --notblank;) {{ render --wiki='quickstart'; apply --append;}};"></p>
<ul data-tlc="bind $var '.@subcategoryDetail'; store_navcats#categorylist --detail='max' --templateid='categoryListTemplate' --legacy;" class="listStyleNone fluidList clearfix noPadOrMargin categoryList"></ul><!-- outputs a list of subcategories -->
<ul data-tlc="bind $var '.@products'; store_prodlist#productlist --withReviews='1' --withInventory='1' --withVariations='1' --itemsperpage='25' --templateid='productListTemplate' --legacy;" class="listStyleNone fluidList clearfix noPadOrMargin productList"></ul><!-- outputs the product list -->
<p data-tlc="bind $var '.%page.description2'; if (is $var --notblank;) {{ render --wiki='quickstart'; apply --append;}};"></p>
</div>
<!-- used to display a category within a 'list', usually in the body of a category or the homepage. -->
<ul>
<li id="categoryListTemplate">
<a data-tlc="bind $var '.'; store_routing#seoanchor --type='category' --seo; apply --attrib='href';">
<div class="thumbContainer"><img data-tlc="bind $var '.%meta.CAT_THUMB'; if (is $var --notblank){{apply --img --media=$var --width=120 --height=120 --bgcolor='#ffffff' --replace;}};" src="blank.gif" class="catThumb" alt="" height="120" width="120"></div>
<div class="catName white2LGray"><span data-tlc="bind $var '.pretty'; quickstart#cattext --legacy;"></span></div>
</a>
</li>
<li id="categoryListTemplateRootCats">
<a data-tlc="bind $var '.'; store_routing#seoanchor --type='category' --seo; apply --attrib='href';">
<div class="thumbContainer"><img data-tlc="bind $var '.%meta.CAT_THUMB'; if (is $var --notblank){{apply --img --media=$var --width=35 --height=35 --bgcolor='#ffffff' --replace;}};" src="blank.gif" class="catThumb" alt="" height="35" width="35"></div>
<div class="catName"><span data-tlc="bind $var '.pretty'; quickstart#cattext --legacy; apply --append;"></span></div>
</a>
</li>
</ul>
<ul>
<!--
Used for the product in a product list (prodlist), usually in the body of a category or the homepage.
the loadingBG class is removed (must be that classname) when the template is translated.
remember to NOT put the button inside the href or two events will occur onclick.
-->
<li id="productListTemplate" class="loadingBG " onmouseover="$('.quickView',$(this)).show();" onmouseout="$('.quickView').hide();">
<button class="floatRight pointer quickView displayNone" data-app-click="quickstart|quickviewShow" data-loadstemplate="productTemplateQuickView">Quickview</button>
<a data-tlc="bind $pid '.pid'; bind $seo '.%attribs.zoovy:prod_name'; bind $href ''; store_routing#productlink --pid=$pid --seo=$seo; apply --attrib='href';" class="blockLink">
<div data-tlc="bind $var '.pid'; quickstart#addpicslider --legacy; apply --append;" class="prodThumbContainer">
<img data-tlc="bind $var '.%attribs.zoovy:prod_thumb'; if(is $var --blank;){{bind $var '.%attribs.zoovy:prod_image1';}}; if(is $var --notblank;){{apply --img --media=$var --width=120 --height=120 --bgcolor='#ffffff' --replace;}};" src="blank.gif" class="prodThumb" alt="" height="120" width="120">
</div>
<h5 data-tlc="bind $var '.%attribs.zoovy:prod_name'; if (is $var --notblank;) {{apply --append;}};"></h5>
<h6 data-tlc="bind $var '.%attribs.zoovy:base_price'; if (is $var --notblank;) {{ format --currency='USD'; format --prepend='Our Price: '; apply --append;}};"></h6>
<span data-tlc="bind $var '.reviews.average'; if(is $var --notblank) {{format --prepend='review_'; apply --add --class=$var; }};" class="reviewSprite"></span>
<!-- <span data-bind='var: reviews(reviews.total); format:text; pretext: from ;posttext: reviews; className:numReviews;'></span> -->
</a>
<form data-tlc="bind $var '.pid'; store_product#atcform --legacy; apply --append;" class="prodViewerAddToCartForm clearfix" action="#" onsubmit="return false" data-app-submit="quickstart|productAdd2Cart" data-show="modal">
<input name="qty" value="1" type="hidden">
<button data-tlc="quickstart#addtocartbutton --legacy; apply --append;" data-bind="format:addtocartbutton; extension:quickstart; useParentData:true;" class='applyButton'>more details</button>
</form>
</li>
<!--
for product lists with addToCart feature (accessories, for example)
container ul should have lineItemProdlist class on it instead of productList
-->
<li id="productListTemplateATC" class="loadingBG ">
<div data-tlc="bind $var '.pid'; apply --attrib='data-pid';">
<div class="prodThumbContainer floatLeft">
<img data-tlc="bind $var '.%attribs.zoovy:prod_image1'; apply --img --media=$var --width=120 --height=120 --bgcolor='#ffffff' --replace;" src="blank.gif" class="prodThumb" alt="" height="120" width="120">
</div>
<h5 data-tlc="bind $var '.%attribs.zoovy:prod_name'; if (is $var --notblank;) {{apply --append;}};"></h5>
<h6 data-tlc="bind $var '.%attribs.zoovy:base_price'; if (is $var --notblank;) {{format --currency='USD'; format --prepend='Our Price: '; apply --append;}};"></h6>
<span data-tlc="bind $var '.reviews.average'; if(is $var --notblank) {{format --prepend='review_'; apply --add --class=$var; }};" class="reviewSprite"></span>
<form data-tlc="bind $var '.pid'; store_product#atcform --legacy; apply --append;" class="prodViewerAddToCartForm clearfix" action="#" data-app-submit="quickstart|productAdd2Cart" data-show="modal">
<fieldset data-tlc="bind $var '.pid'; store_product#atcvariations --legacy; apply --append;" class="borderNone"></fieldset>
<fieldset data-tlc="bind $var '.'; store_product#atcquantityinput --defaultvalue='0' --legacy;" class="borderNone"></fieldset>
<input data-tlc="bind $var '.pid'; store_product#addtocartbutton --legacy; apply --append;" value="Add to Cart" class="applyButton addtocartbutton displayNone" type="submit">
</form>
</div>
</li>
<li id="productListTemplateBuyerList" class="loadingBG floatLeft marginRight marginBottom">
<div data-tlc="bind $var '.pid'; apply --attrib='data-pid';">
<div class="prodThumbContainer marginBottom">
<div class="ui-widget ui-widget-content ui-corner-all">
<img data-tlc="bind $var '.%attribs.zoovy:prod_thumb'; if(is $var --blank;){{bind $var '.%attribs.zoovy:prod_image1';}}; if(is $var --notblank;){{apply --img --media=$var --width=120 --height=120 --bgcolor='#ffffff' --replace;}};" src="blank.gif" class="prodThumb" alt="" height="120" width="120">
<div class="smallButtonList ui-widget ui-widget-header ui-corner-all alignCenter">
<a data-tlc="bind $var '.'; store_routing#seoanchor --type='product' --seo; apply --attrib='href';" class='applyButton' data-text='false' data-icon-primary='ui-icon-cart'>Add To Cart</a>
<a href='#' data-app-click="quickstart|quickviewShow" class='applyButton' data-text='false' data-icon-primary='ui-icon-info' data-loadstemplate='productTemplate'>Details</a>
<a href='#' data-app-click="store_crm|productReviewShow" class='applyButton' data-text='false' data-icon-primary='ui-icon-star'>Write Review</a>
<a href='#' data-app-click="store_crm|productBuyerListRemoveExec" class='applyButton' data-text='false' data-icon-primary='ui-icon-trash'>Remove From List</a>
</div>
</div>
</div>
<span data-tlc="bind $var '.reviews.average'; if(is $var --notblank) {{format --prepend='review_'; apply --add --class=$var; }};" class="reviewSprite floatRight"></span>
<h5 data-tlc="bind $var '.%attribs.zoovy:prod_name'; if (is $var --notblank;) {{apply --append;}};"></h5>
<h6 data-tlc="bind $var '.%attribs.zoovy:base_price'; if (is $var --notblank;) {{format --currency='USD'; format --prepend='Our Price: '; apply --append;}};"></h6>
</div>
</li>
</ul>
<ul>
<!--
Used for the product in a product list (prodlist), usually in the body of a category or the homepage.
the loadingBG class is removed (must be that classname) when the template is translated.
remember to NOT put the button inside the 'href' container or two events will occur onclick.
SANITY -> if you change the height and width of this image, change the .minimalMode .searchResultsProduct in qs_styles.css to match
-->
<li id="productListTemplateResults" class="loadingBG searchResultsProduct ">
<div data-app-click="quickstart|inlineProductPreviewShow" class="pointer">
<div class="prodThumbContainer">
<img data-tlc="bind $var '.images.0'; apply --img --media=$var --width=120 --height=120 --bgcolor='#ffffff' --replace;" src="blank.gif" class="prodThumb" alt="" height="120" width="120">
</div>
<h5 data-tlc="bind $var '.prod_name'; if (is $var --notblank;) {{apply --append;}};" class="hideInMinimalMode"></h5>
<h6 data-tlc="bind $var '.base_price'; if (is $var --notblank;) {{math --div='100'; format --currency='USD'; format --prepend='Our Price: '; apply --append;}};" class="hideInMinimalMode"></h6>
</div>
<a class="hideInMinimalMode pointer moreDetails" data-tlc="bind $seoname '.prod_name'; bind $var '.'; store_routing#seoanchor --type='product' --seo --seoname=$seoname; apply --attrib='href';">more details</a>
</li>
<li id="productListTemplateResultsNoPreview" class="loadingBG searchResultsProduct ">
<a data-tlc="bind $var '.'; store_routing#seoanchor --type='product' --seo; apply --attrib='href';" class="pointer">
<div class="prodThumbContainer">
<img data-tlc="bind $var '.images.0'; if (is $var --notblank;) {{apply --img --media=$var --width=120 --height=120 --bgcolor='#ffffff' --replace;}};" src="blank.gif" class="prodThumb" alt="" height="120" width="120">
</div>
<h5 data-tlc="bind $var '.prod_name'; if (is $var --notblank;) {{apply --append;}};" class="hideInMinimalMode"></h5>
<h6 data-tlc="bind $var '.base_price'; if (is $var --notblank;) {{format --currency='USD'; format --prepend='Our Price: '; apply --append;}};" class="hideInMinimalMode"></h6>
</a>
<a class="hideInMinimalMode pointer moreDetails" data-tlc="bind $seoname '.prod_name'; bind $var '.'; store_routing#seoanchor --type='product' --seo --seoname=$seoname; apply --attrib='href';">more details</a>
</li>
</ul>
<!--
form - the form id gets modified to be unique in case multiple viewers are open at the same time. _pid is appended to it.
NOTE - currently, variations.js supports only 1 viewer at a time. this will change.
2 fieldsets are present:
-> One is for variations/options and really ought to be present.
-> The other is for a quantity input and is optional
the submit button does not need to be within the form (a button could be used elsewhere if needed.
-> use the button to submit the form, not execute the call or utility separately. That way if additional
actions are added to the submit, they only have to be managed in one place.
Additionally, the cross selling features also have hard coded id's, though they're specified within this extension in the xsell callback.
this will likely become more flexible in the future. ###
-->
<div data-tlc="bind $var '.pid'; apply --attrib='data-pid';" id="productTemplate" class="productPage">
<span class="displayNone" data-tlc="bind $pid '.pid'; bind $seo '.%attribs.zoovy:prod_name'; bind $href ''; store_routing#productlink --pid=$pid --seo=$seo; apply --attrib='data-routing-hash';"></span>
<ul data-tlc="bind $var '.recentCategories.0'; store_navcats#breadcrumb --templateid='breadcrumbTemplate' --legacy; apply --append;" class="clearfix noPadOrMargin fluidList breadcrumb"></ul>
<table class="prodViewerContainer">
<tbody><tr>
<td class="imageContainer">
<div data-app-click="quickstart|productPicsInModalShow" class="pointer clearfix">
<div data-tlc="bind $var '.%attribs.zoovy:prod_is_tags'; quickstart#tags --legacy;" class="tagsContainer"></div>
<img data-tlc="bind $var '.%attribs.zoovy:prod_image1'; if(is $var --notblank){{apply --img --media=$var --width=340 --height=340 --bgcolor='#ffffff' --replace;}};" src="blank.gif" class="prodBigImage" alt="" height="340" width="340">
</div>
<div data-tlc="bind $var '.pid'; apply --attrib='data-pid';" class="prodThumbs">
<div onclick="myApp.ext.store_product.u.showPicsInModal({'pid':$(this).parent().attr('data-pid'),'int':'2'});" class="pointer"><img data-tlc="bind $var '.%attribs.zoovy:prod_image2'; if(is $var --notblank){{apply --img --media=$var --width=100 --height=100 --bgcolor='#ffffff' --replace;}};" src="blank.gif" alt="" height="100" width="100"></div>
<div onclick="myApp.ext.store_product.u.showPicsInModal({'pid':$(this).parent().attr('data-pid'),'int':'3'});" class="pointer"><img data-tlc="bind $var '.%attribs.zoovy:prod_image3'; if(is $var --notblank){{apply --img --media=$var --width=100 --height=100 --bgcolor='#ffffff' --replace;}};" src="blank.gif" alt="" height="100" width="100"></div>
<div onclick="myApp.ext.store_product.u.showPicsInModal({'pid':$(this).parent().attr('data-pid'),'int':'4'});" class="pointer"><img data-tlc="bind $var '.%attribs.zoovy:prod_image4'; if(is $var --notblank){{apply --img --media=$var --width=100 --height=100 --bgcolor='#ffffff' --replace;}};" src="blank.gif" alt="" height="100" width="100"></div>
</div>
</td>
<td class="prodSummaryContainer marginBottom no_underline">
<h1 data-tlc="bind $var '.%attribs.zoovy:prod_name'; apply --append;"></h1>
<div class="marginBottom">
<h5 data-tlc="bind $var '.pid'; if (is $var --notblank;) {{format --prepend='Sku: '; apply --append;}};" class="stid"></h5>
<h5><a href='#' data-tlc="bind $var '.%attribs.zoovy:prod_mfg'; if(is $var --notblank;) {{apply --append; format --prepend='#!search/keywords/'; apply --attrib='href';}};"></a></h5>
<h5 data-tlc="bind $var '.%attribs.zoovy:prod_mfgid'; if (is $var --notblank;) {{format --prepend='Mfg ID: '; apply --append;}};"></h5>
</div>
<div class="priceContainer marginBottom">
<h4 data-tlc="bind $var '.%attribs.zoovy:base_price'; if (is $var --notblank;) {{format --currency='USD'; format --prepend='Our Price: '; apply --append;}};" class="basePrice"></h4>
<h5 data-tlc="bind $var '.%attribs.zoovy:prod_msrp'; if (is $var --notblank;) {{format --currency='USD'; format --prepend='MSRP: '; apply --append;}};" class="prodMSRP"></h5>
<span class="savings">
<span data-useparentdata='1' data-tlc="quickstart#priceretailsavingsdifference --legacy; apply --append;" class="savingsDifference"></span>
<span data-useparentdata='1' data-tlc="quickstart#priceretailsavingspercentage --legacy; apply --append;" class="savingsPercentage"></span>
</span>
</div>
<div class="socialLinks"></div>
<table class="marginBottom fullWidth gridTable" data-app-role="childrenSiblingsContainer">
<tbody data-tlc="bind $var '.%attribs.zoovy:grp_children'; store_prodlist#productlist --hideSummary='true' --withInventory='1' --withVariations='1' --templateid='productListTemplateChildren' --legacy; apply --append;"></tbody>
</table>
<div data-tlc="bind $var '.%attribs.zoovy:ship_latency'; if (is $var --notblank;) {{ format --prepend='Normally ships in '; format --append=' day(s)'; apply --append;}};" class="latency marginBottom"></div>
<div data-app-role="timeInTransit" class="displayNone"></div>
<form data-tlc="bind $var '.pid'; store_product#atcform --legacy; apply --append;" class="prodViewerAddToCartForm clearfix marginBottom" action="#" data-app-submit="quickstart|productAdd2Cart" data-show="inline">
<fieldset data-tlc="bind $var '.pid'; store_product#atcvariations --legacy; apply --append;" class="borderNone"></fieldset>
<fieldset data-tlc="bind $var '.'; store_product#atcquantityinput --defaultvalue='1' --legacy;" class="borderNone"></fieldset>
<div class='marginBottom'><input data-tlc="bind $var '.pid'; store_product#addtocartbutton --legacy;" value="Add to Cart" class="applyButton addtocartbutton displayNone" type="submit"></div>
</form>
<div data-tlc="bind $var '.%attribs.zoovy:prod_cpsiawarning'; if(is $var --notblank) {{apply --add --class='marginBottom'}}; quickstart#cpsiawarning --legacy;"></div>
<div data-tlc="bind $var '.%attribs.zoovy:qty_price'; if(is $var --notblank) {{apply --add --class='marginBottom'}}; store_product#quantitydiscounts --legacy;"></div>
<section class="marginBottom clearfix">
<span data-tlc="bind $var '.reviews.average'; if(is $var --notblank) {{format --prepend='review_'; apply --add --class=$var; }};" class="reviewSprite floatLeft marginRight"></span>
<span data-tlc="bind $var '.reviews.total'; if (is $var --notblank;) {{format --prepend=' from ' --append=' reviews'; apply --append;}};" class='floatLeft'></span>
</section>
<menu data-tlc="bind $var '.pid'; apply --attrib='data-pid';" class="CRMButtonMenu">
<a href="#" data-app-click="store_crm|productReviewShow">Write Review</a> |
<a href="#" data-app-click="quickstart|productAdd2List" data-listid="wishlist">Add to Wishlist</a>
</menu>
</td>
</tr>
<tr>
<td colspan="2" class="tabbedProductContentTD">
<!--
the tabs are built in an onComplete. ID's are added based on sku AND index, so the index (order) of the tabs MUST match the order of the tabContent divs
or the tab clicked won't open the right content.
It's done this way because ID's hard coded into template are bad mojo (templates are recycled) and because using data-binds to add id's caused some serious issues
-->
<div data-tlc="bind $var '.pid'; apply --attrib='data-pid';" class="prodTabs tabbedProductContent applyAnytabs">
<ul class="tabs">
<li class="prodDescTab"><a href="#prodDesc">Description</a></li>
<li data-tlc="bind $var '.%attribs.zoovy:prod_detail'; if(is $var --notblank) {{apply --show; }};" class="prodDetailTab displayNone"><a href="#prodSpecs">Specs</a></li>
<li data-tlc="bind $var '.%attribs.zoovy:prod_features'; if(is $var --notblank) {{ apply --show; }};" class="prodFeaturesTab displayNone"><a href="#prodFeatures">Features</a></li>
<li class="prodReviewsTab"><a href="#prodReviews">Reviews</a></li>
<li data-tlc="bind $var '.%attribs.youtube:videoid'; if(is $var --notblank) {{ apply --show; }};" class="prodVideoTab displayNone"><a href="#prodVideo">Video</a></li>
<li data-tlc="bind $var '.%attribs.zoovy:accessory_products'; if(is $var --notblank) {{ apply --show; }};" class="prodAccessoriesTab displayNone"><a href="#prodAccessories">Accessories</a></li>
</ul>
<div class="tabContent" data-anytab-content="prodDesc">
<div data-tlc="bind $var '.%attribs.zoovy:prod_desc'; if (is $var --notblank;) {{render --wiki='quickstart'; apply --append;}};"></div>
</div>
<div class="tabContent" data-anytab-content="prodSpecs">
<div data-tlc="bind $var '.%attribs.zoovy:prod_detail'; if (is $var --notblank;) {{render --wiki='quickstart'; apply --append;}};"></div>
</div>
<div class="tabContent" data-anytab-content="prodFeatures">
<div data-tlc="bind $var '.%attribs.zoovy:prod_features'; if (is $var --notblank;) {{render --wiki='quickstart'; apply --append;}};"></div>
</div>
<div class="tabContent" data-anytab-content="prodReviews">
<div data-tlc="bind $var '.pid'; apply --attrib='data-pid';" class="clearfix alignRight">
<button class="applyButton" data-app-click="store_crm|productReviewShow">Write Review</button>
</div>
<ul data-tlc="bind $var '.reviews.@reviews'; controller#loop --templateid='productReviewsTemplateDetail'; if (is $var --notblank;) {{apply --append;}};" class="listStyleNone clearfix productReviewsList"></ul>
</div>
<div class="tabContent" data-anytab-content="prodVideo">
<div data-tlc="bind $var '.%attribs.youtube:videoid'; controller#youtubevideo --legacy;"></div>
</div>
<div class="tabContent" data-anytab-content="prodAccessories">
<ul data-tlc="bind $var '.%attribs.zoovy:accessory_products'; store_prodlist#productlist --hidePagination='true' --hideSummary='true' --withReviews='1' --withInventory='1' --withVariations='1' --templateid='productListTemplateATC' --legacy; apply --append;" class="listStyleNone fluidList clearfix noPadOrMargin lineItemProdlist"></ul>
</div>
</div>
</td>
</tr>
</tbody></table>
<div class="prodlistRelatedContainer">
<ul data-tlc="bind $var '.%attribs.zoovy:related_products'; store_prodlist#productlist --hidePagination='true' --hideSummary='true' --prepend='<h2>Similar Items</h2>' --withReviews='1' --templateid='productListTemplate' --legacy; apply --append;" class="listStyleNone fluidList clearfix noPadOrMargin productList"></ul>
</div>
</div><!-- productTemplate -->
<!-- a template used for a quickview link off of a category page -->
<div id="productTemplateQuickView">
<table class="prodViewerContainer">
<tbody><tr>
<td class="imageContainer">
<div>
<div data-tlc="bind $var '.%attribs.zoovy:prod_is_tags'; quickstart#tags --legacy; if (is $var --notblank;) {{apply --append;}};" class="tagsContainer"></div>
<div data-tlc="bind $var '.pid'; quickstart#addpicslider --legacy; apply --append;"><img data-tlc="bind $var '.%attribs.zoovy:prod_image1'; apply --img --media=$var --width=240 --height=240 --bgcolor='#ffffff' --replace;" src="blank.gif" class="prodBigImage" alt="" height="240" width="240"></div>
</div>
</td>
<td class="prodSummaryContainer marginBottom no_underline">
<h1 data-tlc="bind $var '.%attribs.zoovy:prod_name'; if (is $var --notblank;) {{apply --append;}};"></h1>
<h6 data-tlc="bind $var '.pid'; if (is $var --notblank;) {{ format --prepend='Sku#: ';apply --append;}};" class="ztable_row_small stid"></h6>
<div class="priceContainer">
<h4 data-tlc="bind $var '.%attribs.zoovy:base_price'; if (is $var --notblank;) {{format --currency='USD'; format --prepend='Our Price: '; apply --append;}};" class="basePrice"></h4>
<h5 data-tlc="bind $var '.%attribs.zoovy:prod_msrp'; if (is $var --notblank;) {{format --currency='USD'; format --prepend='MSRP: '; apply --append;}};" class="prodMSRP"></h5>
<span class="savings">
<span data-tlc="bind $var '.pid'; format --prepend='You save: '; quickstart#priceretailsavingsdifference --legacy; apply --append;" class="savingsDifference"></span>
<span data-tlc="bind $var '.pid'; format --prepend='('; format --append=')'; quickstart#priceretailsavingspercentage --legacy; apply --append;" class="savingsPercentage"></span>
</span>
</div>
<div data-tlc="bind $var '.%attribs.zoovy:ship_latency'; format --prepend='Normally ships in '; format --append=' day(s)'; if (is $var --notblank;) {{apply --append;}};" class="latency"></div>
<section class="marginBottom">
<span data-tlc="bind $var '.reviews.average'; if(is $var --notblank) {{format --prepend='review_'; apply --add --class=$var; }};" class="reviewSprite"></span>
<span data-tlc="bind $var '.reviews.total'; if (is $var --notblank;) {{format --prepend=' from ' --append=' reviews' ;apply --append;}};"></span>
</section>
<div data-tlc="bind $var '.%attribs.zoovy:prod_desc'; if (is $var --notblank;) {{render --wiki='quickstart'; apply --append;}};"></div>
</td>
</tr>
<tr>
<td colspan="2">
<ul data-tlc="bind $var '.reviews.@reviews'; controller#loop --templateid='productReviewsTemplateDetail'; if (is $var --notblank;) {{apply --append;}};" class="listStyleNone clearfix productReviewsList"></ul>
</td>
</tr>
</tbody></table>
</div><!-- productTemplateQuickView -->
<!-- 404 page -->
<div id="pageNotFoundTemplate">
<h1>Unable to find page...</h1>
</div>
<!--
############################
MOST OFTEN YOU WANT TO LEAVE THESE TEMPLATES ALONE
if modified, be careful about changing id's or classes.
adding classes is not likely to have any bad effects.
if you change these, you should move them above this comment so that when you (or the next person) does an upgrade, you know what isn't default
############################
-->
<!-- used in breadcrumb -->
<ul>
<li id="breadcrumbTemplate">
<a data-tlc="bind $var '.'; store_routing#seoanchor --type='category'; apply --attrib='href'; bind $pretty '.pretty'; quickstart#cattext --legacy; apply --append;"></a>
</li>
</ul>
<div id="companyTemplate" class="clearfix">
<div class="sideline">
<nav id="companyNav">
<ul class="listStyleNone noPadOrMargin">
<!-- these are generated via javascript, based on the quickstart.pages object. -->
</ul>
</nav>
</div>
<div class="mainColumn">
<!-- .textContentArea is used as a selector in quickstart.js because article tag type isn't ie8 friendly -->
<div id="aboutArticle" class="textContentArea article">
<h1>About Us</h1>
<div>
<!-- ::: add your about us information here -->
</div>
</div>
<div id="contactArticle" class="displayNone textContentArea">
<h1>Contact Information</h1>
<div class="companyAddress">
<!-- ::: add your contact information here ::: -->
</div>
<form action="#" data-app-submit="store_crm|contactFormSubmit" name="contactForm" class='alignedForm'>
<input name="msgtype" value="feedback" type="hidden">
<fieldset>
<legend>Contact Us</legend>
<div id="contactFormMessaging"></div>
<label><span class="prompt">Email Address</span><input name="sender" required type="email" class='alignInput'></label>
<label><span class="prompt">Subject</span><input name="subject" required type="text" class='alignInput'></label>
<label><span class="prompt">Order ID</span><input name="OID" type="text" class='alignInput'></label>
<label><span class="prompt">Message</span><textarea name="body" required rows='6' class='alignInput'></textarea></label>
<div class="alignRight"><input class="applyButton" value="Send Message" type="submit"></div>
</fieldset>
</form>
</div>
<!-- faq are generated through the faq manager in the admin UI. do not add content in the faqContent area -->
<div id="faqArticle" class="displayNone textContentArea">
<h1>Frequently Asked Questions</h1>
<div id="faqContent" class=" ui-accordion ui-widget ui-helper-reset ui-accordion-icons appAccordianesque"></div>
</div>
<div class="displayNone textContentArea" id="paymentArticle">
<h1>Payment Policy</h1>
<div>
<!-- ::: add your payment policy here ::: -->
</div>
</div>
<div class="displayNone textContentArea" id="privacyArticle">
<h1>Privacy Statement</h1>
<h4>About this Privacy Policy:</h4>
<p>The entire site, or at least specific portions of this site are assisted by Zoovy technology. Zoovy has created this privacy policy as a template for customers who are using Zoovy technology with their websites. Zoovy in no way takes responsibility for the accuracy or enforcement of this policy. For a copy of Zoovy's privacy policy (which does not necessarily apply to the customers of its customers) visit http://www.zoovy.com/legal</p>
<p>Zoovy, Inc. has created this privacy statement for this Company in order to demonstrate our joint commitment to privacy. The following discloses the information gathering and dissemination practices for this website:</p>
<h5>Zoovy.com tracks IP Addresses</h5>
<p>Your IP address is used to help diagnose problems with our server, and to administer the Web site, in addition your IP address is used to help identify you and your shopping cart (in conjunction with a cookie.) We also use cookies to deliver content specific to your interests and to save your password so you don't have to re-enter it each time you visit our site.</p>
<h3>This site may contains links to other sites.</h3>
<p>This Company is not responsible for the privacy practices or the content of such Web sites, unless otherwise specified below your information is never shared with other companies, even those who are also using Zoovy technology. In the future Zoovy may provide you the ability to share your information across multiple websites which all utilize Zoovy technology however this will only be done at your explicit request.</p>
<h3>This site requires Unique Identifiers.</h3>
<p>This site uses an order form for customers to request information, products, and services, it also collects visitor's contact information (like their email address), in some circumstances their unique identifiers (like their pets name, or mothers maiden name), and financial information (like their account or credit card numbers). Contact information from the order form is used to send orders and information about our company to customers. The customer's contact information is also used to get in touch with the visitor when necessary. Users may opt-out of receiving future informational mailings; see the choice/opt-out section below, users may NOT opt out of receiving order notifications, or other contacts which are deemed essential by this Company.</p>
<h3>This site requires Financial Information.</h3>
<p>Financial information that is collected is used to bill the customer for products and services. Unique identifiers (such as pets name, and mothers maiden name) are collected from Web site visitors to verify the user's identity.</p>
<h3>This site may have Surveys and/or Contests.</h3>
<p>Our online surveys ask visitors for contact information (like their email address). We use contact data from our surveys to send the user information about our company. The customer's contact information is also used to contact the visitor when necessary. Users may opt-out of receiving future mailings; see the choice/opt-out section below. This site may also run contests in which case we may ask visitors for contact information (like their email address). Generally this information is used to verify eligibility, however we may also use contact data from our contests to send users information about this Company. The customer's contact information is also used to contact the visitor when necessary (for example winners). Users may opt-out of receiving future mailings; see the choice/opt-out section below. Financial information that is collected from our users is used to check the users' qualifications for registration and bill the user for products and services.</p>
<h3>Third Party Cookies</h3>
<p>Third party vendors, including Google, use cookies to serve the badge on the website and to serve ads based on a user's prior visits to the website. Users may opt out of Google's use of cookies by visiting the Google advertising opt-out page.</p>
<h3>This site may contain Public Forums</h3>
<p>This site may include chat rooms, forums, message boards, and/or news groups available to its users. Please remember that any information that is disclosed in these areas becomes public information and you should exercise caution when deciding to disclose your personal information.</p>
<h3>About our System Security</h3>
<p>This site has security measures in place to protect the loss, misuse and alteration of the information under our control. Information is stored behind a firewall, against a password protected database system. Whenever sensitive information is accessed it is transmitted using strong SSL encryption. this Company may keep a copy of your information on its own system using Zoovy's WebAPI system, this system may have its own security measures in place.</p>
<h3>This site provides the choice to Opt In or Out</h3>
<p>Our site provides users the opportunity to opt-out of receiving communications from us at the point where we request information about the visitor. This site gives users the following options for removing their information from our database to not receive future communications or to no longer receive our service. Each time an information email is distributed, you have the option to use unique unsubscribe url which is attached to each outgoing email. Customers may unsubscribe at any time by simply logging into their accounts.</p>
<h3>We provide the ability to Correct/Update YOUR information.</h3>
<p>This site gives users the following options for changing and modifying information previously provided. Simply visit the customer login area of this website.</p>
<!-- !!! load amendments here -->
</div>
<div class="displayNone textContentArea" id="returnArticle">
<h1>Return Policy</h1>
<div>
<!-- ::: add your return policy here ::: -->
</div>
</div>
<div class="displayNone textContentArea" id="shippingArticle">
<h1>Shipping Information</h1>
<div>
<!-- ::: add your shipping information here ::: -->
</div>
</div>
</div>
</div><!-- /companyTemplate -->
<div id="customerTemplate" class="clearfix smallButton">
<div class="sideline">
<nav id="customerNav">
<ul class="listStyleNone noPadOrMargin">
<li><a href='#!customer/subscriberLists'>Newsletter Subscription</a></li>
<li><a href="#!customer/myaccount">My Account</a></li>
<li><a href="#!customer/changepassword">Change Password</a></li>
<li><a href="#!customer/orders">Order History</a></li>
<li><a href="#!customer/lists">Manage Lists</a></li>
<li class="hideIfLoggedOut"><a href="#!customer/logout">Log Out</a></li>
</ul>
</nav>
</div>
<div class="mainColumn">
<!-- .textContentArea is used as a selector because IE8 doesn't play well with tag type article as a selector -->
<!--
newsletterArticle is intended for buyers who are not logged in or do not have an account.
-->
<div id="newsletterArticle" class="displayNone textContentArea">
<h1>Subscribe to our Newsletter and Save!</h1>
<form action="#" name="subscribeFrm" data-app-submit="quickstart|subscribeSubmit" class='alignedForm'>
<fieldset class="userInfo borderNone">
<label>
<input placeholder="email address" maxlength="50" size="30" required name="email" value="" type="email" data-tlc="bind $var '.customer.login'; if(is $var --notblank;) {{apply --select=$var;}};">
</label>
</fieldset>
<fieldset data-tlc="apply --empty; bind $var '.@lists'; controller#loop --templateid='subscriberListItemTemplate'; apply --append;" class="borderNone subscriberLists"></fieldset>
<input class="applyButton" value="Subscribe" type="submit">
</form>
</div>
<!--
subscribeListsArticle is used for authenticated buyers.
-->
<div id="subscriberListsArticle" class="displayNone textContentArea">
<h1>Manage your Subscriptions</h1>
<form action="#" name="subscribeFrm" data-app-submit="store_crm|buyerUpdate" class='alignedForm' onSubmit="return false">
<!-- buyer is logged in. Don't need email/name inputs -->
<fieldset data-update-verb='tags' data-tlc="apply --empty; bind $tags '.%info.@tags'; bind $var '.@lists'; controller#loop --templateid='subscriberListItemTemplate'; apply --append;" class="borderNone subscriberLists"></fieldset>
<input class="applyButton" value="Subscribe" type="submit">
</form>
</div>
<div id="myaccountArticle" class="displayNone textContentArea">
<h1>My Account</h1>
<section>
<div class="billAddressContainer" data-app-role="addressContainer" data-app-addresstype="bill">
<div class="marginBottom">
<button class="floatRight applyButton" data-icon-primary="ui-icon-plus" data-app-click="quickstart|showBuyerAddressAdd">New Billing Address</button>
<h2>Billing Address(es)</h2>
</div>
<div data-tlc="bind $var '.@bill'; controller#loop --templateid='billAddressTemplate'; if (is $var --notblank;) {{apply --empty; apply --append;}};" class="billAddresses"></div>
</div>
<div class="shipAddressContainer" data-app-role="addressContainer" data-app-addresstype="ship">
<div class="marginBottom">
<button class="floatRight applyButton" data-icon-primary="ui-icon-plus" data-app-click="quickstart|showBuyerAddressAdd">New Shipping Address</button>
<h2>Shipping Address(es)</h2>
</div>
<div data-tlc="bind $var '.@ship'; controller#loop --templateid='shipAddressTemplate'; if (is $var --notblank;) {{apply --empty; apply --append;}};" class="billAddresses"></div>
</div>
</section>
</div>
<div id="ordersArticle" class="displayNone textContentArea">
<h1>Order History</h1>
<div data-tlc="bind $var '.@orders'; controller#loop --templateid='orderLineItemTemplate'; if (is $var --notblank;) {{apply --append;}};" data-app-role="orderList" class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons "></div>
</div>
<div id="invoiceArticle" class="displayNone textContentArea">
<div data-tlc="bind $var '.'; transmogrify --dataset=$var --templateid='invoiceTemplate'; apply --append;" data-bind="format:loadsTemplate; loadsTemplate: invoiceTemplate; useParentData:true;"></div>
</div>
<div id="changepasswordArticle" class="displayNone textContentArea">
<h1>Change Password</h1>
<form action="#" name="changePasswordForm" data-app-submit="quickstart|passwordChangeSubmit" class='alignedForm'>
<fieldset class="borderNone">
<p>For passwords, we recommend using mixed case, at least one number and one special character.</p>
<div class="messaging"></div>
<label><span class="prompt">Password</span><input name="password" size="35" required type="password" data-minlength='8'></label>
<label><span class="prompt">Confirm Password</span><input name="password2" required size="35" type="password" data-minlength='8'></label>
<div class='alignCenter'><input value="Change Password" class="loadingButton applyButton" type="submit"></div>
</fieldset>
</form>
</div>
<div id="listsArticle" class="displayNone textContentArea">
<h1>List Manager</h1>
<div class='applyAccordion' data-tlc="apply --empty; bind $var '.@lists'; controller#loop --templateid='buyerListTemplate'; apply --append; bind $content '.@lists'; controller#loop --templateid='buyerListProdlistContainerTemplate'; apply --append;"></div>
</div>
<div id="forgetmeArticle" class="displayNone textContentArea">
<h1>Your 'Forget Me' list</h1>
<p>Items on this list will not show up anywhere on the site. Use it for items you never want to see again. If you add an item to the list by mistake, use this page to remove it from the list and it will start re-appearing during your shopping experience.</p>
<ul id="forgetmeContainer" class="prodlist ">
</ul>
</div>
</div>
</div>
<ul>
<li id='subscriberListItemTemplate'>
<label data-tlc="bind $var '.EXEC_SUMMARY'; apply --attrib='title';" >
<input type='checkbox' data-tlc="bind $id '.ID'; format --prepend='USER#SUB'; apply --attrib='name'; set $checked ''; store_crm#buyersubscribe --id=$id; if(is $checked --notblank;) {{ apply --attrib='checked';}};" />
<span data-tlc="bind $var '.NAME'; apply --append;"></span>
</li>
</ul>