购物车的简单页面
时间: 2023-07-30 21:06:10 浏览: 45
以下是一个简单的购物车页面的 HTML 和 CSS 代码示例:
```
<!DOCTYPE html>
<html>
<head>
<title>购物车</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
}
h1 {
margin: 0;
}
.container {
margin: 20px;
display: flex;
flex-wrap: wrap;
}
.item {
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
flex: 1 1 300px;
}
.item img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
.item h2 {
font-size: 1.2em;
margin: 0;
}
.item p {
margin: 0;
}
.item button {
background-color: #333;
color: #fff;
padding: 10px;
border: none;
cursor: pointer;
margin-top: 10px;
}
.item button:hover {
background-color: #555;
}
.cart {
background-color: #eee;
padding: 20px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: none;
}
.cart h2 {
margin-top: 0;
}
.cart ul {
list-style: none;
padding: 0;
margin: 0;
}
.cart li {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #ccc;
padding: 10px 0;
margin: 10px 0;
}
.cart li:last-child {
border-bottom: none;
}
.cart button {
background-color: #333;
color: #fff;
padding: 10px;
border: none;
cursor: pointer;
margin-top: 10px;
}
.cart button:hover {
background-color: #555;
}
</style>
</head>
<body>
<header>
<h1>购物车</h1>
</header>
<div class="container">
<div class="item">
<img src="https://via.placeholder.com/300x200" alt="Product Image">
<h2>商品名称</h2>
<p>商品描述</p>
<button>Add to Cart</button>
</div>
<div class="item">
<img src="https://via.placeholder.com/300x200" alt="Product Image">
<h2>商品名称</h2>
<p>商品描述</p>
<button>Add to Cart</button>
</div>
<div class="item">
<img src="https://via.placeholder.com/300x200" alt="Product Image">
<h2>商品名称</h2>
<p>商品描述</p>
<button>Add to Cart</button>
</div>
<div class="item">
<img src="https://via.placeholder.com/300x200" alt="Product Image">
<h2>商品名称</h2>
<p>商品描述</p>
<button>Add to Cart</button>
</div>
</div>
<div class="cart">
<h2>购物车</h2>
<ul>
<li>
<span>商品 1</span>
<span>$10.00</span>
</li>
<li>
<span>商品 2</span>
<span>$15.00</span>
</li>
<li>
<span>商品 3</span>
<span>$20.00</span>
</li>
</ul>
<button>Checkout</button>
</div>
<script>
const addToCartButtons = document.querySelectorAll('.item button');
const cart = document.querySelector('.cart');
const cartList = cart.querySelector('ul');
const checkoutButton = cart.querySelector('button');
let cartItems = [];
addToCartButtons.forEach(button => {
button.addEventListener('click', () => {
const item = button.parentNode;
const name = item.querySelector('h2').textContent;
const price = 10.00; // Replace with actual price
const existingItem = cartItems.find(cartItem => cartItem.name === name);
if (existingItem) {
existingItem.quantity++;
existingItem.price += price;
updateCart();
} else {
cartItems.push({
name,
price,
quantity: 1
});
updateCart();
}
});
});
function updateCart() {
cartList.innerHTML = '';
cartItems.forEach(item => {
const cartItem = document.createElement('li');
const name = document.createElement('span');
const price = document.createElement('span');
const quantity = document.createElement('span');
const removeButton = document.createElement('button');
name.textContent = item.name;
price.textContent = `$${item.price.toFixed(2)}`;
quantity.textContent = `x${item.quantity}`;
removeButton.textContent = 'Remove';
removeButton.addEventListener('click', () => {
const index = cartItems.indexOf(item);
cartItems.splice(index, 1);
updateCart();
});
cartItem.appendChild(name);
cartItem.appendChild(price);
cartItem.appendChild(quantity);
cartItem.appendChild(removeButton);
cartList.appendChild(cartItem);
});
if (cartItems.length > 0) {
cart.style.display = 'block';
} else {
cart.style.display = 'none';
}
}
checkoutButton.addEventListener('click', () => {
alert('Thank you for your purchase!');
cartItems = [];
updateCart();
});
</script>
</body>
</html>
```
此页面包含一个商品列表,每个商品都有一个“添加到购物车”按钮。当用户点击该按钮时,该商品将被添加到购物车中。
购物车位于页面底部,并显示已添加到购物车中的商品列表。用户可以从购物车中删除商品,或者单击“结账”按钮以完成购买并清空购物车。
请注意,此示例中的价格仅用于演示目的。在实际应用程序中,您可能需要使用某种付款处理系统来计算和收取实际价格。