-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
112 lines (99 loc) · 6.62 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html><!-- (C) oekobox-online.eu 2016. Free for use with oekobox-online services -->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="app.css" rel="stylesheet" type="text/css"/>
<title>Start Page</title>
<style type="text/css">
#myticker3 , #myticker3 .oo-ticker-item, #myticker3 .oo-item-img , #myticker3 .oo-ticker-controls{
width: 100%;
display: block;
}
#myticker3 .oo-ticker-details {
display:none;
}
#myticker3 .oo-item-img {
background-repeat: repeat-x;
}
#myticker3 .oo-ticker-next, #myticker3 .oo-ticker-prev {
position: absolute;
top:20px;
}
#myticker3 .oo-ticker-prev {
left: 0;
}
#myticker3 .oo-ticker-next {
right: 0;
}
</style>
<!-- replace this call with an url like https://oekobox-online.eu/v3/shop/<shopname>api/client.js -->
<script src="shop.js" data-main="app.js"></script> <!-- app.js illustrates custom css effects - the mouse over on items -->
<!-- Anpassen wenn lokal!! Auf allen Seiten die Komponenten verwenden. z.B.
https://oekobox-online.eu/v3/shop/tagwerk/api/client.js oder
script src="http://oekobox-online.eu/v3/shop/bosshamerschhof/api/client.js"></script>
-->
<!--<script src="http://localhost:8081/v3/shop/hofmahlitzsch/api/client.js"></script>-->
<!-- System Id: <span class="oo-system-id">id</span> -->
</head>
<body>
<div class="header">
<div id="oo-search" data-oo-shop-page="shop.html"></div>
<div id="oo-status" data-oo-shop-page="shop.html" data-oo-logon-page="logon.html" data-oo-profile-page="profile.html" data-oo-date-page="date.html" data-oo-cart-page="cart.html"></div>
</div>
<h2>Startseite <a href="index1.html">Alternative 1</a> <a href="index2.html">Alternative 2</a> </h2>
<h1>NoDesign@<span class="oo-system-title"></span></h1>
<div id="oo-loadingbar" ></div>
<div id="oo-flash" data-oo-cart-page="cart.html" ></div>
<div id="pagecontent">
<div id="oo-navi" data-oo-shop-page="shop.html"></div>
<!-- <div class="oo-content" data-oo-content="article:homepagetip"></div> -->
<div id="myticker3" class="oo-ticker " data-oo-ticker-size="1" data-oo-ticker-data="Auto" data-oo-ticker-speed="15" data-oo-ticker-empty=".myticker2-empty" data-oo-shop-page="shop.html"></div>
<div class="hints">
Hinweise:
<ul>
<li>Dies ist ein Beispiel-Seiten-Satz, der einen kompletten Shop für den PCG darstellt.</li>
<li>Dies könnte die Startseite der WebSite sein. Zur Illustration sind nicht alle Seiten komplett gleich. Diese Seiten können unter
<tt>https://oekobox-online.de/v3/demo/<shopname></tt> (als zip) oder via <a href="https://github.com/alias/shopdemo">GitHub</a>
heruntergeladen werden.
<br>
Auf den Seiten (ca. 10) finden sich Hinweise zu den dort wichtigsten Komponenten (insgesamt 12).
<br>
<a href="nodesign_component_connections.gif">Hier</a> ist das Zusammenspiel der Komponenten, und <a href="nodesign_page_flow.gif">hier</a> das der Demo-Seiten visualisiert.
</li>
<li>Doku der Komponenten und des CSS unter <a href="https://oekobox-online.de/news?a=js">Ökobox-Online</a></li>
<li>Insgesamt wird versucht, hier so wenig wie möglich Code (HTML und CSS) zu verwenden, um dem anpassenden Designer soviel freie Hand wie möglich zulassen.
Dadurch ist der Shop hier nicht so hübsch wie er sein kann ;-)</li>
<li>Komponenten sind zur Hervorhebung gestrichelt umrandet.</li>
<li> English beschriftete Links funktionieren nicht, die Funktionalität ist gerade im Aufbau.</li>
<li>Manche Komponenten können Elemente überall in der Seite Steuern, hier der Warenkorbwert von der Status-Komponente: <span class="oo-status-cart-value">0</span></li>
<li><a href="#" class="oo-system-homeurl">Hier</a> gehts zur eingestellten Startseite des Systems (also zum bisherigen Shop). Diese Seite wird auch angesteuert,
wenn der Browser nicht mit der Technologie des Shops klarkommt.</li>
<li>Im Admin-Bereich hinterlegte <a href="" class="oo-system-tclink">AGB</a>-Seite.</li>
</ul>
Ticker-Komponente (oben, unten)
<ul>
<li>Dient als Ticker und kann auch als Teaser (also für einen einzelnen Artikel) konfiguriert werden</li>
<li>Es kann eine Ebene aus dem Navigationsbaum als Daztenquelle angegeben werden. Spezial-Menüs aus der Menüsteuerung des PCG lauten z.B. "Navigation:123".
"Auto" wählt zufällige Daten.</li>
</ul>
Navigations-Komponente (oben)
<ul>
<li>Bildet den Navigationsbaum ab, wie er im PCG eingestellt wurde. Sofern diese (neue) Einstellung im PCG noch nicht verwendet wird, wird ein an den
bisherigen Shop angelehnter Standard verwendet.</li>
<li>Im Gegensatz zur Shop-Seite ist der private Teil der Navigation (Merkliste, alte Bestellungen) hier eingeschaltet.</li>
</ul>
</div>
<div id="mytickers">
<div id="myticker1" class="oo-ticker oo-clearfix" data-oo-ticker-size="3" data-oo-ticker-withcart="true" data-oo-ticker-data="Auto" data-oo-ticker-speed="45" data-oo-ticker-empty=".myticker1-empty" data-oo-shop-page="shop.html"></div>
<div id="myticker2" class="oo-ticker oo-clearfix" data-oo-ticker-size="1" data-oo-ticker-data="Auto" data-oo-ticker-speed="20" data-oo-ticker-empty=".myticker2-empty" data-oo-shop-page="shop.html"></div>
<div class="myticker1-empty">
Ticker1 zeigt keine Daten. Mach was draus...
</div>
<div class="myticker2-empty">
Ticker2 zeigt keine Daten. Mach was draus...
</div>
</div>
</div>
</body>
</html>