JavaScriptPayPalBasket/example.html at master · bamma/JavaScriptPayPalBasket · 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
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
<!DOCTYPE html>
<html>
<head>
<title>Testing JavaScript PayPal Basket</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style/style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="js/model/Basket.js"></script>
<script type="text/javascript" src="js/model/CartItem.js"></script>
<script type="text/javascript" src="js/model/SelectOption.js"></script>
<script type="text/javascript" src="js/model/Price.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
</head>

<body>
    <h1>Implementation Test for JavaScript PayPal Basket</h1>
<div id="container">


<div class="example">
    <h2>Single select option setting</h2>
    <p>This example we sell Apples</p>
    <ul>
        <li>Red apples for 60 each</li>
        <li>+5 Red apples 50 each</li>
        <li>Green apples 50 each</li>
    </ul>
<form id="apple-item" class="cart-item">
    <select name="option">
        <option value="red-apple">Red</option>
        <option value="green-apple">Green</option>
    </select>
    Amount:	<input type="number" name="quantity" value="1" />
    <input type="submit" name="summit" value="Add to cart" />
</form>
<script>
document.getElementById('apple-item').addProduct("Apple",{
    prices:[
    {
        price: {
            value:60,
            options:["red-apple"]
        }
    },
    {
        price: {
            value:50,
            options:["red-apple"],
            quantity:5
        }
    },
      {
        price: {
            value:60,
            options:["green-apple"]
        }
      }
    ]
});
</script>
</div>
<div class="example">


    <h2>Item with no options</h2>
    <p>This example we sell bananas</p>
     <ul>
        <li>1 Banana 100 each</li>
        <li>+5 Bananas 90 each</li>
        <li>+10 Bananas 80 each</li>
    </ul>
    <form id="banana-item">
        Amount:	<input type="number" name="quantity" value="1" />
        <input type="submit" value="Add to cart" />
    </form>
    <script>
        document.getElementById('banana-item').addProduct("Banana",{
            prices:[
            {
                price: {
                    value:100,
                }
            },
            {
                price: {
                    value:90,
                    quantity:5
                }
            },
            {
                price: {
                    value:60,
                    quantity:10
                }
            }
            ]
        });
    </script>
</div>
<div class="example">
    <h2>Fixed price example</h2>
    <p>Selling oranges</p>
    <ul>
        <li>Orange 10 each</li>
    </ul>
<form id="orange-item">
    <button type="submit">Add 1</button></form>
<script>
document.getElementById('orange-item').addProduct("Orange",10);
</script>
</div>
</div>
<div id="container">
<div class="basket">
    <h2>This is the Basket area</h2>
    <p>It will dynamically generate based on what is in the local storage</p>
    <div id="cartContainer">

    </div>
    <button id="checkout-button" >Checkout</button>
     <script>
      document.getElementById('cartContainer').basket("DKK"); // optional GBP is default
      document.getElementById("checkout-button").checkout({
        email : {user : 'bamma1985', host : 'gmail.com'},
        locale  : "DK", // optional GB is default
        emptyBasketString : "No items in basket", //optional "basket is empty..." is default
        customAction : function(){ //optional if not set is will only execute checkout
            alert("Do stuff before checkout");
            checkout();
        }
      });
    </script>
</div>
<div class="description">
    <h2>Explaination</h2>
    <p>Prices are set within the hidden inputs, so price, then system no its a price value, following price with _quantity_5 means that the value price will be from 5 quantity and up, if not anything higher. The option_[value of option] tells the price on the options themself, all this can be combined into several price points on a single item.</p>
</div>
</div>
</body>
</html>