mirror of
https://github.com/myronblair/tomsjavajive
synced 2026-06-30 17:50:32 -05:00
CSS modularization Phase 2: account, cart, checkout
Extract account/cart/checkout styles into dedicated CSS files; remove inline styles and orphaned style blocks from HTML. Wire $extraHead on all account pages, cart.php, and checkout.php. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -92,6 +92,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$extraHead = '<link rel="stylesheet" href="/assets/css/account.css?v='. filemtime(__DIR__ . '/../assets/css/account.css') .'">';
|
||||||
require_once __DIR__ . '/../includes/header.php';
|
require_once __DIR__ . '/../includes/header.php';
|
||||||
require_once __DIR__ . '/includes/sidebar.php';
|
require_once __DIR__ . '/includes/sidebar.php';
|
||||||
?>
|
?>
|
||||||
|
|||||||
@@ -6,115 +6,19 @@
|
|||||||
$customer = CustomerAuth::getFullUser();
|
$customer = CustomerAuth::getFullUser();
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<style>
|
|
||||||
.account-layout {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 250px 1fr;
|
|
||||||
gap: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.account-sidebar {
|
|
||||||
background: var(--color-surface);
|
|
||||||
border-radius: var(--radius-lg);
|
|
||||||
padding: 1.5rem;
|
|
||||||
height: fit-content;
|
|
||||||
position: sticky;
|
|
||||||
top: 90px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.account-nav {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.account-nav li {
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.account-nav a {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.75rem;
|
|
||||||
padding: 0.75rem 1rem;
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
color: var(--color-text);
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.account-nav a:hover {
|
|
||||||
background: var(--color-background);
|
|
||||||
color: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.account-nav a.active {
|
|
||||||
background: var(--color-primary);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.account-nav a i {
|
|
||||||
width: 20px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.account-content {
|
|
||||||
min-height: 500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.account-header {
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.account-header h1 {
|
|
||||||
font-size: 1.75rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-card {
|
|
||||||
background: var(--color-surface);
|
|
||||||
border-radius: var(--radius-lg);
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-card-header {
|
|
||||||
padding: 1rem 1.5rem;
|
|
||||||
border-bottom: 1px solid var(--color-border);
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-card-header h3 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-card-body {
|
|
||||||
padding: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.account-layout {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.account-sidebar {
|
|
||||||
position: static;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<section class="section" style="padding-top: 2rem;">
|
<section class="section" style="padding-top: 2rem;">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="account-layout">
|
<div class="account-layout">
|
||||||
<!-- Sidebar -->
|
<!-- Sidebar -->
|
||||||
<aside class="account-sidebar">
|
<aside class="account-sidebar">
|
||||||
<div style="text-align: center; margin-bottom: 1.5rem;">
|
<div class="account-sidebar-user">
|
||||||
<div style="width: 80px; height: 80px; background: var(--color-primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 1rem;">
|
<div class="account-avatar">
|
||||||
<?= strtoupper(substr($customer['name'] ?? $customer['email'], 0, 1)) ?>
|
<?= strtoupper(substr($customer['name'] ?? $customer['email'], 0, 1)) ?>
|
||||||
</div>
|
</div>
|
||||||
<h3 style="margin: 0 0 0.25rem; font-size: 1rem;"><?= htmlspecialchars($customer['name'] ?? 'Customer') ?></h3>
|
<h3><?= htmlspecialchars($customer['name'] ?? 'Customer') ?></h3>
|
||||||
<p class="text-muted" style="font-size: 0.875rem; margin: 0;"><?= htmlspecialchars($customer['email']) ?></p>
|
<p><?= htmlspecialchars($customer['email']) ?></p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ul class="account-nav">
|
<ul class="account-nav">
|
||||||
<li><a href="/account/" class="<?= ($currentPage ?? '') === 'dashboard' ? 'active' : '' ?>"><i class="fas fa-tachometer-alt"></i> Dashboard</a></li>
|
<li><a href="/account/" class="<?= ($currentPage ?? '') === 'dashboard' ? 'active' : '' ?>"><i class="fas fa-tachometer-alt"></i> Dashboard</a></li>
|
||||||
<li><a href="/account/orders.php" class="<?= ($currentPage ?? '') === 'orders' ? 'active' : '' ?>"><i class="fas fa-shopping-bag"></i> My Orders</a></li>
|
<li><a href="/account/orders.php" class="<?= ($currentPage ?? '') === 'orders' ? 'active' : '' ?>"><i class="fas fa-shopping-bag"></i> My Orders</a></li>
|
||||||
@@ -124,9 +28,9 @@ $customer = CustomerAuth::getFullUser();
|
|||||||
<li><a href="/account/addresses.php" class="<?= ($currentPage ?? '') === 'addresses' ? 'active' : '' ?>"><i class="fas fa-map-marker-alt"></i> Addresses</a></li>
|
<li><a href="/account/addresses.php" class="<?= ($currentPage ?? '') === 'addresses' ? 'active' : '' ?>"><i class="fas fa-map-marker-alt"></i> Addresses</a></li>
|
||||||
<li><a href="/account/profile.php" class="<?= ($currentPage ?? '') === 'profile' ? 'active' : '' ?>"><i class="fas fa-user"></i> Profile</a></li>
|
<li><a href="/account/profile.php" class="<?= ($currentPage ?? '') === 'profile' ? 'active' : '' ?>"><i class="fas fa-user"></i> Profile</a></li>
|
||||||
<li><a href="/account/reviews.php" class="<?= ($currentPage ?? '') === 'reviews' ? 'active' : '' ?>"><i class="fas fa-star"></i> My Reviews</a></li>
|
<li><a href="/account/reviews.php" class="<?= ($currentPage ?? '') === 'reviews' ? 'active' : '' ?>"><i class="fas fa-star"></i> My Reviews</a></li>
|
||||||
<li><a href="/logout.php" style="color: var(--color-error);"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
|
<li><a href="/logout.php" class="danger"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
<!-- Main Content -->
|
<!-- Main Content -->
|
||||||
<div class="account-content">
|
<div class="account-content">
|
||||||
|
|||||||
+7
-185
@@ -33,188 +33,10 @@ $walletTransactions = db()->fetchAll(
|
|||||||
['id' => $customer['customer_id']]
|
['id' => $customer['customer_id']]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
$extraHead = '<link rel="stylesheet" href="/assets/css/account.css?v=' . filemtime(__DIR__ . '/../assets/css/account.css') . '">';
|
||||||
require_once __DIR__ . '/../includes/header.php';
|
require_once __DIR__ . '/../includes/header.php';
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<style>
|
|
||||||
.account-layout {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 250px 1fr;
|
|
||||||
gap: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.account-sidebar {
|
|
||||||
background: var(--color-surface);
|
|
||||||
border-radius: var(--radius-lg);
|
|
||||||
padding: 1.5rem;
|
|
||||||
height: fit-content;
|
|
||||||
position: sticky;
|
|
||||||
top: 90px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.account-nav {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.account-nav li {
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.account-nav a {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.75rem;
|
|
||||||
padding: 0.75rem 1rem;
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
color: var(--color-text);
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.account-nav a:hover {
|
|
||||||
background: var(--color-background);
|
|
||||||
color: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.account-nav a.active {
|
|
||||||
background: var(--color-primary);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.account-nav a i {
|
|
||||||
width: 20px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.account-content {
|
|
||||||
min-height: 500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.account-header {
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.account-header h1 {
|
|
||||||
font-size: 1.75rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(4, 1fr);
|
|
||||||
gap: 1rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-stat {
|
|
||||||
background: var(--color-surface);
|
|
||||||
border-radius: var(--radius-lg);
|
|
||||||
padding: 1.5rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-stat-icon {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin: 0 auto 1rem;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-stat-icon.primary {
|
|
||||||
background: rgba(255, 94, 26, 0.1);
|
|
||||||
color: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-stat-icon.success {
|
|
||||||
background: rgba(16, 185, 129, 0.1);
|
|
||||||
color: var(--color-success);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-stat-icon.warning {
|
|
||||||
background: rgba(245, 158, 11, 0.1);
|
|
||||||
color: var(--color-warning);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-stat-value {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-stat-label {
|
|
||||||
color: var(--color-text-muted);
|
|
||||||
font-size: 0.875rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-card {
|
|
||||||
background: var(--color-surface);
|
|
||||||
border-radius: var(--radius-lg);
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-card-header {
|
|
||||||
padding: 1rem 1.5rem;
|
|
||||||
border-bottom: 1px solid var(--color-border);
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-card-header h3 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-card-body {
|
|
||||||
padding: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.order-item {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 1rem 0;
|
|
||||||
border-bottom: 1px solid var(--color-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.order-item:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.order-item:first-child {
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.order-info h4 {
|
|
||||||
margin: 0 0 0.25rem;
|
|
||||||
font-size: 0.9375rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.order-info p {
|
|
||||||
margin: 0;
|
|
||||||
color: var(--color-text-muted);
|
|
||||||
font-size: 0.875rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.account-layout {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.account-sidebar {
|
|
||||||
position: static;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-grid {
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<section class="section" style="padding-top: 2rem;">
|
<section class="section" style="padding-top: 2rem;">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<?php if (hasFlash('success')): ?>
|
<?php if (hasFlash('success')): ?>
|
||||||
@@ -226,14 +48,14 @@ require_once __DIR__ . '/../includes/header.php';
|
|||||||
<div class="account-layout">
|
<div class="account-layout">
|
||||||
<!-- Sidebar -->
|
<!-- Sidebar -->
|
||||||
<aside class="account-sidebar">
|
<aside class="account-sidebar">
|
||||||
<div style="text-align: center; margin-bottom: 1.5rem;">
|
<div class="account-sidebar-user">
|
||||||
<div style="width: 80px; height: 80px; background: var(--color-primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 1rem;">
|
<div class="account-avatar">
|
||||||
<?= strtoupper(substr($customer['name'] ?? $customer['email'], 0, 1)) ?>
|
<?= strtoupper(substr($customer['name'] ?? $customer['email'], 0, 1)) ?>
|
||||||
</div>
|
</div>
|
||||||
<h3 style="margin: 0 0 0.25rem; font-size: 1rem;"><?= htmlspecialchars($customer['name'] ?? 'Customer') ?></h3>
|
<h3><?= htmlspecialchars($customer['name'] ?? 'Customer') ?></h3>
|
||||||
<p class="text-muted" style="font-size: 0.875rem; margin: 0;"><?= htmlspecialchars($customer['email']) ?></p>
|
<p><?= htmlspecialchars($customer['email']) ?></p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ul class="account-nav">
|
<ul class="account-nav">
|
||||||
<li><a href="/account/" class="active"><i class="fas fa-tachometer-alt"></i> Dashboard</a></li>
|
<li><a href="/account/" class="active"><i class="fas fa-tachometer-alt"></i> Dashboard</a></li>
|
||||||
<li><a href="/account/orders.php"><i class="fas fa-shopping-bag"></i> My Orders</a></li>
|
<li><a href="/account/orders.php"><i class="fas fa-shopping-bag"></i> My Orders</a></li>
|
||||||
@@ -242,7 +64,7 @@ require_once __DIR__ . '/../includes/header.php';
|
|||||||
<li><a href="/account/addresses.php"><i class="fas fa-map-marker-alt"></i> Addresses</a></li>
|
<li><a href="/account/addresses.php"><i class="fas fa-map-marker-alt"></i> Addresses</a></li>
|
||||||
<li><a href="/account/profile.php"><i class="fas fa-user"></i> Profile</a></li>
|
<li><a href="/account/profile.php"><i class="fas fa-user"></i> Profile</a></li>
|
||||||
<li><a href="/account/reviews.php"><i class="fas fa-star"></i> My Reviews</a></li>
|
<li><a href="/account/reviews.php"><i class="fas fa-star"></i> My Reviews</a></li>
|
||||||
<li><a href="/logout.php" style="color: var(--color-error);"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
|
<li><a href="/logout.php" class="danger"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
|
|||||||
@@ -25,6 +25,7 @@ if (!$order) {
|
|||||||
$items = json_decode($order['items'], true);
|
$items = json_decode($order['items'], true);
|
||||||
$shippingAddress = json_decode($order['shipping_address'] ?? '{}', true);
|
$shippingAddress = json_decode($order['shipping_address'] ?? '{}', true);
|
||||||
|
|
||||||
|
$extraHead = '<link rel="stylesheet" href="/assets/css/account.css?v='. filemtime(__DIR__ . '/../assets/css/account.css') .'">';
|
||||||
require_once __DIR__ . '/../includes/header.php';
|
require_once __DIR__ . '/../includes/header.php';
|
||||||
require_once __DIR__ . '/includes/sidebar.php';
|
require_once __DIR__ . '/includes/sidebar.php';
|
||||||
|
|
||||||
|
|||||||
@@ -31,6 +31,7 @@ $orders = db()->fetchAll(
|
|||||||
array_merge($params, ['limit' => $pagination['per_page'], 'offset' => $pagination['offset']])
|
array_merge($params, ['limit' => $pagination['per_page'], 'offset' => $pagination['offset']])
|
||||||
);
|
);
|
||||||
|
|
||||||
|
$extraHead = '<link rel="stylesheet" href="/assets/css/account.css?v='. filemtime(__DIR__ . '/../assets/css/account.css') .'">';
|
||||||
require_once __DIR__ . '/../includes/header.php';
|
require_once __DIR__ . '/../includes/header.php';
|
||||||
require_once __DIR__ . '/includes/sidebar.php';
|
require_once __DIR__ . '/includes/sidebar.php';
|
||||||
?>
|
?>
|
||||||
|
|||||||
@@ -86,6 +86,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
|||||||
|
|
||||||
$preferences = json_decode($customer['preferences'] ?? '{}', true);
|
$preferences = json_decode($customer['preferences'] ?? '{}', true);
|
||||||
|
|
||||||
|
$extraHead = '<link rel="stylesheet" href="/assets/css/account.css?v='. filemtime(__DIR__ . '/../assets/css/account.css') .'">';
|
||||||
require_once __DIR__ . '/../includes/header.php';
|
require_once __DIR__ . '/../includes/header.php';
|
||||||
require_once __DIR__ . '/includes/sidebar.php';
|
require_once __DIR__ . '/includes/sidebar.php';
|
||||||
?>
|
?>
|
||||||
|
|||||||
@@ -45,6 +45,7 @@ $eligibleProducts = db()->fetchAll(
|
|||||||
['cid' => $customer['customer_id'], 'cid2' => $customer['customer_id']]
|
['cid' => $customer['customer_id'], 'cid2' => $customer['customer_id']]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
$extraHead = '<link rel="stylesheet" href="/assets/css/account.css?v='. filemtime(__DIR__ . '/../assets/css/account.css') .'">';
|
||||||
require_once __DIR__ . '/../includes/header.php';
|
require_once __DIR__ . '/../includes/header.php';
|
||||||
require_once __DIR__ . '/includes/sidebar.php';
|
require_once __DIR__ . '/includes/sidebar.php';
|
||||||
?>
|
?>
|
||||||
|
|||||||
@@ -22,6 +22,7 @@ $transactions = db()->fetchAll(
|
|||||||
['id' => $customer['customer_id'], 'limit' => $pagination['per_page'], 'offset' => $pagination['offset']]
|
['id' => $customer['customer_id'], 'limit' => $pagination['per_page'], 'offset' => $pagination['offset']]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
$extraHead = '<link rel="stylesheet" href="/assets/css/account.css?v='. filemtime(__DIR__ . '/../assets/css/account.css') .'">';
|
||||||
require_once __DIR__ . '/../includes/header.php';
|
require_once __DIR__ . '/../includes/header.php';
|
||||||
require_once __DIR__ . '/includes/sidebar.php';
|
require_once __DIR__ . '/includes/sidebar.php';
|
||||||
?>
|
?>
|
||||||
|
|||||||
@@ -32,6 +32,7 @@ $wishlistItems = db()->fetchAll(
|
|||||||
['id' => $customer['customer_id']]
|
['id' => $customer['customer_id']]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
$extraHead = '<link rel="stylesheet" href="/assets/css/account.css?v='. filemtime(__DIR__ . '/../assets/css/account.css') .'">';
|
||||||
require_once __DIR__ . '/../includes/header.php';
|
require_once __DIR__ . '/../includes/header.php';
|
||||||
require_once __DIR__ . '/includes/sidebar.php';
|
require_once __DIR__ . '/includes/sidebar.php';
|
||||||
?>
|
?>
|
||||||
|
|||||||
@@ -0,0 +1,223 @@
|
|||||||
|
/* Account Layout */
|
||||||
|
.account-layout {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 250px 1fr;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-sidebar {
|
||||||
|
background: var(--color-surface);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
padding: 1.5rem;
|
||||||
|
height: fit-content;
|
||||||
|
position: sticky;
|
||||||
|
top: 90px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-avatar {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
background: var(--color-primary);
|
||||||
|
color: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 2rem;
|
||||||
|
margin: 0 auto 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-sidebar-user {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-sidebar-user h3 {
|
||||||
|
margin: 0 0 0.25rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-sidebar-user p {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
margin: 0;
|
||||||
|
color: var(--color-text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-nav {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-nav li {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-nav a {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
color: var(--color-text);
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-nav a:hover {
|
||||||
|
background: var(--color-background);
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-nav a.active {
|
||||||
|
background: var(--color-primary);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-nav a i {
|
||||||
|
width: 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-nav a.danger {
|
||||||
|
color: var(--color-error);
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-content {
|
||||||
|
min-height: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-header {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-header h1 {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Section Cards */
|
||||||
|
.section-card {
|
||||||
|
background: var(--color-surface);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-card-header {
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
border-bottom: 1px solid var(--color-border);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-card-header h3 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-card-body {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Order List Items */
|
||||||
|
.order-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 1rem 0;
|
||||||
|
border-bottom: 1px solid var(--color-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-item:first-child {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-info h4 {
|
||||||
|
margin: 0 0 0.25rem;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-info p {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--color-text-muted);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-meta {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-meta .amount {
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dashboard Stats Grid */
|
||||||
|
.dashboard-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-stat {
|
||||||
|
background: var(--color-surface);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
padding: 1.5rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-stat-icon {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0 auto 1rem;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-stat-icon.primary {
|
||||||
|
background: rgba(255, 94, 26, 0.1);
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-stat-icon.success {
|
||||||
|
background: rgba(16, 185, 129, 0.1);
|
||||||
|
color: var(--color-success);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-stat-icon.warning {
|
||||||
|
background: rgba(245, 158, 11, 0.1);
|
||||||
|
color: var(--color-warning);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-stat-value {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-stat-label {
|
||||||
|
color: var(--color-text-muted);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.account-layout {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-sidebar {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-grid {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,154 @@
|
|||||||
|
/* Cart Page Layout */
|
||||||
|
.cart-layout {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 350px;
|
||||||
|
gap: 2rem;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-empty {
|
||||||
|
padding: 3rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-empty-icon {
|
||||||
|
font-size: 4rem;
|
||||||
|
color: var(--color-text-muted);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Cart Items */
|
||||||
|
.cart-items-list {
|
||||||
|
display: grid;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-item {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 80px 1fr auto auto;
|
||||||
|
gap: 1rem;
|
||||||
|
align-items: center;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
border-bottom: 1px solid var(--color-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-item-img {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-item-name {
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-item-price {
|
||||||
|
color: var(--color-text-muted);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Quantity Selector */
|
||||||
|
.quantity-selector {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.qty-btn {
|
||||||
|
padding: 0.25rem 0.75rem;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: var(--color-text);
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.qty-btn:hover {
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.qty-input {
|
||||||
|
width: 50px;
|
||||||
|
text-align: center;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-item-total {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-item-total .amount {
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-remove {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: var(--color-error);
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Order Summary Sidebar */
|
||||||
|
.cart-summary {
|
||||||
|
position: sticky;
|
||||||
|
top: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-summary-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-summary-total {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.free-shipping-msg {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--color-primary);
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.cart-layout {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-summary {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-item {
|
||||||
|
grid-template-columns: 64px 1fr;
|
||||||
|
grid-template-rows: auto auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-item-img {
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quantity-selector,
|
||||||
|
.cart-item-total {
|
||||||
|
grid-column: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,103 @@
|
|||||||
|
/* Checkout Page Layout */
|
||||||
|
.checkout-layout {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 400px;
|
||||||
|
gap: 2rem;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Address grid: city / state / zip */
|
||||||
|
.address-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 2fr 1fr 1fr;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Order Summary Sidebar */
|
||||||
|
.checkout-summary {
|
||||||
|
position: sticky;
|
||||||
|
top: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scrollable cart preview in sidebar */
|
||||||
|
.checkout-items-preview {
|
||||||
|
max-height: 250px;
|
||||||
|
overflow-y: auto;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkout-item {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
border-bottom: 1px solid var(--color-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkout-item:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkout-item-img {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkout-item-info {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkout-item-info p {
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkout-item-info small {
|
||||||
|
color: var(--color-text-muted);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkout-item-total {
|
||||||
|
text-align: right;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkout-summary-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkout-summary-total {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secure-badge {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--color-text-muted);
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.checkout-layout {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkout-summary {
|
||||||
|
position: static;
|
||||||
|
order: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-grid {
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -9,6 +9,7 @@ $metaDescription = 'Review your coffee selections and checkout securely.';
|
|||||||
$canonicalUrl = 'https://tomsjavajive.com/cart.php';
|
$canonicalUrl = 'https://tomsjavajive.com/cart.php';
|
||||||
$metaRobots = "noindex, nofollow";
|
$metaRobots = "noindex, nofollow";
|
||||||
$suppressSchema = true;
|
$suppressSchema = true;
|
||||||
|
$extraHead = '<link rel="stylesheet" href="/assets/css/cart.css?v=' . filemtime(__DIR__ . '/assets/css/cart.css') . '">';
|
||||||
require_once __DIR__ . '/includes/header.php';
|
require_once __DIR__ . '/includes/header.php';
|
||||||
|
|
||||||
$cart = getCart();
|
$cart = getCart();
|
||||||
@@ -66,39 +67,37 @@ $total = $subtotal + $shippingCost;
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<?php else: ?>
|
<?php else: ?>
|
||||||
<div style="display: grid; grid-template-columns: 1fr 350px; gap: 2rem; align-items: start;">
|
<div class="cart-layout">
|
||||||
|
|
||||||
<!-- Cart Items -->
|
<!-- Cart Items -->
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div style="display: grid; gap: 1rem;">
|
<div class="cart-items-list">
|
||||||
<?php foreach ($cartItems as $item): ?>
|
<?php foreach ($cartItems as $item): ?>
|
||||||
<div class="cart-item" data-product-id="<?= $item['product_id'] ?>"
|
<div class="cart-item" data-product-id="<?= $item['product_id'] ?>">
|
||||||
style="display: grid; grid-template-columns: 80px 1fr auto auto; gap: 1rem; align-items: center; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border);">
|
|
||||||
|
|
||||||
<img src="<?= htmlspecialchars($item['image']) ?>" alt="<?= htmlspecialchars($item['name']) ?>"
|
<img src="<?= htmlspecialchars($item['image']) ?>" alt="<?= htmlspecialchars($item['name']) ?>"
|
||||||
style="width: 80px; height: 80px; object-fit: cover; border-radius: var(--radius-md);">
|
class="cart-item-img">
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<a href="/product.php?id=<?= $item['product_id'] ?>">
|
<a href="/product.php?id=<?= $item['product_id'] ?>">
|
||||||
<h4 style="margin-bottom: 0.25rem;"><?= htmlspecialchars($item['name']) ?></h4>
|
<h4 class="cart-item-name"><?= htmlspecialchars($item['name']) ?></h4>
|
||||||
</a>
|
</a>
|
||||||
<p class="text-muted mb-0"><?= formatCurrency($item['unit_price']) ?> each</p>
|
<p class="cart-item-price"><?= formatCurrency($item['unit_price']) ?> each</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="quantity-selector" style="display: flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-md);">
|
<div class="quantity-selector">
|
||||||
<button type="button" class="qty-minus btn" style="padding: 0.25rem 0.75rem;"
|
<button type="button" class="qty-btn"
|
||||||
onclick="updateCartItem('<?= $item['product_id'] ?>', <?= $item['quantity'] - 1 ?>)">-</button>
|
onclick="updateCartItem('<?= $item['product_id'] ?>', <?= $item['quantity'] - 1 ?>)">-</button>
|
||||||
<input type="number" class="qty-input" value="<?= $item['quantity'] ?>" min="1" max="<?= $item['stock'] ?>"
|
<input type="number" class="qty-input" value="<?= $item['quantity'] ?>" min="1" max="<?= $item['stock'] ?>"
|
||||||
style="width: 50px; text-align: center; border: none; outline: none;"
|
|
||||||
onchange="updateCartItem('<?= $item['product_id'] ?>', this.value)">
|
onchange="updateCartItem('<?= $item['product_id'] ?>', this.value)">
|
||||||
<button type="button" class="qty-plus btn" style="padding: 0.25rem 0.75rem;"
|
<button type="button" class="qty-btn"
|
||||||
onclick="updateCartItem('<?= $item['product_id'] ?>', <?= $item['quantity'] + 1 ?>)">+</button>
|
onclick="updateCartItem('<?= $item['product_id'] ?>', <?= $item['quantity'] + 1 ?>)">+</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="text-align: right;">
|
<div class="cart-item-total">
|
||||||
<p style="font-weight: 600; margin-bottom: 0.25rem;"><?= formatCurrency($item['total']) ?></p>
|
<p class="amount"><?= formatCurrency($item['total']) ?></p>
|
||||||
<button type="button" class="btn btn-sm" style="color: var(--color-error);"
|
<button type="button" class="btn-remove"
|
||||||
onclick="removeFromCart('<?= $item['product_id'] ?>')">
|
onclick="removeFromCart('<?= $item['product_id'] ?>')">
|
||||||
<i class="fas fa-trash"></i> Remove
|
<i class="fas fa-trash"></i> Remove
|
||||||
</button>
|
</button>
|
||||||
@@ -108,40 +107,40 @@ $total = $subtotal + $shippingCost;
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Order Summary -->
|
<!-- Order Summary -->
|
||||||
<div class="card" style="position: sticky; top: 100px;">
|
<div class="card cart-summary">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<h3 style="margin: 0;">Order Summary</h3>
|
<h3 style="margin: 0;">Order Summary</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
|
<div class="cart-summary-row">
|
||||||
<span>Subtotal</span>
|
<span>Subtotal</span>
|
||||||
<span id="cart-subtotal"><?= formatCurrency($subtotal) ?></span>
|
<span id="cart-subtotal"><?= formatCurrency($subtotal) ?></span>
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
|
<div class="cart-summary-row">
|
||||||
<span>Shipping</span>
|
<span>Shipping</span>
|
||||||
<span id="cart-shipping">
|
<span id="cart-shipping">
|
||||||
<?php if ($shippingCost == 0): ?>
|
<?php if ($shippingCost == 0): ?>
|
||||||
<span style="color: var(--color-success);">FREE</span>
|
<span class="text-success">FREE</span>
|
||||||
<?php else: ?>
|
<?php else: ?>
|
||||||
<?= formatCurrency($shippingCost) ?>
|
<?= formatCurrency($shippingCost) ?>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<?php if ($shippingCost > 0 && isset($shippingSettings['free_shipping_threshold'])):
|
<?php if ($shippingCost > 0 && isset($shippingSettings['free_shipping_threshold'])):
|
||||||
$remaining = $shippingSettings['free_shipping_threshold'] - $subtotal;
|
$remaining = $shippingSettings['free_shipping_threshold'] - $subtotal;
|
||||||
?>
|
?>
|
||||||
<p style="font-size: 0.875rem; color: var(--color-primary); margin: 0.5rem 0;">
|
<p class="free-shipping-msg">
|
||||||
<i class="fas fa-truck"></i>
|
<i class="fas fa-truck"></i>
|
||||||
Add <?= formatCurrency($remaining) ?> more for FREE shipping!
|
Add <?= formatCurrency($remaining) ?> more for FREE shipping!
|
||||||
</p>
|
</p>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
||||||
<hr style="margin: 1rem 0;">
|
<hr style="margin: 1rem 0;">
|
||||||
|
|
||||||
<div style="display: flex; justify-content: space-between; font-size: 1.25rem; font-weight: 600;">
|
<div class="cart-summary-total">
|
||||||
<span>Total</span>
|
<span>Total</span>
|
||||||
<span id="cart-total"><?= formatCurrency($total) ?></span>
|
<span id="cart-total"><?= formatCurrency($total) ?></span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+24
-25
@@ -158,6 +158,7 @@ $metaDescription = 'Complete your coffee order with secure checkout.';
|
|||||||
$canonicalUrl = 'https://tomsjavajive.com/checkout.php';
|
$canonicalUrl = 'https://tomsjavajive.com/checkout.php';
|
||||||
$metaRobots = "noindex, nofollow";
|
$metaRobots = "noindex, nofollow";
|
||||||
$suppressSchema = true;
|
$suppressSchema = true;
|
||||||
|
$extraHead = '<link rel="stylesheet" href="/assets/css/checkout.css?v=' . filemtime(__DIR__ . '/assets/css/checkout.css') . '">';
|
||||||
require_once __DIR__ . '/includes/header.php';
|
require_once __DIR__ . '/includes/header.php';
|
||||||
?>
|
?>
|
||||||
|
|
||||||
@@ -166,7 +167,7 @@ require_once __DIR__ . '/includes/header.php';
|
|||||||
<h1 style="margin-bottom: 2rem;">Checkout</h1>
|
<h1 style="margin-bottom: 2rem;">Checkout</h1>
|
||||||
|
|
||||||
<form method="POST" action="" id="checkout-form">
|
<form method="POST" action="" id="checkout-form">
|
||||||
<div style="display: grid; grid-template-columns: 1fr 400px; gap: 2rem; align-items: start;">
|
<div class="checkout-layout">
|
||||||
|
|
||||||
<!-- Customer & Shipping Info -->
|
<!-- Customer & Shipping Info -->
|
||||||
<div>
|
<div>
|
||||||
@@ -231,7 +232,7 @@ require_once __DIR__ . '/includes/header.php';
|
|||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1rem;">
|
<div class="address-grid">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label class="form-label">City *</label>
|
<label class="form-label">City *</label>
|
||||||
<input type="text" name="city" class="form-input"
|
<input type="text" name="city" class="form-input"
|
||||||
@@ -275,62 +276,60 @@ require_once __DIR__ . '/includes/header.php';
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Order Summary -->
|
<!-- Order Summary -->
|
||||||
<div class="card" style="position: sticky; top: 100px;">
|
<div class="card checkout-summary">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<h3 style="margin: 0;">Order Summary</h3>
|
<h3 style="margin: 0;">Order Summary</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<!-- Cart Items -->
|
<!-- Cart Items -->
|
||||||
<div style="max-height: 250px; overflow-y: auto; margin-bottom: 1rem;">
|
<div class="checkout-items-preview">
|
||||||
<?php foreach ($cartItems as $item): ?>
|
<?php foreach ($cartItems as $item): ?>
|
||||||
<div style="display: flex; gap: 1rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border);">
|
<div class="checkout-item">
|
||||||
<img src="<?= htmlspecialchars($item['image']) ?>" alt=""
|
<img src="<?= htmlspecialchars($item['image']) ?>" alt=""
|
||||||
style="width: 60px; height: 60px; object-fit: cover; border-radius: var(--radius-md);">
|
class="checkout-item-img">
|
||||||
<div style="flex: 1;">
|
<div class="checkout-item-info">
|
||||||
<p style="font-weight: 500; margin-bottom: 0.25rem;"><?= htmlspecialchars($item['name']) ?></p>
|
<p><?= htmlspecialchars($item['name']) ?></p>
|
||||||
<p class="text-muted" style="font-size: 0.875rem;">
|
<small><?= formatCurrency($item['unit_price']) ?> x <?= $item['quantity'] ?></small>
|
||||||
<?= formatCurrency($item['unit_price']) ?> x <?= $item['quantity'] ?>
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div style="text-align: right;">
|
<div class="checkout-item-total">
|
||||||
<strong><?= formatCurrency($item['total']) ?></strong>
|
<?= formatCurrency($item['total']) ?>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Totals -->
|
<!-- Totals -->
|
||||||
<div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
|
<div class="checkout-summary-row">
|
||||||
<span>Subtotal</span>
|
<span>Subtotal</span>
|
||||||
<span><?= formatCurrency($subtotal) ?></span>
|
<span><?= formatCurrency($subtotal) ?></span>
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
|
<div class="checkout-summary-row">
|
||||||
<span>Shipping</span>
|
<span>Shipping</span>
|
||||||
<span>
|
<span>
|
||||||
<?php if ($shippingCost == 0): ?>
|
<?php if ($shippingCost == 0): ?>
|
||||||
<span style="color: var(--color-success);">FREE</span>
|
<span class="text-success">FREE</span>
|
||||||
<?php else: ?>
|
<?php else: ?>
|
||||||
<?= formatCurrency($shippingCost) ?>
|
<?= formatCurrency($shippingCost) ?>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<hr style="margin: 1rem 0;">
|
<hr style="margin: 1rem 0;">
|
||||||
|
|
||||||
<div style="display: flex; justify-content: space-between; font-size: 1.25rem; font-weight: 600;">
|
<div class="checkout-summary-total">
|
||||||
<span>Total</span>
|
<span>Total</span>
|
||||||
<span><?= formatCurrency($total) ?></span>
|
<span><?= formatCurrency($total) ?></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button type="submit" class="btn btn-primary btn-lg btn-block mt-2">
|
<button type="submit" class="btn btn-primary btn-lg btn-block mt-2">
|
||||||
Continue to Payment
|
Continue to Payment
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<a href="/cart.php" class="btn btn-secondary btn-block mt-1">
|
<a href="/cart.php" class="btn btn-secondary btn-block mt-1">
|
||||||
<i class="fas fa-arrow-left"></i> Back to Cart
|
<i class="fas fa-arrow-left"></i> Back to Cart
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<p class="text-muted text-center mt-2" style="font-size: 0.75rem;">
|
<p class="secure-badge">
|
||||||
<i class="fas fa-lock"></i> Secure checkout powered by Stripe
|
<i class="fas fa-lock"></i> Secure checkout powered by Stripe
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user