前言
今天我们来剖析一个精心设计的家具商店购物车页面，这个页面不仅美观大方，还具备丰富的交互功能。让我们一步步拆解它的设计理念和技术实现！
页面展示
页面整体结构
这个购物车页面采用了经典的电商布局模式：
...
...
这种结构清晰明了，用户一眼就能理解页面的组成。就像走进一家实体店一样：招牌(header)、促销海报(banner)、商品展示区(container)和出口信息(footer)。
设计亮点分析
1. 优雅的色彩方案
使用了紫色和金色作为主色调，既显高贵又不失现代感：
:root {
--primary-purple: #673ab7;
--secondary-gold: #d4af37;
--dark-bg: #1a1a2e;
--light-bg: #f8f9fa;
}
紫色代表奢华，金色象征品质，完美契合家具商店的定位。这种配色方案就像为页面穿上了”高级定制西装”！
2. 响应式设计
页面在多种设备上都能完美展示：
@media (max-width: 768px) {
.cart-container {
grid-template-columns: 1fr;
}
/* 其他移动端优化 */
}
在小屏幕上，购物车布局会自动调整为单列，确保在手机上也能轻松操作。这就像把家具店”缩小”放进用户口袋！
3. 精美的横幅设计
顶部横幅采用了巧妙的CSS技巧：
.banner::before {
content: "";
position: absolute;
/* 渐变和斜线图案 */
background:
linear-gradient(135deg, transparent 0%, transparent 50%, var(--dark-bg) 50%),
repeating-linear-gradient(-45deg, var(--secondary-gold), var(--secondary-gold) 5px, transparent 5px, transparent 10px);
}
这种设计创造出类似高档家具包装纸的纹理效果，视觉上既专业又精致。
购物车功能实现
1. 商品展示与操作
每个商品项都包含详细信息和控制元素：
...$165.00$165.00
2. 动态计算逻辑
JavaScript负责所有计算逻辑：
// 更新购物车总价
function updateCartTotals() {
const subtotal = cart.items.reduce((total, item) => {
return total + (item.price * item.quantity);
}, 0);
const shippingCost = parseFloat(shippingOption.dataset.cost);
const total = subtotal + shippingCost - cart.couponValue;
cartSubtotal.textContent = subtotal.toFixed(2);
cartTotal.textContent = total.toFixed(2);
}
这种实现方式确保价格计算实时准确，就像有个”数学天才”在后台默默工作！
3. 交互反馈
当用户移除商品时，有平滑的动画效果：
itemElement.style.opacity = '0';
setTimeout(() => {
itemElement.remove();
updateCartCount();
}, 300);
这种细节处理让用户操作有明确的视觉反馈，就像商品真的被”移出”购物车一样。
用户体验优化
1. 空购物车状态
当购物车清空时，页面会显示友好的提示：
Your cart is empty
Add items to continue shopping
这避免了用户面对空白页面的困惑，就像店员友好地提醒：“您的购物车空啦，看看新品吧！”
2. 运费选项
提供多种运费选择，默认选中免费选项：
这种设计既符合商业策略（鼓励用户达到免邮门槛），又提升了用户体验。
页面实现的全部代码
Shopping Cart - Furniture Store
:root {
--primary-purple: #673ab7;
--secondary-gold: #d4af37;
--dark-bg: #1a1a2e;
--light-bg: #f8f9fa;
--text-dark: #333;
--text-light: #fff;
--success: #28a745;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f5f5f5;
color: var(--text-dark);
line-height: 1.6;
}
/* Header Styles */
header {
background-color: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
position: sticky;
top: 0;
z-index: 100;
}
.top-nav {
background-color: var(--dark-bg);
padding: 0.5rem 0;
text-align: center;
color: var(--text-light);
font-size: 0.9rem;
}
.top-nav p {
margin: 0;
}
.main-nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 5%;
}
.logo {
color: var(--primary-purple);
font-weight: bold;
font-size: 1.8rem;
text-decoration: none;
}
.search-bar {
flex-grow: 1;
margin: 0 2rem;
}
.search-bar input {
width: 100%;
padding: 0.7rem 1rem;
border: 1px solid #ddd;
border-radius: 50px;
font-size: 0.95rem;
}
.nav-icons {
display: flex;
gap: 1.5rem;
}
.nav-icons a {
color: var(--text-dark);
text-decoration: none;
font-size: 1.2rem;
position: relative;
}
.nav-icons .cart-icon span {
background-color: var(--primary-purple);
color: white;
font-size: 0.7rem;
position: absolute;
top: -8px;
right: -8px;
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
/* Banner Styles */
.banner {
background: linear-gradient(rgba(26, 26, 46, 0.9), rgba(26, 26, 46, 0.9)),
url('https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?auto=format&fit=crop&w=1350&q=80');
background-size: cover;
background-position: center;
padding: 2.5rem;
color: white;
text-align: center;
position: relative;
margin-bottom: 3rem;
}
.banner::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
linear-gradient(135deg, transparent 0%, transparent 50%, var(--dark-bg) 50%),
repeating-linear-gradient(-45deg, var(--secondary-gold), var(--secondary-gold) 5px, transparent 5px, transparent 10px);
background-size: 200% 200%, cover;
opacity: 0.1;
}
.banner h1 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
position: relative;
z-index: 2;
}
.banner p {
font-size: 1.1rem;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
position: relative;
z-index: 2;
}
/* Main Content */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.cart-container {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
margin-bottom: 3rem;
}
@media (max-width: 768px) {
.cart-container {
grid-template-columns: 1fr;
}
}
.cart-items {
background: white;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
overflow: hidden;
}
.cart-header {
display: grid;
grid-template-columns: 3fr 1fr 1fr 1fr;
padding: 1rem 1.5rem;
background-color: var(--light-bg);
font-weight: bold;
border-bottom: 1px solid #eee;
}
.cart-item {
display: grid;
grid-template-columns: 3fr 1fr 1fr 1fr;
align-items: center;
padding: 1.5rem;
border-bottom: 1px solid #eee;
}
.item-details {
display: flex;
align-items: center;
}
.item-image {
width: 80px;
height: 80px;
border-radius: 5px;
overflow: hidden;
margin-right: 1rem;
background-color: #f5f5f5;
}
.item-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.item-info h3 {
font-size: 1.1rem;
margin-bottom: 0.3rem;
}
.item-info p {
color: #666;
font-size: 0.95rem;
}
.item-price, .item-subtotal {
font-weight: 600;
color: var(--text-dark);
}
.quantity-control {
display: flex;
align-items: center;
}
.quantity-btn {
width: 28px;
height: 28px;
border: 1px solid #ddd;
background: none;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
display: flex;
justify-content: center;
align-items: center;
}
.quantity-input {
width: 45px;
text-align: center;
border: 1px solid #ddd;
margin: 0 8px;
padding: 4px;
border-radius: 4px;
font-size: 1rem;
}
.remove-btn {
background: none;
border: none;
color: #999;
cursor: pointer;
transition: color 0.3s;
font-size: 0.9rem;
display: flex;
align-items: center;
margin-left: 10px;
}
.remove-btn:hover {
color: #ff5252;
}
.remove-btn i {
margin-right: 5px;
}
/* Cart Summary */
.cart-summary {
background: white;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
padding: 1.5rem;
height: fit-content;
}
.cart-summary h2 {
font-size: 1.4rem;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid #eee;
}
.summary-row {
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
padding: 0.5rem 0;
}
.total-row {
font-weight: bold;
font-size: 1.1rem;
padding-top: 1rem;
border-top: 1px solid #eee;
margin-top: 0.5rem;
}
.coupon-section {
margin: 1.5rem 0;
}
.coupon-section h3 {
font-size: 1.1rem;
margin-bottom: 0.5rem;
color: #555;
}
.coupon-input {
display: flex;
gap: 0.5rem;
}
.coupon-input input {
flex-grow: 1;
padding: 0.7rem 1rem;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 0.95rem;
}
.coupon-input button {
background: var(--dark-bg);
color: white;
border: none;
border-radius: 4px;
padding: 0 1.5rem;
cursor: pointer;
transition: background 0.3s;
}
.coupon-input button:hover {
background: #333;
}
.shipping-section {
margin-bottom: 1.5rem;
}
.shipping-section h3 {
font-size: 1.1rem;
margin-bottom: 0.5rem;
color: #555;
}
.shipping-options {
border: 1px solid #eee;
border-radius: 4px;
padding: 0.5rem;
}
.shipping-option {
margin-bottom: 0.5rem;
}
.shipping-option:last-child {
margin-bottom: 0;
}
.checkout-btn {
width: 100%;
padding: 1rem;
background-color: var(--primary-purple);
color: white;
border: none;
border-radius: 4px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s;
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
}
.checkout-btn:hover {
background-color: #5833a0;
}
/* Cart Actions */
.cart-actions {
display: flex;
justify-content: space-between;
padding: 1.5rem;
background: white;
border-top: 1px solid #eee;
}
.action-btn {
padding: 0.7rem 1.5rem;
border-radius: 4px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s;
}
.update-btn {
background-color: var(--dark-bg);
color: white;
border: none;
}
.update-btn:hover {
background-color: #333;
}
.continue-btn {
background: none;
border: 1px solid #ddd;
color: var(--text-dark);
}
.continue-btn:hover {
background-color: #f8f8f8;
border-color: #ccc;
}
/* Footer */
footer {
background-color: var(--dark-bg);
color: var(--text-light);
padding: 3rem 0 1.5rem;
margin-top: 3rem;
}
.footer-content {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.footer-column h3 {
margin-bottom: 1.2rem;
position: relative;
padding-bottom: 0.5rem;
}
.footer-column h3::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 2px;
background-color: var(--secondary-gold);
}
.footer-column p, .footer-column a {
color: #aaa;
font-size: 0.95rem;
margin-bottom: 0.5rem;
text-decoration: none;
transition: color 0.3s;
}
.footer-column a:hover {
color: white;
}
.copyright {
text-align: center;
padding-top: 2rem;
color: #777;
font-size: 0.9rem;
}
/* Responsive adjustments */
@media (max-width: 992px) {
.footer-content {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.main-nav {
flex-wrap: wrap;
}
.logo {
order: 1;
}
.search-bar {
order: 3;
width: 100%;
margin: 1rem 0 0;
}
.nav-icons {
order: 2;
}
.cart-header, .cart-item {
grid-template-columns: 1fr;
gap: 1rem;
}
.cart-header {
display: none;
}
.item-details {
margin-bottom: 1rem;
}
.item-price, .quantity-control, .item-subtotal {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0.5rem 0;
border-bottom: 1px solid #eee;
}
.cart-actions {
flex-direction: column;
gap: 1rem;
}
.action-btn {
width: 100%;
text-align: center;
}
}
FREE SHIPPING ON ORDERS OVER $99
PRODUCT
PRICE
QUANTITY
TOTAL
Vestibulum suscipit
Modern Chair Design
$165.00
$165.00
Vestibulum dictum magna
Designer Lamp
$50.00
$50.00
CART SUMMARY
SUBTOTAL
$215.00
SHIPPING
Calculated at next step
TOTAL
$215.00
COUPON
Enter your coupon code if you have one.
SHIPPING OPTIONS
Calculate Shipping
document.addEventListener('DOMContentLoaded', function() {
// 初始化购物车状态
const cart = {
items: [
{ id: '1', name: 'Vestibulum suscipit', price: 165.00, quantity: 1 },
{ id: '2', name: 'Vestibulum dictum magna', price: 50.00, quantity: 1 }
],
shippingCost: 0,
couponValue: 0
};
// DOM元素缓存
const cartItemsContainer = document.querySelector('.cart-items');
const cartSubtotal = document.getElementById('cart-subtotal');
const cartTotal = document.getElementById('cart-total');
const shippingCostDisplay = document.getElementById('shipping-cost');
const cartCount = document.getElementById('cart-count');
// 初始化UI
updateCartCount();
updateCartTotals();
// 数量控制事件委托
cartItemsContainer.addEventListener('click', function(e) {
const target = e.target;
// 加号按钮
if (target.classList.contains('plus')) {
const input = target.parentElement.querySelector('.quantity-input');
input.value = parseInt(input.value) + 1;
updateItemQuantity(input);
}
// 减号按钮
if (target.classList.contains('minus')) {
const input = target.parentElement.querySelector('.quantity-input');
if (parseInt(input.value) > 1) {
input.value = parseInt(input.value) - 1;
updateItemQuantity(input);
}
}
// 移除按钮
if (target.closest('.remove-btn')) {
const itemElement = target.closest('.cart-item');
const itemId = itemElement.dataset.id;
// 从购物车移除
cart.items = cart.items.filter(item => item.id !== itemId);
updateCartTotals();
// 移除UI元素
itemElement.style.opacity = '0';
setTimeout(() => {
itemElement.remove();
updateCartCount();
// 如果购物车为空，显示空状态
if (cart.items.length === 0) {
cartItemsContainer.innerHTML = `
Your cart is empty
Add items to continue shopping
`;
}
}, 300);
}
});
// 输入框数量变化监听
cartItemsContainer.addEventListener(‘input’, function(e) {
if (e.target.classList.contains(‘quantity-input’)) {
const input = e.target;
if (input.value item.id === itemId);
if (item) {
item.quantity = quantity;
// 更新小计显示
const itemTotalEl = itemElement.querySelector(‘.item-total’);
if (itemTotalEl) {
itemTotalEl.textContent = (item.price * quantity).toFixed(2);
}
updateCartTotals();
}
}
// 更新购物车总价
function updateCartTotals() {
// 计算小计
const subtotal = cart.items.reduce((total, item) => {
return total + (item.price * item.quantity);
}, 0);
// 获取运费选项
const shippingOption = document.querySelector(‘input[name=”shipping”]:checked’);
const shippingCost = parseFloat(shippingOption.dataset.cost);
// 计算总价
const total = subtotal + shippingCost – cart.couponValue;
// 更新UI
cartSubtotal.textContent = subtotal.toFixed(2);
cartTotal.textContent = total.toFixed(2);
shippingCostDisplay.textContent = shippingCost === 0 ?
‘Calculated at next step’ :
`$${shippingCost.toFixed(2)}`;
// 更新右上角购物车数量
updateCartCount();
}
// 更新购物车数量显示
function updateCartCount() {
const itemCount = cart.items.reduce((count, item) => {
return count + item.quantity;
}, 0);
cartCount.textContent = itemCount;
}
// 运费选项变更监听
const shippingOptions = document.querySelectorAll(‘input[name=”shipping”]’);
shippingOptions.forEach(option => {
option.addEventListener(‘change’, updateCartTotals);
});
// 更新购物车按钮
const updateBtn = document.querySelector(‘.update-btn’);
if (updateBtn) {
updateBtn.addEventListener(‘click’, function() {
alert(‘Your cart has been updated!’);
});
}
});
