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
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>