-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcheckout.html
208 lines (180 loc) · 8.24 KB
/
checkout.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Khloris</title>
<link rel="stylesheet" href="checkout_.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
/>
</head>
<body>
<header>
<input type="checkbox" name="" id="toggler" />
<label for="toggler" class="fas fa-bars"></label>
<a href="#" class="logo">Khloris<span>.</span></a>
<nav class="navbar">
<a href="#home">Home</a>
<a href="#Customization">Customization</a>
<a href="flowerpage.html">Flowers</a>
<a href="#Occassions">Occassions</a>
</nav>
<div class="icons">
<a href="" class="fas fa-shopping-cart"></a>
<a href="logout.php" class="fa-solid fa-right-from-bracket" onclick="return confirmLogout()"></a>
</div>
</header>
<section class="checkout-section">
<div class="checkout-container">
<h1 class="titlecheckout">Checkout</h1>
<form id="checkout-details" action="" method="POST">
<div class="checkout-left">
<div class="delivery-options">
<h2 class="header-delivery">Delivery Option</h2>
<label class="option">
<input type="radio" name="deliveryMethod" value="delivery" required>
<span><i class="fa-solid fa-truck"></i> Delivery</span>
</label>
<label class="option">
<input type="radio" name="deliveryMethod" value="pickup" required>
<span><i class="fa-solid fa-box"></i> Pickup</span>
</label>
</div>
<div class="delivery-address">
<h2 class="header-address">Delivery Address</h2>
<label>
<input type="text" name="address" id="address" placeholder="Enter Your Address.." required>
</label>
</div>
<div class="delivery-date">
<h2 class="header-date">Delivery Date</h2>
<label>
<input type="date" name="date" id="date" required>
</label>
</div>
<div class="contacts">
<h2 class="header-contacts">Contacts</h2>
<label>
<input type="email" name="email" id="email" placeholder="Enter Your Email.." required>
</label>
<label>
<input type="text" name="phone" id="phone-num" placeholder="Phone number.." required>
</label>
</div>
</div>
<div class="checkout-right">
<div class="order-summary" id="order-summary">
<div class="header-os">
<h3 class="header-order-summary">Order Summary</h3>
</div>
<div class="orders" id="orders_">
<!-- Add dynamic order details here -->
</div>
<div class="totals" id="totals"></div>
<div class="bttn-co">
<button type="submit" id="checkoutBtn">Checkout Now</button>
</div>
</div>
</div>
</form>
</div>
</div>
</section>
<footer class="footer">
<div class="ftrcontainer">
<div class="ftrrow">
<div class="footer-col">
<h4 class="logofooter">Khloris<span>.</span></h4>
<ul class="ftrul">
<p>Follow us in Social Media!</p>
<div class="social-links">
<a href="#" class="fa-brands fa-square-facebook"></a>
<a href="#" class="fa-brands fa-square-instagram"></a>
</div>
</ul>
</div>
<div class="footer-col">
<h4>Information</h4>
<ul class="ftrul">
<p>Flower Shop in Pandi,Bulacan <br />Delivery only in Pandi</p>
<li><a href="#">Privacy policy</a></li>
<li><a href="#">Payment Instruction</a></li>
<li><a href="#">Terms and conditions</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Contact us</h4>
<ul class="ftrul">
<p><span>Address:</span>Pandi, Bulacan</p>
<p><span>Mobile:</span>(+63) 0903-2301484/09299750331</p>
<p><span>Telephone:</span>(632) 8881-4173</p>
<p><span>Email:</span>[email protected]</p>
</ul>
</div>
<div class="footer-col">
<h4>Contact Services</h4>
<ul class="ftrul">
<li><a href="#">Contact us</a></li>
<li><a href="#">My account</a></li>
<li><a href="#">Order History</a></li>
</ul>
</div>
</div>
</div>
</footer>
<script>
// On page load, retrieve the cart data from local storage
document.addEventListener("DOMContentLoaded", function() {
const orderSummary = JSON.parse(localStorage.getItem("orderSummary")) || [];
const summaryContainer = document.getElementById("orders_");
let totalPrice = 0;
orderSummary.forEach(item => {
const itemElement = document.createElement("div");
itemElement.classList.add("order-item");
const itemTotal = item.price * item.quantity; // Calculate total for each item
totalPrice += itemTotal;
itemElement.innerHTML = `
<img src="${item.image}" alt="${item.name}" class="order-img">
<p id=name-product >${item.name}</p>
<p> x${item.quantity}</p>
<p> P ${(item.price * item.quantity).toFixed(2)}</p>
<p> P ${(itemTotal).toFixed(2)}</p>
`;
summaryContainer.appendChild(itemElement);
});
const totalElement = document.getElementById("totals");
totalElement.classList.add("total-price");
totalElement.innerHTML = `<h3>Total: P ${totalPrice.toFixed(2)}</h3>`;
totalElement.appendChild(totalElement); // Append the total price to the order summary
});
// Enable checkout button based on form inputs
function enableCheckoutButton() {
const emailField = document.getElementById('email');
const phoneField = document.getElementById('phone-num');
const checkoutBtn = document.getElementById('checkoutBtn');
const deliveryMethods = document.querySelectorAll('input[name="deliveryMethod"]:checked').length;
if (emailField.value !== "" && phoneField.value !== "" && deliveryMethods > 0) {
checkoutBtn.disabled = false; // Enable the button
checkoutBtn.style.opacity = "1"; // Restore full opacity
checkoutBtn.style.cursor = "pointer"; // Change the cursor back to pointer
} else {
checkoutBtn.disabled = true; // Keep it disabled if conditions are not met
checkoutBtn.style.opacity = "0.6"; // Keep it grayed out
checkoutBtn.style.cursor = "not-allowed"; // Keep the 'not-allowed' cursor
}
}
document.getElementById('email').addEventListener('input', enableCheckoutButton);
document.getElementById('phone-num').addEventListener('input', enableCheckoutButton);
document.querySelectorAll('input[name="deliveryMethod"]').forEach((radio) => {
radio.addEventListener('change', enableCheckoutButton);
});
document.getElementById("checkoutBtn").addEventListener("click", function(event) {
event.preventDefault(); // Prevent form submission for now
alert("Order successfully placed! Thank you for shopping with us.");
document.getElementById("checkout-details").submit();
});
</script>
</body>
</html>