850 lines
26 KiB
HTML
850 lines
26 KiB
HTML
<!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>
|
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
|
|
|
<!-- 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=fix33" />
|
|
<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 (501) 608-0409" />
|
|
</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="Belmopan, Cayo District"
|
|
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 class="footer-social" id="footerSocialLinks">
|
|
<a
|
|
href="#"
|
|
class="social-link"
|
|
id="footerFacebook"
|
|
style="display: none"
|
|
><i class="bi bi-facebook"></i
|
|
></a>
|
|
<a
|
|
href="#"
|
|
class="social-link"
|
|
id="footerInstagram"
|
|
style="display: none"
|
|
><i class="bi bi-instagram"></i
|
|
></a>
|
|
<a
|
|
href="#"
|
|
class="social-link"
|
|
id="footerTwitter"
|
|
style="display: none"
|
|
><i class="bi bi-twitter-x"></i
|
|
></a>
|
|
<a
|
|
href="#"
|
|
class="social-link"
|
|
id="footerYoutube"
|
|
style="display: none"
|
|
><i class="bi bi-youtube"></i
|
|
></a>
|
|
<a
|
|
href="#"
|
|
class="social-link"
|
|
id="footerPinterest"
|
|
style="display: none"
|
|
><i class="bi bi-pinterest"></i
|
|
></a>
|
|
<a
|
|
href="#"
|
|
class="social-link"
|
|
id="footerTiktok"
|
|
style="display: none"
|
|
><i class="bi bi-tiktok"></i
|
|
></a>
|
|
<a
|
|
href="#"
|
|
class="social-link"
|
|
id="footerWhatsapp"
|
|
style="display: none"
|
|
><i class="bi bi-whatsapp"></i
|
|
></a>
|
|
<a
|
|
href="#"
|
|
class="social-link"
|
|
id="footerLinkedin"
|
|
style="display: none"
|
|
><i class="bi bi-linkedin"></i
|
|
></a>
|
|
</div>
|
|
</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> skyartshop12.11@gmail.com</li>
|
|
<li><i class="bi bi-telephone"></i> (501) 608-0409</li>
|
|
<li><i class="bi bi-geo-alt"></i> Belmopan, Cayo District</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=20260118g"></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>
|