写一个cart.html 和checkout.html
时间: 2024-01-05 18:39:21 浏览: 44
好的,以下是一个简单的 `cart.html` 和 `checkout.html` 模板代码,用于展示购物车页面和结算页面:
`cart.html`
```html
{% extends 'base.html' %}
{% block content %}
<h1>Shopping Cart</h1>
<table class="table table-hover">
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
{% for item in cart_items %}
<tr>
<td>{{ item.product.name }}</td>
<td>{{ item.quantity }}</td>
<td>{{ item.product.price }}</td>
<td>{{ item.product.price * item.quantity }}</td>
</tr>
{% endfor %}
<tr>
<td colspan="3">Total:</td>
<td>{{ total_price }}</td>
</tr>
</tbody>
</table>
<a href="{% url 'checkout' %}" class="btn btn-primary">Checkout</a>
{% endblock %}
```
以上代码中,我们使用了 Bootstrap 的表格和按钮样式,展示当前用户购物车中的商品信息和总价。在页面底部,我们提供了一个结算按钮,链接到 `checkout` 页面。
`checkout.html`
```html
{% extends 'base.html' %}
{% block content %}
<h1>Checkout</h1>
<table class="table table-hover">
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
{% for item in cart_items %}
<tr>
<td>{{ item.product.name }}</td>
<td>{{ item.quantity }}</td>
<td>{{ item.product.price }}</td>
<td>{{ item.product.price * item.quantity }}</td>
</tr>
{% endfor %}
<tr>
<td colspan="3">Total:</td>
<td>{{ total_price }}</td>
</tr>
</tbody>
</table>
<form method="post">
{% csrf_token %}
<button type="submit" class="btn btn-success">Place Order</button>
</form>
{% endblock %}
```
以上代码中,我们同样使用了 Bootstrap 的表格样式,展示当前用户购物车中的商品信息和总价。在页面底部,我们提供了一个提交按钮,用于触发结算操作。在表单中我们添加了 `{% csrf_token %}` 以确保表单安全性。