webupdate
This commit is contained in:
Local Server
791
website/public/checkout.html
Normal file
791
website/public/checkout.html
Normal file
@@ -0,0 +1,791 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Checkout - Sky Art Shop" />
|
||||
<title>Checkout - Sky Art Shop</title>
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<!-- Icons -->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
|
||||
/>
|
||||
|
||||
<!-- Modern Theme CSS -->
|
||||
<link rel="stylesheet" href="/assets/css/modern-theme.css?v=20260118drawer" />
|
||||
<link rel="stylesheet" href="/assets/css/mobile-fixes.css?v=20260118c" />
|
||||
|
||||
<style>
|
||||
.checkout-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: var(--spacing-xl) var(--spacing-lg);
|
||||
}
|
||||
|
||||
.checkout-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 400px;
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.checkout-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.checkout-section {
|
||||
background: var(--bg-white);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-xl);
|
||||
box-shadow: var(--shadow-sm);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.checkout-section h2 {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.checkout-section h2 i {
|
||||
color: var(--primary-pink);
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.form-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 1rem;
|
||||
transition: var(--transition-fast);
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-pink);
|
||||
box-shadow: 0 0 0 3px var(--primary-pink-light);
|
||||
}
|
||||
|
||||
.order-summary {
|
||||
position: sticky;
|
||||
top: 100px;
|
||||
}
|
||||
|
||||
.summary-items {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.summary-item {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
padding: var(--spacing-sm) 0;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.summary-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.summary-item-image {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: var(--radius-md);
|
||||
object-fit: cover;
|
||||
background: var(--bg-light);
|
||||
}
|
||||
|
||||
.summary-item-details {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.summary-item-name {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.summary-item-variant {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.summary-item-qty {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.summary-item-price {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.summary-totals {
|
||||
border-top: 2px solid var(--border-light);
|
||||
padding-top: var(--spacing-md);
|
||||
}
|
||||
|
||||
.summary-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.summary-row.total {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-top: var(--spacing-md);
|
||||
padding-top: var(--spacing-md);
|
||||
border-top: 2px solid var(--text-primary);
|
||||
}
|
||||
|
||||
.checkout-btn {
|
||||
width: 100%;
|
||||
padding: var(--spacing-md);
|
||||
font-size: 1.1rem;
|
||||
margin-top: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.empty-cart-message {
|
||||
text-align: center;
|
||||
padding: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.empty-cart-message i {
|
||||
font-size: 4rem;
|
||||
color: var(--text-light);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.empty-cart-message h3 {
|
||||
margin-bottom: var(--spacing-md);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.payment-methods {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.payment-method {
|
||||
flex: 1;
|
||||
min-width: 150px;
|
||||
padding: var(--spacing-md);
|
||||
border: 2px solid var(--border-light);
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
transition: var(--transition-fast);
|
||||
}
|
||||
|
||||
.payment-method:hover,
|
||||
.payment-method.active {
|
||||
border-color: var(--primary-pink);
|
||||
background: var(--primary-pink-light);
|
||||
}
|
||||
|
||||
.payment-method i {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.secure-notice {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-md);
|
||||
background: var(--bg-light);
|
||||
border-radius: var(--radius-md);
|
||||
margin-top: var(--spacing-lg);
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.secure-notice i {
|
||||
color: var(--success);
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Sticky Banner Wrapper -->
|
||||
<div class="sticky-banner-wrapper">
|
||||
<!-- Announcement Bar -->
|
||||
<div class="announcement-bar">
|
||||
<div class="container">
|
||||
<span id="announcement-text"
|
||||
>🌸 Free shipping on orders over $50! Use code: SPRING2026</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar" id="navbar">
|
||||
<div class="container">
|
||||
<a href="/" class="nav-logo">
|
||||
<span class="logo-icon">✿</span>
|
||||
<span>Sky Art Shop</span>
|
||||
</a>
|
||||
|
||||
<button
|
||||
class="mobile-menu-btn"
|
||||
aria-label="Toggle menu"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i class="bi bi-list"></i>
|
||||
</button>
|
||||
|
||||
<div class="nav-menu">
|
||||
<ul class="nav-links" id="navLinks">
|
||||
<!-- Menu items will be loaded dynamically -->
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-actions">
|
||||
<a href="#" class="nav-action" id="searchToggle" title="Search">
|
||||
<i class="bi bi-search"></i>
|
||||
</a>
|
||||
<a href="#" class="nav-action wishlist-toggle" title="Wishlist">
|
||||
<i class="bi bi-heart"></i>
|
||||
<span class="wishlist-badge">0</span>
|
||||
</a>
|
||||
<a href="#" class="nav-action cart-toggle" title="Cart">
|
||||
<i class="bi bi-bag"></i>
|
||||
<span class="cart-badge">0</span>
|
||||
</a>
|
||||
<a href="#" class="nav-action" id="userMenuToggle" title="Account">
|
||||
<i class="bi bi-person"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Search Overlay -->
|
||||
<div class="search-overlay">
|
||||
<div class="search-container">
|
||||
<form class="search-form" action="/shop" method="get">
|
||||
<input
|
||||
type="search"
|
||||
name="search"
|
||||
placeholder="Search for products..."
|
||||
class="search-input"
|
||||
id="searchInput"
|
||||
/>
|
||||
<button type="submit" class="search-submit">
|
||||
<i class="bi bi-search"></i>
|
||||
</button>
|
||||
</form>
|
||||
<button class="search-close"><i class="bi bi-x"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Page Header -->
|
||||
<section class="page-header" style="padding: var(--spacing-xl) 0">
|
||||
<div class="container text-center">
|
||||
<h1>Checkout</h1>
|
||||
<p class="section-subtitle">Complete your order</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Checkout Content -->
|
||||
<main class="checkout-container">
|
||||
<div id="checkoutContent">
|
||||
<!-- Will be populated by JavaScript based on cart contents -->
|
||||
<div class="checkout-grid">
|
||||
<!-- Left Column - Forms -->
|
||||
<div class="checkout-forms">
|
||||
<!-- Contact Information -->
|
||||
<div class="checkout-section">
|
||||
<h2><i class="bi bi-person-circle"></i> Contact Information</h2>
|
||||
<div class="form-group">
|
||||
<label for="email">Email Address</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
placeholder="your@email.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="firstName">First Name</label>
|
||||
<input
|
||||
type="text"
|
||||
id="firstName"
|
||||
placeholder="John"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="lastName">Last Name</label>
|
||||
<input type="text" id="lastName" placeholder="Doe" required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="phone">Phone Number</label>
|
||||
<input type="tel" id="phone" placeholder="+1 (555) 123-4567" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Shipping Address -->
|
||||
<div class="checkout-section">
|
||||
<h2><i class="bi bi-truck"></i> Shipping Address</h2>
|
||||
<div class="form-group">
|
||||
<label for="address">Street Address</label>
|
||||
<input
|
||||
type="text"
|
||||
id="address"
|
||||
placeholder="123 Creative Lane"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="address2">Apartment, suite, etc. (optional)</label>
|
||||
<input type="text" id="address2" placeholder="Apt 4B" />
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="city">City</label>
|
||||
<input
|
||||
type="text"
|
||||
id="city"
|
||||
placeholder="New York"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="state">State/Province</label>
|
||||
<input type="text" id="state" placeholder="NY" required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="zip">ZIP/Postal Code</label>
|
||||
<input type="text" id="zip" placeholder="10001" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="country">Country</label>
|
||||
<select id="country" required>
|
||||
<option value="US">United States</option>
|
||||
<option value="CA">Canada</option>
|
||||
<option value="GB">United Kingdom</option>
|
||||
<option value="AU">Australia</option>
|
||||
<option value="DE">Germany</option>
|
||||
<option value="FR">France</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Payment Method -->
|
||||
<div class="checkout-section">
|
||||
<h2><i class="bi bi-credit-card"></i> Payment Method</h2>
|
||||
<div class="payment-methods">
|
||||
<div class="payment-method active" data-method="card">
|
||||
<i class="bi bi-credit-card-2-front"></i>
|
||||
<span>Credit Card</span>
|
||||
</div>
|
||||
<div class="payment-method" data-method="paypal">
|
||||
<i class="bi bi-paypal"></i>
|
||||
<span>PayPal</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="cardPaymentForm" style="margin-top: var(--spacing-lg)">
|
||||
<div class="form-group">
|
||||
<label for="cardNumber">Card Number</label>
|
||||
<input
|
||||
type="text"
|
||||
id="cardNumber"
|
||||
placeholder="1234 5678 9012 3456"
|
||||
maxlength="19"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="expiry">Expiry Date</label>
|
||||
<input
|
||||
type="text"
|
||||
id="expiry"
|
||||
placeholder="MM/YY"
|
||||
maxlength="5"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="cvv">CVV</label>
|
||||
<input
|
||||
type="text"
|
||||
id="cvv"
|
||||
placeholder="123"
|
||||
maxlength="4"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="cardName">Name on Card</label>
|
||||
<input type="text" id="cardName" placeholder="John Doe" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="secure-notice">
|
||||
<i class="bi bi-shield-lock-fill"></i>
|
||||
<span
|
||||
>Your payment information is encrypted and secure. We never
|
||||
store your full card details.</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column - Order Summary -->
|
||||
<div class="order-summary-wrapper">
|
||||
<div class="checkout-section order-summary">
|
||||
<h2><i class="bi bi-bag-check"></i> Order Summary</h2>
|
||||
<div class="summary-items" id="summaryItems">
|
||||
<!-- Items will be populated by JavaScript -->
|
||||
</div>
|
||||
<div class="summary-totals">
|
||||
<div class="summary-row">
|
||||
<span>Subtotal</span>
|
||||
<span id="summarySubtotal">$0.00</span>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<span>Shipping</span>
|
||||
<span id="summaryShipping">Calculated at next step</span>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<span>Tax</span>
|
||||
<span id="summaryTax">$0.00</span>
|
||||
</div>
|
||||
<div class="summary-row total">
|
||||
<span>Total</span>
|
||||
<span id="summaryTotal">$0.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-primary checkout-btn"
|
||||
id="placeOrderBtn"
|
||||
disabled
|
||||
>
|
||||
<i class="bi bi-lock-fill"></i> Place Order
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty Cart State -->
|
||||
<div
|
||||
class="empty-cart-message"
|
||||
id="emptyCartMessage"
|
||||
style="display: none"
|
||||
>
|
||||
<i class="bi bi-cart-x"></i>
|
||||
<h3>Your cart is empty</h3>
|
||||
<p>Add some items to your cart before checking out.</p>
|
||||
<a
|
||||
href="/shop"
|
||||
class="btn btn-primary"
|
||||
style="margin-top: var(--spacing-md)"
|
||||
>
|
||||
<i class="bi bi-arrow-left"></i> Continue Shopping
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
<div class="footer-column">
|
||||
<h4>Sky Art Shop</h4>
|
||||
<p>
|
||||
Your creative journey starts here. Quality supplies for every
|
||||
artist.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="footer-column">
|
||||
<h4>Quick Links</h4>
|
||||
<ul class="footer-links">
|
||||
<li><a href="/shop">Shop</a></li>
|
||||
<li><a href="/about">About Us</a></li>
|
||||
<li><a href="/contact">Contact</a></li>
|
||||
<li><a href="/faq">FAQ</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-column">
|
||||
<h4>Customer Service</h4>
|
||||
<ul class="footer-links">
|
||||
<li><a href="/shipping-info">Shipping Info</a></li>
|
||||
<li><a href="/returns">Returns</a></li>
|
||||
<li><a href="/privacy">Privacy Policy</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-column">
|
||||
<h4>Contact Us</h4>
|
||||
<ul class="footer-links">
|
||||
<li><i class="bi bi-envelope"></i> hello@skyartshop.com</li>
|
||||
<li><i class="bi bi-telephone"></i> (555) 123-4567</li>
|
||||
<li><i class="bi bi-geo-alt"></i> 123 Creative Lane</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
<p>© 2026 Sky Art Shop. All rights reserved.</p>
|
||||
<p>
|
||||
Made with
|
||||
<i class="bi bi-heart-fill" style="color: var(--primary-pink)"></i>
|
||||
for creative souls
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Cart Drawer -->
|
||||
<div class="cart-overlay"></div>
|
||||
<div class="cart-drawer">
|
||||
<div class="cart-header">
|
||||
<h3>Shopping Cart</h3>
|
||||
<button class="cart-close"><i class="bi bi-x"></i></button>
|
||||
</div>
|
||||
<div class="cart-items"></div>
|
||||
<div class="cart-footer">
|
||||
<div class="cart-total">
|
||||
<span>Total:</span>
|
||||
<span class="cart-total-amount">$0.00</span>
|
||||
</div>
|
||||
<a href="/checkout" class="btn btn-primary cart-checkout-btn"
|
||||
>Checkout</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Wishlist Drawer -->
|
||||
<div class="wishlist-overlay"></div>
|
||||
<div class="wishlist-drawer">
|
||||
<div class="wishlist-header">
|
||||
<h3><i class="bi bi-heart"></i> My Wishlist</h3>
|
||||
<button class="wishlist-close"><i class="bi bi-x"></i></button>
|
||||
</div>
|
||||
<div class="wishlist-items"></div>
|
||||
<div class="wishlist-footer">
|
||||
<a href="/shop" class="btn btn-outline">Continue Shopping</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="/assets/js/modern-theme.js?v=20260118c"></script>
|
||||
<script src="/assets/js/customer-auth.js"></script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
loadCheckoutPage();
|
||||
setupPaymentMethods();
|
||||
setupFormValidation();
|
||||
});
|
||||
|
||||
function loadCheckoutPage() {
|
||||
const cart = JSON.parse(localStorage.getItem("cart") || "[]");
|
||||
const checkoutGrid = document.querySelector(".checkout-grid");
|
||||
const emptyMessage = document.getElementById("emptyCartMessage");
|
||||
|
||||
if (cart.length === 0) {
|
||||
checkoutGrid.style.display = "none";
|
||||
emptyMessage.style.display = "block";
|
||||
return;
|
||||
}
|
||||
|
||||
checkoutGrid.style.display = "grid";
|
||||
emptyMessage.style.display = "none";
|
||||
|
||||
renderOrderSummary(cart);
|
||||
}
|
||||
|
||||
function renderOrderSummary(cart) {
|
||||
const summaryItems = document.getElementById("summaryItems");
|
||||
let subtotal = 0;
|
||||
|
||||
const itemsHtml = cart
|
||||
.map((item) => {
|
||||
const itemTotal = parseFloat(item.price) * item.quantity;
|
||||
subtotal += itemTotal;
|
||||
|
||||
return `
|
||||
<div class="summary-item">
|
||||
<img
|
||||
src="${
|
||||
item.image || "/assets/images/products/placeholder.jpg"
|
||||
}"
|
||||
alt="${item.name}"
|
||||
class="summary-item-image"
|
||||
onerror="this.src='/assets/images/products/placeholder.jpg'"
|
||||
/>
|
||||
<div class="summary-item-details">
|
||||
<div class="summary-item-name">${item.name}</div>
|
||||
${
|
||||
item.variant
|
||||
? `<div class="summary-item-variant">${item.variant}</div>`
|
||||
: ""
|
||||
}
|
||||
<div class="summary-item-qty">Qty: ${item.quantity}</div>
|
||||
</div>
|
||||
<div class="summary-item-price">$${itemTotal.toFixed(2)}</div>
|
||||
</div>
|
||||
`;
|
||||
})
|
||||
.join("");
|
||||
|
||||
summaryItems.innerHTML = itemsHtml;
|
||||
|
||||
// Calculate totals
|
||||
const shipping = subtotal >= 50 ? 0 : 5.99;
|
||||
const tax = subtotal * 0.08; // 8% tax
|
||||
const total = subtotal + shipping + tax;
|
||||
|
||||
document.getElementById(
|
||||
"summarySubtotal"
|
||||
).textContent = `$${subtotal.toFixed(2)}`;
|
||||
document.getElementById("summaryShipping").textContent =
|
||||
shipping === 0 ? "FREE" : `$${shipping.toFixed(2)}`;
|
||||
document.getElementById("summaryTax").textContent = `$${tax.toFixed(
|
||||
2
|
||||
)}`;
|
||||
document.getElementById("summaryTotal").textContent = `$${total.toFixed(
|
||||
2
|
||||
)}`;
|
||||
|
||||
// Enable place order button
|
||||
document.getElementById("placeOrderBtn").disabled = false;
|
||||
}
|
||||
|
||||
function setupPaymentMethods() {
|
||||
const paymentMethods = document.querySelectorAll(".payment-method");
|
||||
const cardForm = document.getElementById("cardPaymentForm");
|
||||
|
||||
paymentMethods.forEach((method) => {
|
||||
method.addEventListener("click", () => {
|
||||
paymentMethods.forEach((m) => m.classList.remove("active"));
|
||||
method.classList.add("active");
|
||||
|
||||
if (method.dataset.method === "card") {
|
||||
cardForm.style.display = "block";
|
||||
} else {
|
||||
cardForm.style.display = "none";
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function setupFormValidation() {
|
||||
const placeOrderBtn = document.getElementById("placeOrderBtn");
|
||||
|
||||
placeOrderBtn.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Basic validation
|
||||
const requiredFields = [
|
||||
"email",
|
||||
"firstName",
|
||||
"lastName",
|
||||
"address",
|
||||
"city",
|
||||
"state",
|
||||
"zip",
|
||||
];
|
||||
let isValid = true;
|
||||
|
||||
requiredFields.forEach((fieldId) => {
|
||||
const field = document.getElementById(fieldId);
|
||||
if (!field.value.trim()) {
|
||||
field.style.borderColor = "var(--error)";
|
||||
isValid = false;
|
||||
} else {
|
||||
field.style.borderColor = "";
|
||||
}
|
||||
});
|
||||
|
||||
if (!isValid) {
|
||||
alert("Please fill in all required fields.");
|
||||
return;
|
||||
}
|
||||
|
||||
// Show success message (in a real app, this would submit to the server)
|
||||
alert(
|
||||
"Thank you for your order! This is a demo - no actual order was placed."
|
||||
);
|
||||
|
||||
// Clear cart
|
||||
localStorage.removeItem("cart");
|
||||
window.location.href = "/";
|
||||
});
|
||||
|
||||
// Format card number with spaces
|
||||
const cardNumberInput = document.getElementById("cardNumber");
|
||||
cardNumberInput.addEventListener("input", (e) => {
|
||||
let value = e.target.value.replace(/\s/g, "").replace(/\D/g, "");
|
||||
value = value.match(/.{1,4}/g)?.join(" ") || value;
|
||||
e.target.value = value;
|
||||
});
|
||||
|
||||
// Format expiry date
|
||||
const expiryInput = document.getElementById("expiry");
|
||||
expiryInput.addEventListener("input", (e) => {
|
||||
let value = e.target.value.replace(/\D/g, "");
|
||||
if (value.length >= 2) {
|
||||
value = value.substring(0, 2) + "/" + value.substring(2);
|
||||
}
|
||||
e.target.value = value;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user