-
Notifications
You must be signed in to change notification settings - Fork 0
/
basket.php
289 lines (260 loc) · 16 KB
/
basket.php
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sneakerology | Basket</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="assets/icons/basket.ico">
<!-- Canvas Confetti script -->
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.3.2"></script>
<!-- Bootstrap HTML Link -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<!-- Jquery library for API usage -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Used for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
<header>
<!-- Adds the header -->
<?php require 'includes/header.php'; ?>
<!-- Discount API to handle checking of discount code -->
<?php require 'includes/API/discountcodeAPI.php' ?>
<!-- Function for handling API discount response -->
<script src = "scripts/discountfunction.js"></script>
<!-- Handles many functions related to the basket -->
<script src = "scripts/basket.js"></script>
</header>
<!-- Website message header -->
<div class="py-5 text-center">
<h2 class = "fw-bold display-5">Basket Summary</h2>
</div>
<!-- Cart information, holds all data of added products and more -->
<div class="container">
<div class="row g-5">
<div class="col-md-5 col-lg-4 order-md-last">
<h4 class="d-flex justify-content-between align-items-center mb-3">
<span class="text-primary">Your cart</span>
<span class="badge bg-primary rounded-pill" id="items-basket">0</span>
</h4>
<!-- Basket logic, this section handles adding and clearing items in the shopping basket -->
<?php
if (isset($_POST["submit"])) {
// If the "submit" button is pressed (product is added to the basket), append the new item to the basketItems session array
$_SESSION['basketItems'][] = [
'shoeName' => $_POST['shoeName'],
'retailPrice' => $_POST['retailPrice']
];
}
?>
<?php
if (isset($_POST['clearBasket'])) {
// If the "clearBasket" button is pressed (basket is cleared), clear the basketItems session array
$_SESSION['basketItems'] = [];
}
?>
<ul class="list-group mb-3" id="basket-list">
<!-- This unordered list will be populated dynamically using JavaScript to display the basket items -->
</ul>
<script>
// JavaScript function to display the basket items dynamically
function displayBasketItems() {
var basketList = document.getElementById('basket-list');
var basketItems = <?php echo json_encode($_SESSION['basketItems']) ?> || []; //Adds item name to the basket page, uses a session
var list = '';
if (basketItems.length > 0) {
// If there are items in the basket, loop through them and create list items for each
basketItems.forEach(function (item) {
var price = parseFloat(item.retailPrice);
if (!isNaN(price)) { // Check if price is a valid number
list += '<li class="list-group-item d-flex justify-content-between lh-sm">' +
'<div><h6 class="my-0">' + item.shoeName + '</h6></div>' +
'<span class="text-muted">' + '€' + price.toFixed(2) + '</span>' +
'</li>';
} else {
// Display an alert if the price for an item is invalid
window.alert('Invalid price for item:', item);
}
});
// Update the displayed item count
document.getElementById('items-basket').textContent = basketItems.length;
} else {
// Display a message if the basket is empty
list = '<li class="list-group-item">Your basket is currently empty</li>';
document.getElementById('items-basket').textContent = '0';
}
// Populate the basket list with the dynamically generated content
basketList.innerHTML = list;
}
// Call the displayBasketItems function when the DOM is loaded to show initial basket items
document.addEventListener('DOMContentLoaded', displayBasketItems);
</script>
<?php
// Calculate the total price
$totalPrice = 0;
if (isset($_SESSION['basketItems']) && is_array($_SESSION['basketItems'])) { //Checks if there is a session before incrementing price
foreach ($_SESSION['basketItems'] as $item) {
$totalPrice += floatval($item['retailPrice']); //Appends price
}
}
?>
<!-- Handles discount information -->
<form action="includes/API/discountcodeAPI.php" method="post" class="card p-2" id="discount-form"> <!-- Connects to the API for discounts -->
<div class="input-group">
<input type="text" class="form-control" id="discount-code" name="discount-code" placeholder="Sneakerology Discount Code" required>
<input type="submit" class="btn btn-outline-danger" value="Apply Discount">
</div>
<div class = "font-monospace text-center mt-2" id="message"></div> <!-- Display a message, either the coupon is successful or not -->
</form>
<!-- Clears the basket if clicked as well as the price -->
<div class="d-flex justify-content-between align-items-center mt-3">
<form action="basket.php" method="POST">
<button type="submit" name="clearBasket" class="btn btn-sm btn-outline-primary">
<i class="fas fa-trash-alt"></i> Clear all items in basket
</button>
</form>
<p class="mb-0 text-primary">Your total: <span class = "fw-bold"> €<?php echo number_format($totalPrice, 2); ?> </span></p>
</div>
<p class = "lead text-muted text-center mt-3"> Final price will be calculated at checkout </p>
</div>
<!-- Inline CSS for discount messages styles (error and success), only CSS style used -->
<style>
.success-message {
color: green;
}
.error-message {
color: red;
}
</style>
<!-- All information pertinent to billing information -->
<div class="col-md-7 col-lg-8">
<!-- Billing address information -->
<h4 class="mb-3 text-primary">Billing address</h4>
<div class="row g-3">
<div class="col-sm-6">
<label for="firstName" class="form-label">First name</label>
<input type="text" class="form-control" id="firstName" required>
</div>
<div class="col-sm-6">
<label for="lastName" class="form-label">Last name</label>
<input type="text" class="form-control" id="lastName" required>
</div>
<div class="col-12">
<label for="email" class="form-label">Email to receive updates (optional)</label>
<input type="email" class="form-control" id="email">
</div>
<div class="col-12">
<label for="address" class="form-label">Delivery Address</label>
<input type="text" class="form-control" id="address" required>
</div>
<!-- Choose a country or state -->
<div class="col-md-5">
<label for="country" class="form-label">Country</label>
<select class="form-select" id="country" required>
<option value="">Choose ...</option>
<option>Malta</option>
<option>Gozo</option>
</select>
</div>
<!-- All cities-->
<div class="col-md-4">
<label for="state" class="form-label">City</label>
<select class="form-select" id="city" required>
<option value="">Choose ...</option>
<option>Valletta</option>
<option>Sliema</option>
<option>St. Julian's</option>
<option>Mdina</option>
<option>Rabat</option>
<option>Qawra</option>
<option>Birgu (Vittoriosa)</option>
<option>Victoria</option>
<option>Xlendi</option>
<option>Xewkija</option>
<option>Zurrieq</option>
<option>Swieqi</option>
<option>Luqa</option>
<option>Zebbug (Gozo)</option>
<option>Marsaxlokk</option>
</select>
</div>
<div class="col-md-3">
<label for="zip" class="form-label">Zip</label>
<input type="text" class="form-control" id="zip" required>
</div>
</div>
<!-- Preferences checkbox -->
<div class="form-check my-5">
<input type="checkbox" class="form-check-input" id="same-address">
<label class="form-check-label" for="same-address">Shipping address is the same as my billing address</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="save-info">
<label class="form-check-label" for="save-info">Save this information for next time</label>
</div>
</div>
</div>
</div>
<div class="container text-center">
<hr class="bg-primary w-25 mx-auto"> <!-- Seperation with line -->
</div>
<!-- Payment details section -->
<h4 class="mb-3 text-center text-primary">Proceed with payment details</h4>
<div class="row d-flex justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-5">
<form id="paymentForm" action="basket.php" method="post" onsubmit="return validateForm()"> <!-- Javascript function used to check for validation-->
<div class="card rounded-3">
<div class="card-body p-4">
<p class="fw-bold mb-4">Add your card details:</p>
<div class="form-outline mb-4">
<input type="text" id="formControlLgXsd" class="form-control form-control-lg" placeholder="John Doe" required />
<label class="form-label" for="formControlLgXsd">Cardholder's Name</label>
</div>
<div class="row mb-4">
<div class="col-7">
<div class="form-outline">
<input type="password" id="formControlLgXM" class="form-control form-control-lg" placeholder="1234 5678 1234 5678" required />
<label class="form-label" for="formControlLgXM">Card Number</label>
</div>
</div>
<div class="col-3">
<div class="form-outline">
<input type="text" id="formControlLgExpk" class="form-control form-control-lg" placeholder="MM/YYYY" required />
<label class="form-label" for="formControlLgExpk">Expire</label>
</div>
</div>
<div class="col-2">
<div class="form-outline">
<input type="text" id="formControlLgcvv" class="form-control form-control-lg" placeholder="Cvv" required />
<label class="form-label" for="formControlLgcvv">Cvv</label>
</div>
</div>
</div>
</div>
</div>
<input type="submit" value="Proceed to checkout" class="btn btn-outline-primary btn-lrg w-100 mt-4" />
</form>
</div>
</div>
<!-- Friendly message telling user that all transactions are safe -->
<div class="bg-secondary py-3 mt-3">
<div class="container">
<div class="row">
<div class="col-md-5">
<p class="mb-0 fw-bold">All transactions are encrypted and safe.</p>
</div>
<div class="col-md-6 text-end">
<img src="https://img.icons8.com/color/48/000000/lock--v1.png" alt="Secure Icon" width="24" height="24" class="me-2">
<img src="https://img.icons8.com/color/48/000000/shield.png" alt="Shield Icon" width="24" height="24" class="me-2">
<img src="https://img.icons8.com/color/48/000000/security-checked.png" alt="Security Checked Icon" width="24" height="24">
</div>
</div>
</div>
</div>
<!-- Bootstrap Javascript Link -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<footer>
<?php require 'includes/footer.html'; ?>
</footer>
</body>
</html>