forked from CommerceRack/anycommerce
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathapp-quickstart.html
More file actions
1539 lines (976 loc) · 64.2 KB
/
Copy pathapp-quickstart.html
File metadata and controls
1539 lines (976 loc) · 64.2 KB
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 or title, the SEO layer will add it -->
<!-- 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' >
<base href='' /><!-- leave blank so it works for a local file. updated to / if protocol is not file: -->
<script type="text/javascript">
var _gaq = _gaq || {'push':function(){}} //here for testing. REPLACE BEFORE DEPLOYMENT!
var myCreole;
var app = {vars:{
"release":"201336.a", //increment this with each change. should solve caching issues. format: YYYYMMDDHHMMSS
"_clientid":"zmvc",
"baseURL":"", //used in non-local mode.
"checkoutAuthMode" : "required",//can be passive, active or required
"testURL":"http://www.ylh.zoovy.com/" //used ONLY if protocol is file: (for testing)
},u:{},rq:[]};
//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:') {
app.vars.baseURL = "";
}
else {
app.vars.baseURL = document.location.protocol+"//"+document.domain+"/";
}
document.getElementsByTagName('base')[0].href = app.vars.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.1/themes/ui-lightness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="resources/jquery.ui.widget.min.js"></script><!-- here so that plugins that may load before the jqueryui lib load without error -->
<script type="text/javascript" src="loadscript.js"></script>
<script type="text/javascript">
app.u.loadScript(app.vars.baseURL+"app-quickstart-init.js");
</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>
<!--
*************************************************************************************************************
**
**
** 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'>
<!--
############################
COMMONLY EDITED TEMPLATES
############################
-->
<!--
the homepageTemplate template is loaded into mainContentArea by default when the application loads
-->
<div id='homepageTemplate' class='homeTemplate'>
<ul data-bind="var: category(@subcategoryDetail); format: categoryList; extension: store_navcats; loadsTemplate: categoryListTemplate; detail:max;" class='listStyleNone fluidList clearfix noPadOrMargin categoryList'></ul>
<ul data-bind="var: category(@products); format: productList; editor: finder; extension: store_prodlist; loadsTemplate: productListTemplate; hide_summary:1; before:<h2>Featured Items</h2>; withReviews:1;" class='listStyleNone fluidList clearfix noPadOrMargin productList'></ul>
<p data-bind="var: category(%page.description); format:wiki; wikiFormats:myRIA; editor: textarea;"></p>
<!-- a sample of how to format an elastic native search in a data-bind -->
<ul id='homeProdSearchBestSellers' data-bind='var: elastic-native({"size":"4","mode":"elastic-native","filter":{"term":{"tags":"IS_BESTSELLER"}}}); format: productSearch; extension: myRIA; loadsTemplate: productListTemplateResultsNoPreview; before:<h2>Best Sellers</h2>;' class='listStyleNone fluidList clearfix noPadOrMargin productList'></ul>
<a href="#" onClick="return showContent('search',{'TAG':'IS_BESTSELLER'});">See all Best Sellers</a>
<!-- a sample of how to get a 'list' src onto the page. -->
<ul data-bind="var: list($models.@products); format: productList; editor: finder; extension: store_prodlist; loadsTemplate: productListTemplate; withReviews:1; items_per_page: 25;" 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='loadingBG categoryTemplate'>
<ul class='breadcrumb clearfix noPadOrMargin fluidList' data-bind='var: category(id); format:breadcrumb; extension:store_navcats; loadsTemplate: breadcrumbTemplate;'></ul>
<img data-bind="var: category(%page.banner1); format: banner; editor: banner; height:250; width:750; extension: myRIA;" src='images/blank.gif' alt='' />
<h2 data-bind="var: category(%page.header); format: text; editor: text;"></h2>
<p data-bind="var: category(%page.description); format:wiki; wikiFormats:myRIA; editor: textarea;"></p>
<ul data-bind="var: category(@subcategoryDetail); format: categoryList; extension: store_navcats; loadsTemplate: categoryListTemplate; detail:max;" class='listStyleNone fluidList clearfix noPadOrMargin categoryList'></ul><!-- outputs a list of subcategories -->
<ul data-bind="var: category(@products); format: productList; editor: finder; extension: store_prodlist; loadsTemplate: productListTemplate; withReviews:1; items_per_page: 25;" class='listStyleNone fluidList clearfix noPadOrMargin productList'></ul><!-- outputs the product list -->
<p data-bind="var: category(%page.description2); format:wiki; wikiFormats:myRIA; editor: textarea;"></p>
</div>
<!-- used to display a category within a 'list', usually in the body of a category or the homepage. -->
<ul>
<li id='categoryListTemplate'>
<div onClick="showContent('category',{'navcat':$(this).parent().attr('data-catsafeid')});" class='pointer'>
<div class='thumbContainer'><img src='blank.gif' class='catThumb' alt='' data-bind='var: category(%meta.CAT_THUMB); format:imageURL;' width='120' height='120' /></div>
<div class='catName white2LGray'><span data-bind='var: category(pretty); format:catText; extension: myRIA;'></span></div>
</div>
</li>
<li id='categoryListTemplateRootCats'>
<div onClick="showContent('category',{'navcat':$(this).parent().attr('data-catsafeid')});" class='pointer'>
<div class='thumbContainer'><img src='blank.gif' class='catThumb' alt='' data-bind='var: category(%meta.CAT_THUMB); format:imageURL;' width='35' height='35' /></div>
<div class='catName'><span data-bind='var: category(pretty); format:catText; extension: myRIA;'></span></div>
</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 'onclick' container or two events will occur onclick.
-->
<li id='productListTemplate' class='loadingBG ' onMouseOver="$('.quickView',$(this)).show();" onMouseOut="$('.quickView').hide();" >
<button class='floatRight pointer quickView displayNone' onClick="quickView('product',{'templateID':'productTemplateQuickView','pid':$(this).closest('[data-pid]').attr('data-pid')});">Quickview</button>
<div onClick="showContent('product',{'pid':$(this).attr('data-pid')})" data-bind='var:product(pid);format:assignAttribute; attribute:data-pid;' class='pointer'>
<div class='prodThumbContainer' data-bind='var:product(pid); format:addPicSlider; extension:myRIA;'>
<img src='blank.gif' class='prodThumb' alt='' data-bind='var: product(zoovy:prod_image1); format:imageURL;' width='120' height='120' />
</div>
<h5 data-bind='var: product(zoovy:prod_name); format:text;'></h5>
<h6 data-bind='var: product(zoovy:base_price); format:money; currencySign: $; hideZero:true; className:price; pretext: Our Price: ;'></h6>
<span data-bind='var: reviews(reviews.average); format:addClass; className:review_;' class='reviewSprite'></span>
<!-- <span data-bind='var: reviews(reviews.total); format:text; pretext: from ;posttext: reviews; className:numReviews;'></span> -->
</div>
<form data-bind='var: product(pid); format:atcForm; extension:store_product;' class='prodViewerAddToCartForm clearfix' action='#' onSubmit="app.ext.myRIA.u.addItemToCart($(this),{'action':'modal'}); return false;">
<input type='hidden' name='qty' value='1' />
<button data-bind='format:addToCartButton; extension:myRIA; useParentData:true;'>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-bind='var:product(pid);format:assignAttribute; attribute:data-pid;'>
<div class='prodThumbContainer floatLeft'>
<img src='blank.gif' class='prodThumb' alt='' data-bind='var: product(zoovy:prod_image1); format:imageURL;' width='120' height='120' />
</div>
<h5 data-bind='var: product(zoovy:prod_name); format:text;'></h5>
<h6 data-bind='var: product(zoovy:base_price); format:money; currencySign: $; hideZero:true; className:price; pretext: Our Price: ;'></h6>
<span data-bind='var: reviews(reviews.average); format:addClass; className:review_;' class='reviewSprite'></span>
<form data-bind='var: product(pid); format:atcForm; extension:store_product;' class='prodViewerAddToCartForm clearfix' action='#' onSubmit="app.ext.myRIA.u.addItemToCart($(this)); return false;">
<fieldset data-bind='var: product(pid); format:atcVariations; extension:store_product;' class='borderNone'></fieldset>
<fieldset data-bind='useParentData:true; format:atcQuantityInput; extension:store_product; pretext:Quantity: ; defaultValue:0;' class='borderNone'></fieldset>
<input type='submit' value='Add to Cart' class='ui-button ui-button-text ui-corner-all ui-state-default addToCartButton displayNone' data-bind='var: product(pid); format:addToCartButton; extension:store_product;' />
</form>
</div>
</li>
<li id='productListTemplateBuyerList' class='loadingBG clearfix' >
<div data-bind='var:product(pid);format:assignAttribute; attribute:data-pid;' >
<div class='prodThumbContainer floatLeft'>
<div class='ui-widget ui-widget-content ui-corner-all'>
<img src='blank.gif' class='prodThumb' alt='' data-bind='var: product(zoovy:prod_image1); format:imageURL;' width='160' height='160' />
<div class='buttonList ui-widget ui-widget-header ui-corner-all alignCenter'>
<button class='ui-state-default ui-corner-all' title='add item to cart' onClick="showContent('product',{'pid':$(this).closest('[data-pid]').attr('data-pid')});">
<span class="ui-icon ui-icon-cart"></span>
</button>
<button class='ui-state-default ui-corner-all' title='more information' onClick="quickView('product',{'templateID':'productTemplateQuickView','pid':$(this).closest('[data-pid]').attr('data-pid')});">
<span class="ui-icon ui-icon-info"></span>
</button>
<button class='ui-state-default ui-corner-all' title='write a review for this item' onClick="app.ext.store_crm.u.showReviewFrmInModal({'pid':$(this).closest('[data-pid]').attr('data-pid'),'templateID':'reviewFrmTemplate'});">
<span class="ui-icon ui-icon-star"></span>
</button>
<button class='ui-state-default ui-corner-all' title='remove item from list' onClick="app.ext.myRIA.a.removeItemFromBuyerList({'stid':$(this).closest('[data-pid]').attr('data-pid'),'listID':$(this).closest('[data-buyerlistid]').attr('data-buyerlistid')},{'parentID':$(this).closest('li').attr('id')});">
<span class="ui-icon ui-icon-trash"></span>
</button>
</div>
</div>
</div>
<span data-bind='var: reviews(reviews.average); format:addClass; className:review_;' class='reviewSprite floatRight' ></span>
<h5 data-bind='var: product(zoovy:prod_name); format:text;'></h5>
<h6 data-bind='var: product(zoovy:base_price); format:money; currencySign: $; hideZero:true; className:price; pretext: Our Price: ;'></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 'onclick' 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 onClick="app.ext.myRIA.a.handleProdPreview($(this).parent().attr('data-pid'));" class='pointer'>
<div class='prodThumbContainer'>
<img src='blank.gif' class='prodThumb' alt='' data-bind='var: product(images); format:imageURL;isElastic:1;bgcolor:ffffff;' width='120' height='120' />
</div>
<h5 class='hideInMinimalMode' data-bind='var: product(prod_name); format:text;'></h5>
<h6 class='hideInMinimalMode' data-bind='var: product(base_price); format:money; isElastic:1; currencySign: $; hideZero:true; className:price; pretext: Our Price: ;'></h6>
</div>
<div class='hideInMinimalMode pointer moreDetails' onClick="showContent('product',{'pid':$(this).parent().attr('data-pid')});">more details</div>
</li>
<li id='productListTemplateResultsNoPreview' class='loadingBG searchResultsProduct ' >
<div onClick="return showContent('product', {'pid' : $(this).parent().attr('data-pid')});" class='pointer'>
<div class='prodThumbContainer'>
<img src='blank.gif' class='prodThumb' alt='' data-bind='var: product(images); format:imageURL;isElastic:1;bgcolor:ffffff;' width='120' height='120' />
</div>
<h5 class='hideInMinimalMode' data-bind='var: product(prod_name); format:text;'></h5>
<h6 class='hideInMinimalMode' data-bind='var: product(base_price); format:money; isElastic:1; currencySign: $; hideZero:true; className:price; pretext: Our Price: ;'></h6>
</div>
<div class='hideInMinimalMode pointer moreDetails' onClick="showContent('product',{'pid':$(this).parent().attr('data-pid')});">more details</div>
</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 id='productTemplate' class='productPage'>
<ul class='clearfix noPadOrMargin fluidList breadcrumb' data-bind='var: session(session.recentCategories.0); format:breadcrumb; extension:store_navcats; loadsTemplate: breadcrumbTemplate;'></ul>
<table class='prodViewerContainer'>
<tr>
<td class='imageContainer'>
<div onClick='app.ext.store_product.u.showPicsInModal({"pid":$(this).attr("data-pid")});' class='pointer clearfix' data-bind='var:product(pid);format:assignAttribute; attribute:data-pid;'>
<div data-bind="var: product(zoovy:prod_is_tags); format:addTagSpans;" class='tagsContainer'></div>
<img src='blank.gif' class='prodBigImage' alt='' data-bind='var: product(zoovy:prod_image1); format:imageURL;' width='340' height='340' />
</div>
<div data-bind='var:product(pid);format:assignAttribute; attribute:data-pid;' class='prodThumbs'>
<div onClick='app.ext.store_product.u.showPicsInModal({"pid":$(this).parent().attr("data-pid"),"int":"2"});' class='pointer'><img src='blank.gif' data-bind='var: product(zoovy:prod_image2); format:imageURL;' alt='' width='100' height='100' /></div>
<div onClick='app.ext.store_product.u.showPicsInModal({"pid":$(this).parent().attr("data-pid"),"int":"3"});' class='pointer'><img src='blank.gif' data-bind='var: product(zoovy:prod_image3); format:imageURL;' alt='' width='100' height='100' /></div>
<div onClick='app.ext.store_product.u.showPicsInModal({"pid":$(this).parent().attr("data-pid"),"int":"4"});' class='pointer'><img src='blank.gif' data-bind='var: product(zoovy:prod_image4); format:imageURL;' alt='' width='100' height='100' /></div>
</div>
</td>
<td class='prodSummaryContainer marginBottom no_underline'>
<h1 data-bind='var: product(zoovy:prod_name); format:text;'></h1>
<hgroup class='marginBottom'>
<h5 class='stid' data-bind='var: product(pid); format:text; pretext: Sku: ;'></h5>
<h5 data-bind='var: product(zoovy:prod_mfg); format:searchLink; extension:myRIA; pretext: Mfg: ;'></h5>
<h5 data-bind='var: product(zoovy:prod_mfgid); format:text; pretext: Mfg ID: ;'></h5>
</hgroup>
<div class='priceContainer marginBottom'>
<h4 class='basePrice' data-bind='var: product(zoovy:base_price); format:money; currencySign: $; hideZero:true; pretext: Our Price: ;'></h4>
<h5 class='prodMSRP' data-bind='var: product(zoovy:prod_msrp); format:money; currencySign: $; hideZero:true; pretext: MSRP: ;'></h5>
<span class='savings'>
<span class='savingsDifference' data-bind='var: product(pid); format:priceRetailSavingsDifference; extension:myRIA; pretext: You save: ;'></span>
<span class='savingsPercentage' data-bind='var: product(pid); format:priceRetailSavingsPercentage; extension:myRIA; pretext: (; posttext:);'></span>
</span>
</div>
<div class="socialLinks"></div>
<table class='marginBottom fullWidth gridTable' data-app-role='childrenSiblingsContainer'>
<tbody data-bind="var: product(zoovy:grp_children); format:productList; extension:store_prodlist; loadsTemplate:productListTemplateChildren;hide_summary:true; withInventory:1; withVariations:1;"></tbody>
</table>
<div data-bind='var: product(zoovy:ship_latency); format:text;pretext:Normally ships in ;posttext: day(s);' class='latency marginBottom'></div>
<div data-app-role='timeInTransit' class='displayNone'></div>
<form data-bind='var: product(pid); format:atcForm; extension:store_product;' class='prodViewerAddToCartForm clearfix' action='#' onSubmit="app.ext.myRIA.u.addItemToCart($(this), {'action':'modal'}); return false;">
<fieldset data-bind='var: product(pid); format:atcVariations; extension:store_product;' class='borderNone'></fieldset>
<fieldset data-bind='useParentData:true; format:atcQuantityInput; extension:store_product; pretext:Quantity: ; defaultValue:1;' class='borderNone'></fieldset>
<input type='submit' value='Add to Cart' class='ui-button ui-button-text ui-corner-all ui-state-default addToCartButton displayNone' data-bind='var: product(pid); format:addToCartButton; extension:store_product;' />
</form>
<div data-bind='var:product(zoovy:prod_cpsiawarning); format:cpsiaWarning; extension:myRIA;'></div>
<div data-bind='var:product(zoovy:qty_price);format:quantityDiscounts; extension:store_product; pretext:Quantity Discounts:; className:marginBottom;'></div>
<section class='marginBottom'>
<span data-bind='var: reviews(reviews.average); format:addClass; className:review_;' class='reviewSprite'></span>
<span data-bind='var: reviews(reviews.total); format:text;posttext: from ;posttext: reviews; className:numReviews;'></span>
</section>
<menu data-bind='var:product(pid);format:assignAttribute; attribute:data-pid;' class='CRMButtonMenu'>
<a href='#' onClick='app.ext.store_crm.u.showReviewFrmInModal({"pid":$(this).parent().attr("data-pid"),"templateID":"reviewFrmTemplate"}); return false;'>Write Review</a> |
<a href='#' onClick="app.ext.myRIA.a.add2BuyerList({sku:$(this).parent().attr('data-pid'),'listid':'wishlist'}); return false;">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 class='prodTabs tabbedProductContent'>
<ul class='tabs'>
<li class='prodDescTab'><a href='#prodDesc'>Description</a></li>
<li class='prodDetailTab displayNone' data-bind='var: product(zoovy:prod_detail); format:showIfSet;'><a href='#prodSpecs'>Specs</a></li>
<li class='prodFeaturesTab displayNone' data-bind='var: product(zoovy:prod_features); format:showIfSet;'><a href='#prodFeatures'>Features</a></li>
<li class='prodReviewsTab'><a href='#prodReviews'>Reviews</a></li>
<li class='prodVideoTab displayNone' data-bind='var: product(youtube:videoid); format:showIfSet;'><a href='#prodVideo'>Video</a></li>
<li class='prodAccessoriesTab displayNone' data-bind='var: product(zoovy:accessory_products); format:showIfSet;'><a href='#prodAccessories'>Accessories</a></li>
</ul>
<div class='tabContent' data-anytab-content='prodDesc'>
<div data-bind='var: product(zoovy:prod_desc); format:wiki; wikiFormats:myRIA;'></div>
</div>
<div class='tabContent' data-anytab-content='prodSpecs'>
<div data-bind='var: product(zoovy:prod_detail); format:wiki; wikiFormats:myRIA;'></div>
</div>
<div class='tabContent' data-anytab-content='prodFeatures'>
<div data-bind='var: product(zoovy:prod_features); format:wiki; wikiFormats:myRIA;'></div>
</div>
<div class='tabContent' data-anytab-content='prodReviews'>
<div class='clearfix alignRight'>
<button class='ui-button-text ui-button ui-state-default ui-corner-all' onClick='app.ext.store_crm.u.showReviewFrmInModal({"pid":$(this).attr("data-pid"),"templateID":"reviewFrmTemplate"});' data-bind='var:product(pid);format:assignAttribute; attribute:data-pid;'>Write Review</button>
</div>
<ul class='listStyleNone clearfix productReviewsList' data-bind="var: reviews(reviews.@reviews); format:processList; loadsTemplate:productReviewsTemplateDetail;"></ul>
</div>
<div class='tabContent' data-anytab-content='prodVideo'>
<div data-bind='var: product(youtube:videoid); format:youtubeVideo;'></div>
</div>
<div class='tabContent' data-anytab-content='prodAccessories'>
<ul class='listStyleNone fluidList clearfix noPadOrMargin lineItemProdlist' data-bind="var: product(zoovy:accessory_products); format:productList; extension:store_prodlist;loadsTemplate:productListTemplateATC;hide_pagination:true;hide_summary:true; withReviews:1; withInventory:1; withVariations:1;"></ul>
</div>
</div>
</td>
</tr>
</table>
<div class='prodlistRelatedContainer'>
<ul class='listStyleNone fluidList clearfix noPadOrMargin productList' data-bind="var: product(zoovy:related_products); format:productList; extension:store_prodlist;loadsTemplate:productListTemplate;hide_pagination:true;hide_summary:true; before:<h2>Similar Items</h2>; withReviews:1;"></ul>
</div>
</div><!-- productTemplate -->
<!-- a template used for a quickview link off of a category page -->
<div id='productTemplateQuickView'>
<table class='prodViewerContainer'>
<tr>
<td class='imageContainer'>
<div>
<div data-bind="var: product(zoovy:prod_is_tags); format:addTagSpans;" class='tagsContainer'></div>
<div data-bind='var:product(pid); format:addPicSlider; extension:myRIA;'><img src='blank.gif' class='prodBigImage' alt='' data-bind='var: product(zoovy:prod_image1); format:imageURL;' width='240' height='240' /></div>
</div>
</td>
<td class='prodSummaryContainer marginBottom no_underline'>
<h1 data-bind='var: product(zoovy:prod_name); format:text;'></h1>
<h6 class='ztable_row_small stid' data-bind='var: product(pid); format:text; className: stid; pretext: Sku#: ;'></h6>
<div class='priceContainer'>
<h4 class='basePrice' data-bind='var: product(zoovy:base_price); format:money; currencySign: $; hideZero:true; pretext: Our Price: ;'></h4>
<h5 class='prodMSRP' data-bind='var: product(zoovy:prod_msrp); format:money; currencySign: $; hideZero:true; pretext: MSRP: ;'></h5>
<span class='savings'>
<span class='savingsDifference' data-bind='var: product(pid); format:priceRetailSavingsDifference; extension:myRIA; pretext: You save: ;'></span>
<span class='savingsPercentage' data-bind='var: product(pid); format:priceRetailSavingsPercentage; extension:myRIA; pretext: (; posttext:);'></span>
</span>
</div>
<div data-bind='var: product(zoovy:ship_latency); format:text;pretext:Normally ships in ;posttext: day(s);' class='latency'></div>
<section class='marginBottom'>
<span data-bind='var: reviews(reviews.average); format:addClass; className:review_;' class='reviewSprite'></span>
<span data-bind='var: reviews(reviews.total); format:text;posttext: from ;posttext: reviews; className:numReviews;'></span>
</section>
<div data-bind='var: product(zoovy:prod_desc); format:wiki; wikiFormats:myRIA;'></div>
</td>
</tr>
<tr>
<td colspan='2'>
<ul class='listStyleNone clearfix productReviewsList' data-bind="var: reviews(reviews.@reviews); format:processList; loadsTemplate:productReviewsTemplateDetail;"></ul>
</td>
</tr>
</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 href='#' onClick="return showContent('category',{'navcat':$(this).parent().attr('data-catsafeid')});" data-bind='var: category(pretty); format:catText; extension: myRIA;'></a>
</li>
</ul>
<!-- loadingBG needed on this for app init (content may take a moment to load) -->
<div id='companyTemplate' class='clearfix loadingBG'>
<div class='sideline' >
<nav id='companyNav'>
<ul class='listStyleNone noPadOrMargin'>
<li><a href='#company?show=about'>About Us</a></li>
<li><a href='#company?show=contact'>Contact Information</a></li>
<li><a href='#company?show=faq'>FAQ</a></li>
<li><a href='#company?show=payment'>Payment Policy</a></li>
<li><a href='#company?show=privacy'>Privacy Statement</a></li>
<li><a href='#company?show=return'>Return Policy</a></li>
<li><a href='#company?show=shipping'>Shipping Information</a></li>
</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 data-bind='var: profile(zoovy:about); format:wiki; wikiFormats:myRIA;' id='aboutUsContent'></div>
</div>
<div id='contactArticle' class='displayNone textContentArea'>
<h1>Contact Information</h1>
<form action='#' onSubmit="app.calls.appSendMessage.init($(this).serializeJSON(),{'callback':'showMessaging','parentID':'contactFormMessaging','message':'Thank you, your message has been sent'},'immutable'); app.model.dispatchThis('immutable'); return false;" id='contactForm' name='contactForm'>
<fieldset>
<legend>Contact Us</legend>
<div id='contactFormMessaging'></div>
<div><label for='contactFormSender'>Email Address: </label><input type='email' name='sender' required='required' id='contactFormSender' /></div>
<div><label for='contactFormSubject'>Subject: </label><input type='text' name='subject' id='contactFormSubject' /></div>
<div><label for='contactFormOID'>Order ID: </label><input type='text' name='OID' id='contactFormOID' /></div>
<div><label for='contactFormBody'>Message: </label><textarea name='body' required='required' id='contactFormBody'></textarea></div>
<div class='alignRight'><input type='submit' class='ui-button-text ui-button ui-state-default ui-corner-all' value='Send Message' />
</div>
</fieldset>
</form>
<div data-bind='var: profile(zoovy:contact); format:wiki; wikiFormats:myRIA;' id='contactContent'></div>
</div>
<div id='faqArticle' class='displayNone textContentArea'>
<h1>Frequently Asked Questions</h1>
<div id='faqContent' class='loadingBG ui-accordion ui-widget ui-helper-reset ui-accordion-icons appAccordianesque'></div>
</div>
<div class='displayNone textContentArea' id='paymentArticle'>
<h1>Payment Policy</h1>
<div data-bind='var: profile(zoovy:payment_policy); format:wiki; wikiFormats:myRIA;' id='paymentContent'></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 data-bind='var: profile(zoovy:return_policy); format:wiki; wikiFormats:myRIA;' id='returnContent'></div>
</div>
<div class='displayNone textContentArea' id='shippingArticle'>
<h1>Shipping Information</h1>
<div data-bind='var: profile(zoovy:shipping_policy); format:wiki; wikiFormats:myRIA;' id='shippingContent'></div>
</div>
</div>
</div><!-- /companyTemplate -->
<!-- loadingBG needed on this for app init (content may take a moment to load) -->
<div id='customerTemplate' class='clearfix'>
<div class='sideline' >
<nav id='customerNav'>
<ul class='listStyleNone noPadOrMargin'>
<!-- before restoring this, test cuz news form on left was causing some conflicts
<li><a href='#customer?show=subscriberLists'>Newsletter Subscription</a></li> -->
<li><a href='#customer?show=myaccount'>My Account</a></li>
<li><a href='#customer?show=changepassword'>Change Password</a></li>
<li><a href='#customer?show=orders'>Order History</a></li>
<li><a href='#customer?show=lists'>Manage Lists</a></li>
<li class='hideIfLoggedOut'><a href="#" onClick="app.ext.myRIA.u.handleLogoutActions(); return false;">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 used for buyers who are not logged in or do not have an account.
subscribeListsArticle is used for authenticated buyers
-->
<div id='newsletterArticle' class='displayNone textContentArea'>
<h1>Subscribe to our Newsletter and Save!</h1>
<div data-bind="format:loadsTemplate; loadsTemplate:subscribeFormTemplate;"></div>
</div>
<div id='subscriberListsArticle' class='displayNone textContentArea'>
<h1>Manage your Subscriptions</h1>
<!-- save onchange -->
<form action='#' name='subscribeFrm'>
<fieldset data-bind="var:newsletters(@lists); format:subscribeCheckboxes; extension:store_crm;" class='borderNone subscriberLists'></fieldset>
</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' data-app-event='myRIA|showBuyerAddressAdd'>Add New Billing Address</button>
<h2>Billing Address(es)</h2>
</div>
<div class='billAddresses' data-bind="var: buyer(@bill); format:processList; loadsTemplate:billAddressTemplate;"></div>
</div>
<div class='shipAddressContainer' data-app-role='addressContainer' data-app-addresstype='ship'>
<div class='marginBottom'>
<button class='floatRight' data-app-event='myRIA|showBuyerAddressAdd'>Add New Shipping Address</button>
<h2>Shipping Address(es)</h2>
</div>
<div class='billAddresses' data-bind="var: buyer(@ship); format:processList; loadsTemplate:shipAddressTemplate;"></div>
</div>
</section>
</div>
<div id='ordersArticle' class='displayNone textContentArea'>
<h1>Order History</h1>
<div data-bind="var: orders(@orders); format:processList; loadsTemplate:orderLineItemTemplate;" 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-bind="format:loadsTemplate; loadsTemplate: invoiceTemplate; useParentData:true;"></div>
</div>
<div id='changepasswordArticle' class='displayNone textContentArea'>
<h1>Change Password</h1>
<div id='changepasswordContainer'>
<form action='#' id='changePasswordForm' name='changePasswordForm' onSubmit="app.ext.store_crm.u.handleChangePassword($(this),{'callback':'showMessaging','message':'Thank you, your password has been changed','jqObj':$(this).parent()}); return false">
<fieldset class='borderNone'>
<div class="messaging"></div>
<div class='marginBottom'><label for='changePassword'>Password</label><input type='password' name='password' size='35' /></div>
<div class='marginBottom'><label for='changePassword2'>Confirm Password</label><input type='password' name='password2' size='35' /></div>
<div class='marginBottom'><input type='submit' value='Change Password' class='loadingButton ui-button-text ui-button ui-state-default ui-corner-all'></div>
</fieldset>
</form>
</div>
</div>
<div id='listsArticle' class='displayNone textContentArea'>
<h1>List Manager</h1>
<div id='listsContainer' class='prodlist loadingBG'></div>
<div id='listEditorContainer' class='displayNone loadingBG'></div><!-- editor for a given list gets added here -->
</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 loadingBG'>
</ul>
</div>
</div>
</div>
<div id='searchTemplate' class='searchResultsPage clearfix'>
<!-- the div is use to show a detailed view of a product. should be hidden by default. -->
<div class='previewProductDetail displayNone'></div>
<div class='previewListContainer'>
<!-- productListTemplateResults gets loaded into here -->
<ul id='resultsProductListContainer' class='listStyleNone fluidList noPadOrMargin productList'></ul>
</div>
</div>
<!--
a template for multipage controls
after this is generated, actions for going to last and next page will be added by the extension.
to any element with a class of paging and a data-role of either 'next' or 'previous'
onclicks are recursive, so only add it to the parent element.
.mpControlsPagination is used to 'hide' the pagination portion of the header if pagination is disabled.
-->
<div id='mpControlSpec' class='mpControlContainer'>
<div class='mpControls ui-widget ui-state-default ui-corner-top'>
<span class="mpControlsPagination ui-state-active ui-corner-all floatRight paging pointer" data-role='next' title="next page">
<span class="ui-icon ui-icon-circle-triangle-e"></span>
</span>
<div class='floatRight ddUlMenu mpControlsPagination'>
<ul>
<li>
<a href='#' onClick='return false;'>
<span data-bind='var:prodlistmeta(page_in_focus); format:text; pretext: page ;'></span>
<span data-bind='var:prodlistmeta(total_page_count); format:text; pretext: of ;'></span> </a>
<ul data-bind='var:prodlistmeta(total_page_count); format:mpPagesAsListItems; extension:store_prodlist;' class='ui-widget-content ui-corner-bottom'></ul>
</li>
</ul>
</div>
<span class="mpControlsPagination ui-state-active ui-corner-all floatRight paging pointer" data-role='previous' title="previous page">
<span class="ui-icon ui-icon-circle-triangle-w"></span>
</span>
<span data-bind='var:prodlistmeta(page_start_point); format:text; pretext:items ;'></span>
<span data-bind='var:prodlistmeta(page_end_point); format:text; pretext: - ;'></span>
<span data-bind='var:prodlistmeta(total_product_count); format:text; pretext: of ;'></span>
</div><!-- /.mpControls -->
</div><!-- /#mpControlSpec -->
<!--
used for store_cart.js
The cart viewer is basically just a container for two other elements that get translated.
Currently, the elements within that get translated have 'fixed' template ID's and element IDs.
cartTemplateContents is the id used for a list of the items in the cart, and it uses template id cartTemplateProductTemplate.
cartSummaryTotals is the id used for totals, subtotal, tax, shipping, etc. It uses template id cartSummaryTotalsTemplate.
fixed id's and templates was a decision that was made for usability. transferring around the two id's for each template was
sticky, so they're fixed. Makes it easier on the designer and the developer.