172 lines
8.5 KiB
PHP
172 lines
8.5 KiB
PHP
<?php
|
|
if (session_status() === PHP_SESSION_NONE) {
|
|
session_start();
|
|
}
|
|
$pageTitle = "Your Cart";
|
|
include 'header.php';
|
|
|
|
$cart = $_SESSION['cart'] ?? [];
|
|
$total = 0;
|
|
foreach ($cart as $item) {
|
|
$total += $item['price'] * $item['quantity'];
|
|
}
|
|
?>
|
|
|
|
<div class="container py-5">
|
|
<div class="row mb-5 align-items-end">
|
|
<div class="col-md-6">
|
|
<h1 class="display-4 fw-bold">Your Cart</h1>
|
|
<p class="text-muted mb-0">Review your safety essentials before checkout.</p>
|
|
</div>
|
|
<div class="col-md-6 text-md-end">
|
|
<a href="/index.php#products" class="text-gold fw-bold text-decoration-none"><i class="bi bi-arrow-left me-2"></i> Continue Shopping</a>
|
|
</div>
|
|
</div>
|
|
|
|
<?php if (empty($cart)): ?>
|
|
<div class="text-center py-5 bg-light rounded-4 border-dashed">
|
|
<div class="display-1 text-muted mb-4"><i class="bi bi-cart-x"></i></div>
|
|
<h3 class="fw-bold">Your cart is empty</h3>
|
|
<p class="text-muted mb-4 fs-5">It looks like you haven't added any safety essentials yet.</p>
|
|
<a href="/index.php#products" class="btn btn-gold btn-lg px-5 rounded-pill">Browse Products</a>
|
|
</div>
|
|
<?php else: ?>
|
|
<div class="row g-5">
|
|
<div class="col-lg-8">
|
|
<div class="card border-0 shadow-sm rounded-4 overflow-hidden">
|
|
<div class="card-body p-0">
|
|
<div class="table-responsive">
|
|
<table class="table table-borderless align-middle mb-0">
|
|
<thead class="bg-light">
|
|
<tr>
|
|
<th scope="col" class="py-3 ps-4 text-muted small text-uppercase fw-bold">Product</th>
|
|
<th scope="col" class="py-3 text-muted small text-uppercase fw-bold text-center">Quantity</th>
|
|
<th scope="col" class="py-3 text-muted small text-uppercase fw-bold text-end">Price</th>
|
|
<th scope="col" class="py-3 pe-4"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php foreach ($cart as $id => $item): ?>
|
|
<tr class="border-bottom">
|
|
<td class="py-4 ps-4">
|
|
<div class="d-flex align-items-center">
|
|
<img src="<?php echo htmlspecialchars($item['image']); ?>" alt="<?php echo htmlspecialchars($item['name']); ?>" class="rounded-3 me-3 border" style="width: 80px; height: 80px; object-fit: cover;">
|
|
<div>
|
|
<h6 class="mb-1 fw-bold"><?php echo htmlspecialchars($item['name']); ?></h6>
|
|
<span class="text-muted small">$<?php echo number_format($item['price'], 2); ?> each</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="py-4 text-center">
|
|
<div class="d-inline-flex align-items-center bg-light rounded-pill p-1">
|
|
<button class="btn btn-sm btn-light rounded-circle" onclick="updateQuantity(<?php echo $id; ?>, <?php echo $item['quantity'] - 1; ?>)">
|
|
<i class="bi bi-dash"></i>
|
|
</button>
|
|
<span class="px-3 fw-bold"><?php echo $item['quantity']; ?></span>
|
|
<button class="btn btn-sm btn-light rounded-circle" onclick="updateQuantity(<?php echo $id; ?>, <?php echo $item['quantity'] + 1; ?>)">
|
|
<i class="bi bi-plus"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
<td class="py-4 text-end">
|
|
<span class="fw-bold fs-5 text-charcoal">$<?php echo number_format($item['price'] * $item['quantity'], 2); ?></span>
|
|
</td>
|
|
<td class="py-4 pe-4 text-end">
|
|
<button class="btn btn-link text-danger p-0 opacity-50 hover-opacity-100" onclick="removeFromCart(<?php echo $id; ?>)" title="Remove Item">
|
|
<i class="bi bi-trash fs-5"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<?php endforeach; ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="card border-0 shadow-sm rounded-4 bg-charcoal text-white">
|
|
<div class="card-body p-4">
|
|
<h5 class="fw-bold mb-4 text-gold">Order Summary</h5>
|
|
<div class="d-flex justify-content-between mb-3">
|
|
<span class="text-light opacity-75">Subtotal</span>
|
|
<span class="fw-bold">$<?php echo number_format($total, 2); ?></span>
|
|
</div>
|
|
<div class="d-flex justify-content-between mb-3">
|
|
<span class="text-light opacity-75">Shipping</span>
|
|
<span class="text-gold fw-bold">Free</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between mb-3">
|
|
<span class="text-light opacity-75">Estimated Tax</span>
|
|
<span class="fw-bold">$0.00</span>
|
|
</div>
|
|
<hr class="my-4 opacity-25">
|
|
<div class="d-flex justify-content-between mb-5">
|
|
<span class="h4 fw-bold mb-0">Total</span>
|
|
<span class="h4 fw-bold text-gold mb-0">$<?php echo number_format($total, 2); ?></span>
|
|
</div>
|
|
<button class="btn btn-gold btn-lg w-100 rounded-pill py-3 fw-bold shadow" onclick="checkout()">Complete Order</button>
|
|
|
|
<div class="mt-4 p-3 bg-white bg-opacity-10 rounded-3 small">
|
|
<div class="d-flex align-items-center mb-2">
|
|
<i class="bi bi-shield-check text-gold me-2"></i>
|
|
<span>ElderEase Secure Checkout</span>
|
|
</div>
|
|
<div class="d-flex align-items-center">
|
|
<i class="bi bi-truck text-gold me-2"></i>
|
|
<span>Free shipping on all orders</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<style>
|
|
.hover-opacity-100:hover { opacity: 1 !important; }
|
|
.border-dashed { border: 2px dashed #dee2e6 !important; }
|
|
</style>
|
|
|
|
<script>
|
|
function updateQuantity(id, quantity) {
|
|
const formData = new FormData();
|
|
formData.append('id', id);
|
|
formData.append('quantity', quantity);
|
|
|
|
fetch('/api/cart.php?action=update', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
location.reload();
|
|
}
|
|
});
|
|
}
|
|
|
|
function removeFromCart(id) {
|
|
const formData = new FormData();
|
|
formData.append('id', id);
|
|
|
|
fetch('/api/cart.php?action=remove', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
location.reload();
|
|
}
|
|
});
|
|
}
|
|
|
|
function checkout() {
|
|
// In a real app, this would redirect to a checkout page or Stripe
|
|
alert('Thank you for choosing ElderEase! In this demonstration version, checkout is simulated. We would normally take you to a secure payment page now.');
|
|
}
|
|
</script>
|
|
|
|
<?php include 'footer.php'; ?>
|