My Template
{% extends 'home.html' %}
{% load static %}
{% block content %}
<!-- BEGIN #checkout-cart -->
<div class="section-container" id="checkout-cart">
<!-- BEGIN container -->
<div class="container">
<!-- BEGIN checkout -->
<div class="checkout">
<form action="{% url 'checkoutinfo' %}" method="POST" name="form_checkout">
{% csrf_token %}
<!-- BEGIN checkout-header -->
<div class="checkout-header">
<!-- BEGIN row -->
<div class="row">
<!-- BEGIN col-3 -->
<div class="col-md-3 col-sm-3">
<div class="step active">
<a href="#">
<div class="number">1</div>
<div class="info">
<div class="title">Delivery Options</div>
<div class="desc">Lorem ipsum dolor sit amet.</div>
</div>
</a>
</div>
</div>
<!-- END col-3 -->
<!-- BEGIN col-3 -->
<div class="col-md-3 col-sm-3">
<div class="step">
<a href="checkout_info.html">
<div class="number">2</div>
<div class="info">
<div class="title">Shipping Address</div>
<div class="desc">Vivamus eleifend euismod.</div>
</div>
</a>
</div>
</div>
<!-- END col-3 -->
<!-- BEGIN col-3 -->
<div class="col-md-3 col-sm-3">
<div class="step">
<a href="checkout_payment.html">
<div class="number">3</div>
<div class="info">
<div class="title">Payment</div>
<div class="desc">Aenean ut pretium ipsum. </div>
</div>
</a>
</div>
</div>
<!-- END col-3 -->
<!-- BEGIN col-3 -->
<div class="col-md-3 col-sm-3">
<div class="step">
<a href="checkout_complete.html">
<div class="number">4</div>
<div class="info">
<div class="title">Complete Payment</div>
<div class="desc">Curabitur interdum libero.</div>
</div>
</a>
</div>
</div>
<!-- END col-3 -->
</div>
<!-- END row -->
</div>
<!-- END checkout-header -->
<!-- BEGIN checkout-body -->
<div class="checkout-body">
<div class="table-responsive">
<table class="table table-cart">
<thead>
<tr>
<th>Product Name</th>
<th class="text-center">Price</th>
<th class="text-center">Quantity</th>
<th class="text-center">Total</th>
</tr>
</thead>
<!-- Modify your table body like this -->
<!-- Modify your table body like this -->
<tbody>
{% for product_id, cart_item in cart.items %}
<tr>
<td class="cart-product">
<div class="product-img">
{% if cart_item.product %}
<img src="{{ cart_item.product.image.url }}" alt="{{ cart_item.product.title }}" />
<p>{{ cart_item.product.title }}</p>
{% else %}
Product details not found
{% endif %}
</div>
</td>
<td class="cart-price text-center">${{ cart_item.product.price }}</td>
<td class="cart-qty text-center">
<div class="cart-qty-input">
<a href="{% url 'increase_quantity' product_id=cart_item.product.id %}" class="qty-control left {% if cart_item.quantity == 1 %}enabled{% endif %}" data-click="decrease-qty" data-target="#qty"><i class="fa fa-minus"></i></a>
<input type="text" name="qty" value="{{ cart_item.quantity }}" class="form-control" id="qty" />
<a href="#" class="qty-control right {% if cart_item.quantity >= 10 %}enabled{% endif %}" data-click="increase-qty" data-target="#qty"><i class="fa fa-plus"></i></a>
</div>
<div class="qty-desc">1 to max order</div>
</td>
<td class="cart-total text-center">${{ cart_item.total }}</td>
</tr>
{% endfor %}
<tr>
<td class="cart-summary" colspan="4">
<div class="summary-container">
<div class="summary-row">
<div class="field">Cart Subtotal</div>
<div class="value">${{ cart_subtotal }}</div>
</div>
<div class="summary-row text-danger">
<div class="field">Free Shipping</div>
<div class="value">$0.00</div>
</div>
<div class="summary-row total">
<div class="field">Total</div>
<div class="value">${{ cart_total }}</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- END checkout-body -->
<!-- BEGIN checkout-footer -->
<div class="checkout-footer">
<a href="{% url 'arrivalproducts' %}" class="btn btn-white btn-lg pull-left">Continue Shopping</a>
<a href="{% url 'checkoutinfo' %}">
<button class="btn btn-inverse btn-lg p-l-30 p-r-30 m-l-10">Checkout</button>
</a>
</div>
<!-- END checkout-footer -->
</form>
</div>
<!-- END checkout -->
</div>
<!-- END container -->
</div>
<!-- END #checkout-cart -->
<!-- BEGIN #policy -->
<div id="policy" class="section-container p-t-30 p-b-30 bg-white">
<!-- BEGIN container -->
<div class="container">
<!-- BEGIN row -->
<div class="row">
<!-- BEGIN col-4 -->
<div class="col-md-4 col-sm-4">
<!-- BEGIN policy -->
<div class="policy">
<div class="policy-icon"><i class="fa fa-truck"></i></div>
<div class="policy-info">
<h4>Free Delivery Over $100</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!-- END policy -->
</div>
<!-- END col-4 -->
<!-- BEGIN col-4 -->
<div class="col-md-4 col-sm-4">
<!-- BEGIN policy -->
<div class="policy">
<div class="policy-icon"><i class="fa fa-shield"></i></div>
<div class="policy-info">
<h4>1 Year Warranty For Phones</h4>
<p>Cras laoreet urna id dui malesuada gravida. <br />Duis a lobortis dui.</p>
</div>
</div>
<!-- END policy -->
</div>
<!-- END col-4 -->
<!-- BEGIN col-4 -->
<div class="col-md-4 col-sm-4">
<!-- BEGIN policy -->
<div class="policy">
<div class="policy-icon"><i class="fa fa-user-md"></i></div>
<div class="policy-info">
<h4>6 Month Warranty For Accessories</h4>
<p>Fusce ut euismod orci. Morbi auctor, sapien non eleifend iaculis.</p>
</div>
</div>
<!-- END policy -->
</div>
<!-- END col-4 -->
</div>
<!-- END row -->
</div>
<!-- END container -->
</div>
<!-- END #policy -->
<script>
document.addEventListener("DOMContentLoaded", function() {
const decreaseButton = document.querySelector('[data-click="decrease-qty"]');
const increaseButton = document.querySelector('[data-click="increase-qty"]');
const quantityInput = document.getElementById('qty');
decreaseButton.addEventListener("click", function(e) {
e.preventDefault();
let currentQuantity = parseInt(quantityInput.value);
if (currentQuantity > 1) {
currentQuantity--;
quantityInput.value = currentQuantity;
}
});
increaseButton.addEventListener("click", function(e) {
e.preventDefault();
let currentQuantity = parseInt(quantityInput.value);
if (currentQuantity < 10) { // Change the limit to your desired maximum quantity
currentQuantity++;
quantityInput.value = currentQuantity;
}
});
});
</script>
{% endblock content %}```
My Views
class CheckOutCart(TemplateView):
template_name = ‘checkout_cart.html’
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
cart = self.request.session.get('cart', {})
item_total = {}
cart_total = 0
for product_id, cart_item in cart.items():
try:
product = Product.objects.get(pk=product_id)
item_total[product_id] = cart_item['quantity'] * product.price
cart_total += item_total[product_id]
cart_item['product'] = product
cart_item['total'] = item_total[product_id]
except Product.DoesNotExist:
cart_item['product'] = None
cart_item['total'] = 0
context['cart'] = cart
context['cart_total'] = cart_total
context['parent_categories'] = ParentCategory.objects.all()
context['categories'] = Category.objects.all()
return context
def increase_quantity(request, product_id):
# Retrieve the cart from the session
cart = request.session.get(‘cart’, {})
cart_item = cart.get(str(product_id))
if cart_item and cart_item['quantity'] > 10:
cart_item['quantity'] += 1
request.session['cart'] = cart
return redirect('checkoutcart')
def decrease_quantity(request, product_id):
# Retrieve the cart from the session
cart = request.session.get(‘cart’, {})
cart_item = cart.get(str(product_id))
if cart_item and cart_item['quantity'] > 1:
cart_item['quantity'] -= 1
request.session['cart'] = cart
return redirect('checkoutcart')
My Urls
path('applewatch/', views.AppleWatch.as_view(), name= 'applewatch'),
path('increase_quantity/<int:product_id>/', views.increase_quantity, name='increase_quantity'),
path('decrease_quantity/<int:product_id>/', views.decrease_quantity, name='decrease_quantity'),