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:
+24
-25
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user