shopdemo/profile.html at master · alias/shopdemo · GitHub

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
<!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>Profile Page</title>
        <script>
            // helper to fill some text data
            function loadTestData() {
                var data = [
                    ["firstname", "Lattika"], ["name", "O'Broccoli"],
                    ["email", "latty@broccoli-family.in"], ["emailCHECK", "latty@broccoli-family.in"],
                    ["passwd", "supermaggy"], ["passwdCHECK", "supermaggy"],
                    ["dzip", "85354"], ["dcity", "Freising"],["dstreet", "Ganzenmüllerstr 14a"],
                    ["phone", "0049 351 27359579"], ["placenote", "look for a cool dry place on the roof please"],
                    ["IBAN", "DE12500105170648489890"]
                ];
                for (var i = 0; i < data.length; i++) {
                    try {
                        document.getElementById("oo-profile-" + data[i][0]).value = data[i][1];
                    } catch (ex) {} // some field might not exist, depending on config
                }
                document.getElementById("oo-profile-pay-1").checked = true;
                return false;
            }
        </script>
        <!-- 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 -->
    </head>
    <body>
        <div class="header">

            <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>Profilseite</h2>
        <h1>NoDesign@<span class="oo-system-title"></span></h1>
        <div id="oo-flash" data-oo-cart-page="cart.html"></div>
        <div id="pagecontent">
            <a href="shop.html" title="Beispiel-Link als alternative zur Navi-Komponente hier" style="margin: 5px; display: inline-block">Weiter Shoppen...</a>
            <a href="index.html" title="Beispiel-Link als alternative zur Navi-Komponente hier" style="margin: 5px; display: inline-block">zur Startseite...</a>
            <div id="oo-profile" data-oo-profile-tabs-strict="true" data-oo-profile-tabs="true" data-oo-shop-page="shop.html" data-oo-logon-page="logon.html" data-oo-date-page="date.html" data-oo-cart-page="cart.html"></div>

            <div class="hints">
                Hinweise zur Profil-Komponente
                (<a class="oo-state-located testinghelp" href="#" onclick="loadTestData();" id="">Formular mit Testdaten füllen</a>)
                <ul>
                    <li>Die Komponente implementiert 1. die Tourauswahl (im Status anon), 2. die Neuanmeldung (im Status located) sowie 3. das Einstellen von Kunden-Daten (im Status auth)
                        Aktueller Status:
                        <b>
                            <span class="oo-state-subscriber">Angemelder Kunde mit Abo</span>
                            <span class="oo-state-auth">Angemelder Kunde (Hey! Du hast noch kein Abo!)</span>
                            <span class="oo-state-located">Besucher mit Tourzuweisung</span>
                            <span class="oo-state-anon">unbekannter Besucher</span>
                        </b>
                    </li>
                    <li>Nach der Anmeldung muss zu einer anderen Seite verzweigt werden; deshalb ist die Angabe von <i>data-oo-shop-page="shop.html"</i> zwingend.
                    <li> Die Komponente kann auch auf mehreren Seiten eingebaut werden; typischerweise braucht man sie da nur ein einem bestimmten Status. Dies kann durch
                    Wrappen in einem div.oo-state-XXX erfolgen. Die data-Attribute zur Konfiguration sollten dann expizit angegeben werden (und nicht zentral vom app.js verwendet werden) </li>
                    <li>Zur Adressabfrage (bei der Neuanmeldung) wird hier der Computer "befragt" - daher die Abfrage des Browser, ob die aktuelle ausgegeben werden darf. </li>
                    <li>Die (richtige) Zuordnung zu Neukunden erfordert Einstellungen im PCG (an den Touren) und im Admin-Bereich des Shops (für den Zuordnungs-Algorhitmus). </li>
                </ul>
                Noch zu bauen:
                <ul>
                    <li>Abwahl</li>
                    <li>Email Exists-Validierung bei Neukundenanmeldung und Änderung</li>
                    <li>einige stärkere Validierungen</li>
                    <li>Lieferadresse (inkl. backend)</li>
                    <li>Erneute Address-Änderungen im located oder auth state müssen erneut durch die Tourfindung laufen </li>
                    <li>Korrektur Änderungs-Email, mit Zeitversatz</li>
                </ul>
            </div>


        </div>
        <div id="oo-chat"></div>
    </body>
</html>