myron/tomsjavajive
1
0
Fork 0
mirror of https://github.com/myronblair/tomsjavajive synced 2026-06-30 17:50:32 -05:00
Code Issues Packages Projects Releases Wiki Activity

CSS modularization Phase 2: account, cart, checkout

Browse Source 
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:
Myron Blair
2026-06-15 17:51:57 +00:00
parent 771e1a15b1
commit 5637b6d7f5
14 changed files with 556 additions and 345 deletions
Download Patch File Download Diff File Expand all files Collapse all files
account/addresses.php
+1
View File
@@ -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/sidebar.php';
?>
account/includes/sidebar.php
+7 -103
View File
@@ -6,115 +6,19 @@
$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;">
<div class="container">
<div class="account-layout">
<!-- Sidebar -->
<aside class="account-sidebar">
<div style="text-align: center; margin-bottom: 1.5rem;">
<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-sidebar-user">
<div class="account-avatar">
<?= strtoupper(substr($customer['name'] ?? $customer['email'], 0, 1)) ?>
</div>
<h3 style="margin: 0 0 0.25rem; font-size: 1rem;"><?= htmlspecialchars($customer['name'] ?? 'Customer') ?></h3>
<p class="text-muted" style="font-size: 0.875rem; margin: 0;"><?= htmlspecialchars($customer['email']) ?></p>
<h3><?= htmlspecialchars($customer['name'] ?? 'Customer') ?></h3>
<p><?= htmlspecialchars($customer['email']) ?></p>
</div>
<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/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/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="/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>
</aside>
<!-- Main Content -->
<div class="account-content">
account/index.php
+7 -185
View File
@@ -33,188 +33,10 @@ $walletTransactions = db()->fetchAll(
['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';
?>
<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;">
<div class="container">
<?php if (hasFlash('success')): ?>
@@ -226,14 +48,14 @@ require_once __DIR__ . '/../includes/header.php';
<div class="account-layout">
<!-- Sidebar -->
<aside class="account-sidebar">
<div style="text-align: center; margin-bottom: 1.5rem;">
<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-sidebar-user">
<div class="account-avatar">
<?= strtoupper(substr($customer['name'] ?? $customer['email'], 0, 1)) ?>
</div>
<h3 style="margin: 0 0 0.25rem; font-size: 1rem;"><?= htmlspecialchars($customer['name'] ?? 'Customer') ?></h3>
<p class="text-muted" style="font-size: 0.875rem; margin: 0;"><?= htmlspecialchars($customer['email']) ?></p>
<h3><?= htmlspecialchars($customer['name'] ?? 'Customer') ?></h3>
<p><?= htmlspecialchars($customer['email']) ?></p>
</div>
<ul class="account-nav">
<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>
@@ -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/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="/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>
</aside>
account/order.php
+1
View File
@@ -25,6 +25,7 @@ if (!$order) {
$items = json_decode($order['items'], 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/sidebar.php';
account/orders.php
+1
View File
@@ -31,6 +31,7 @@ $orders = db()->fetchAll(
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/sidebar.php';
?>
account/profile.php
+1
View File
@@ -86,6 +86,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$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/sidebar.php';
?>
account/reviews.php
+1
View File
@@ -45,6 +45,7 @@ $eligibleProducts = db()->fetchAll(
['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/sidebar.php';
?>
account/wallet.php
+1
View File
@@ -22,6 +22,7 @@ $transactions = db()->fetchAll(
['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/sidebar.php';
?>
account/wishlist.php
+1
View File
@@ -32,6 +32,7 @@ $wishlistItems = db()->fetchAll(
['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/sidebar.php';
?>
assets/css/account.css
+223
View File
@@ -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);
}
}
assets/css/cart.css
+154
View File
@@ -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;
}
}
assets/css/checkout.css
+103
View File
@@ -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;
}
}
cart.php
+31 -32
View File
@@ -9,6 +9,7 @@ $metaDescription = 'Review your coffee selections and checkout securely.';
$canonicalUrl = 'https://tomsjavajive.com/cart.php';
$metaRobots = "noindex, nofollow";
$suppressSchema = true;
$extraHead = '<link rel="stylesheet" href="/assets/css/cart.css?v=' . filemtime(__DIR__ . '/assets/css/cart.css') . '">';
require_once __DIR__ . '/includes/header.php';
$cart = getCart();
@@ -66,39 +67,37 @@ $total = $subtotal + $shippingCost;
</div>
</div>
<?php else: ?>
<div style="display: grid; grid-template-columns: 1fr 350px; gap: 2rem; align-items: start;">
<div class="cart-layout">
<!-- Cart Items -->
<div class="card">
<div class="card-body">
<div style="display: grid; gap: 1rem;">
<div class="cart-items-list">
<?php foreach ($cartItems as $item): ?>
<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);">
<div class="cart-item" data-product-id="<?= $item['product_id'] ?>">
<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>
<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>
<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 class="quantity-selector" style="display: flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-md);">
<button type="button" class="qty-minus btn" style="padding: 0.25rem 0.75rem;"
<div class="quantity-selector">
<button type="button" class="qty-btn"
onclick="updateCartItem('<?= $item['product_id'] ?>', <?= $item['quantity'] - 1 ?>)">-</button>
<input type="number" class="qty-input" value="<?= $item['quantity'] ?>" min="1" max="<?= $item['stock'] ?>"
style="width: 50px; text-align: center; border: none; outline: none;"
<input type="number" class="qty-input" value="<?= $item['quantity'] ?>" min="1" max="<?= $item['stock'] ?>"
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>
</div>
<div style="text-align: right;">
<p style="font-weight: 600; margin-bottom: 0.25rem;"><?= formatCurrency($item['total']) ?></p>
<button type="button" class="btn btn-sm" style="color: var(--color-error);"
<div class="cart-item-total">
<p class="amount"><?= formatCurrency($item['total']) ?></p>
<button type="button" class="btn-remove"
onclick="removeFromCart('<?= $item['product_id'] ?>')">
<i class="fas fa-trash"></i> Remove
</button>
@@ -108,40 +107,40 @@ $total = $subtotal + $shippingCost;
</div>
</div>
</div>
<!-- Order Summary -->
<div class="card" style="position: sticky; top: 100px;">
<div class="card cart-summary">
<div class="card-header">
<h3 style="margin: 0;">Order Summary</h3>
</div>
<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 id="cart-subtotal"><?= formatCurrency($subtotal) ?></span>
</div>
<div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
<div class="cart-summary-row">
<span>Shipping</span>
<span id="cart-shipping">
<?php if ($shippingCost == 0): ?>
<span style="color: var(--color-success);">FREE</span>
<span class="text-success">FREE</span>
<?php else: ?>
<?= formatCurrency($shippingCost) ?>
<?php endif; ?>
</span>
</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;
?>
<p style="font-size: 0.875rem; color: var(--color-primary); margin: 0.5rem 0;">
<i class="fas fa-truck"></i>
<p class="free-shipping-msg">
<i class="fas fa-truck"></i>
Add <?= formatCurrency($remaining) ?> more for FREE shipping!
</p>
<?php endif; ?>
<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 id="cart-total"><?= formatCurrency($total) ?></span>
</div>
checkout.php
+24 -25
View File
@@ -158,6 +158,7 @@ $metaDescription = 'Complete your coffee order with secure checkout.';
$canonicalUrl = 'https://tomsjavajive.com/checkout.php';
$metaRobots = "noindex, nofollow";
$suppressSchema = true;
$extraHead = '<link rel="stylesheet" href="/assets/css/checkout.css?v=' . filemtime(__DIR__ . '/assets/css/checkout.css') . '">';
require_once __DIR__ . '/includes/header.php';
?>
@@ -166,7 +167,7 @@ require_once __DIR__ . '/includes/header.php';
<h1 style="margin-bottom: 2rem;">Checkout</h1>
<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 -->
<div>
@@ -231,7 +232,7 @@ require_once __DIR__ . '/includes/header.php';
<?php endif; ?>
</div>
<div style="display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1rem;">
<div class="address-grid">
<div class="form-group">
<label class="form-label">City *</label>
<input type="text" name="city" class="form-input"
@@ -275,62 +276,60 @@ require_once __DIR__ . '/includes/header.php';
</div>
<!-- Order Summary -->
<div class="card" style="position: sticky; top: 100px;">
<div class="card checkout-summary">
<div class="card-header">
<h3 style="margin: 0;">Order Summary</h3>
</div>
<div class="card-body">
<!-- Cart Items -->
<div style="max-height: 250px; overflow-y: auto; margin-bottom: 1rem;">
<div class="checkout-items-preview">
<?php foreach ($cartItems as $item): ?>
<div style="display: flex; gap: 1rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border);">
<img src="<?= htmlspecialchars($item['image']) ?>" alt=""
style="width: 60px; height: 60px; object-fit: cover; border-radius: var(--radius-md);">
<div style="flex: 1;">
<p style="font-weight: 500; margin-bottom: 0.25rem;"><?= htmlspecialchars($item['name']) ?></p>
<p class="text-muted" style="font-size: 0.875rem;">
<?= formatCurrency($item['unit_price']) ?> x <?= $item['quantity'] ?>
</p>
<div class="checkout-item">
<img src="<?= htmlspecialchars($item['image']) ?>" alt=""
class="checkout-item-img">
<div class="checkout-item-info">
<p><?= htmlspecialchars($item['name']) ?></p>
<small><?= formatCurrency($item['unit_price']) ?> x <?= $item['quantity'] ?></small>
</div>
<div style="text-align: right;">
<strong><?= formatCurrency($item['total']) ?></strong>
<div class="checkout-item-total">
<?= formatCurrency($item['total']) ?>
</div>
</div>
<?php endforeach; ?>
</div>
<!-- Totals -->
<div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
<div class="checkout-summary-row">
<span>Subtotal</span>
<span><?= formatCurrency($subtotal) ?></span>
</div>
<div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
<div class="checkout-summary-row">
<span>Shipping</span>
<span>
<?php if ($shippingCost == 0): ?>
<span style="color: var(--color-success);">FREE</span>
<span class="text-success">FREE</span>
<?php else: ?>
<?= formatCurrency($shippingCost) ?>
<?php endif; ?>
</span>
</div>
<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><?= formatCurrency($total) ?></span>
</div>
<button type="submit" class="btn btn-primary btn-lg btn-block mt-2">
Continue to Payment
</button>
<a href="/cart.php" class="btn btn-secondary btn-block mt-1">
<i class="fas fa-arrow-left"></i> Back to Cart
</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
</p>
</div>