Cart.html
{% extends 'main.html' %} {% load tailwind_tags %} {% load static %}
{% block title %} Shopping Cart | {% endblock title %}
{% block content %}
{% include 'navbar.html' %}
<div class="container mx-auto ">
<h1 class="mx-2 text-2xl font-semibold mt-6">Shopping Cart</h1>
<hr class="my-2" />
</div>
{% if cart %}
<div class="container mx-auto">
<div class="md:grid md:grid-cols-3">
{% for item in cart %}
<div class="mx-4 my-4 product_data border-2 py-4 px-4 ">
<div class="pr-4 containerimg1 mx-4 border-gray-300 px-4">
<img
src="{{ item.product.product_image1.url }}"
width="auto"
height="auto"
/>
</div>
<div class="">
<a href="{{ item.product.category }}/{{ item.product.slug }} " ><h1 class="py-2 text-lg font-semibold">
{{ item.product.name }}
</h1></a></div>
<div class="my-2">
<span class=" bg-gray-200 text-black py-2 rounded-full px-4 border border-[#242f6f]">
Final Price: ₹{{ item.product.selling_price | stringformat:'d' }}
</span> <strike>₹{{ item.product.original_price | stringformat:'d' }} </strike></div>
<div class="mt-4">
<input type="hidden" value="{{ item.product_id }}" class="prod_id">
{% csrf_token %}
{% if item.product.quantity >= item.product_qty %}
<div>
<p>Quantity:</p>
<span class="flex flex-row h-10 w-32 rounded-lg relative bg-transparent mt-1">
<button onClick="history.go(0);" data-action="decrement" type="button" class=" changeQuantity text-gray-600 bg-gray-300 hover:text-gray-700 hover:bg-gray-400 h-full w-20 rounded-l cursor-pointer outline-none">
<span class="m-auto text-2xl font-thin">−</span>
</button>
<input type="text" class=" qty_input focus:outline-none text-center w-full font-semibold text-md md:text-basecursor-default flex items-center outline-none" name="custom-input-number" value="{{ item.product_qty }}"></input>
<button onClick="history.go(0);" data-action="increment" type="button" class=" changeQuantity bg-gray-300 text-gray-600 hover:text-gray-700 hover:bg-gray-400 h-full w-20 rounded-r cursor-pointer">
<span class="m-auto text-2xl font-thin">+</span>
</button>
</span>
</div>
{% else %}
<div class="text-lg font-semibold">Out of stock </div>
{% endif %}
</div>
<p class="py-2 text-sm">
{{ item.product.small_description }}
</p>
<div>
<button
type="button"
onClick="history.go(0);"
class="deletecartitemBtn text-sm bg-[#242f6f] text-white py-3 px-5 rounded-full hover:bg-gray-200 hover:text-black"
> <i class="fa fa-trash"></i> Remove </button>
<button
type="button"
class="addToWishlist text-sm bg-[#242f6f] text-white py-3 px-5 rounded-full hover:bg-gray-200 hover:text-black"
> <i class="fa-solid fa-heart"></i> Add to Wishlist </button>
</div>
</div>
{% endfor %}
</div>
</div>
<div class="mt-8 text-center mx-[20%]">
<a href=" {% url 'checkoutpage' %}" class=" bg-[#ff8757] text-black hover:text-white py-3 rounded-full px-8 border border-gray-500 hover:bg-[#421806] text-lg">
Checkout
</a>
</div>
<hr class="my-4" />
<br><br>
{% else %}
<div class="text-lg font-semibold text-center mx-[20%]">
Your CART is Empty. Please Add product in your cart.
</div>
{% endif %}
<div class="mt-4 text-center mx-[20%]">
<a
href=" {% url 'index' %} "
class="text-xs bg-[#242f6f] text-white py-2 rounded-full px-4 hover:bg-gray-200 hover:text-black"
>Shopping Continue..</a>
</div>
<br />
<hr>
<br />
{% include 'homesupport.html' %} {% include 'footer.html' %}
{% endblock content %}
Cart.py
from django.http import JsonResponse
from django.shortcuts import render, redirect
from django.contrib import messages
from buyjoi.models import Product, Cart
from django.contrib.auth.decorators import login_required
from django.contrib.sessions.models import Session
def addtocart(request):
if request.method == 'POST':
prod_id = int(request.POST.get('product_id'))
product_check = Product.objects.get(id=prod_id)
if (product_check):
# Check if cart exists in the session, create one if not
if 'cart' not in request.session:
request.session['cart'] = {}
cart = request.session['cart']
# Check if the product is already in the cart
if str(prod_id) in cart:
return JsonResponse({'status': "Product Already in Cart"})
prod_qty = int(request.POST.get('product_qty'))
if product_check.quantity >= prod_qty:
# Add the product to the cart in the session
cart[str(prod_id)] = prod_qty
request.session.modified = True
return JsonResponse({'status': "Product added successfully"})
else:
return JsonResponse({'status': "Only " + str(product_check.quantity) + " quantity available"})
else:
return JsonResponse({'status': "No such product found"})
return redirect("/")
def viewcart(request):
if 'cart' in request.session:
cart = Cart('cart')
return render(request, 'cart.html', {'cart': cart})
else:
messages.error(request, "You don't have any product in your cart.")
return render(request, 'cart.html') # Render the template without passing the 'cart' variable
def updatecart(request):
if request.method == 'POST':
prod_id = int(request.POST.get('product_id'))
if (Cart.objects.filter(user=request.user, product_id=prod_id)):
prod_qty = int(request.POST.get('product_qty'))
cart = Cart.objects.get(product_id=prod_id, user=request.user)
cart.product_qty = prod_qty
cart.save()
return JsonResponse({'status': "Updated Successfully"})
return redirect('/')
def deletecartitem(request):
if request.method == 'POST':
prod_id = int(request.POST.get('product_id'))
if(Cart.objects.filter(user=request.user, product_id=prod_id)):
cartitem = Cart.objects.get(product_id=prod_id, user=request.user)
cartitem.delete()
return JsonResponse({'status:"Deleted Successfully"'})
return redirect('/')
cartcode.js
$(document).ready(function () {
$('.addToCartBtn').click(function (e) {
e.preventDefault();
var product_id = $(this).closest('.product_data').find('.prod_id').val();
var product_qty = $(this).closest('.product_data').find('.qty_input').val();
var token = $('input[name=csrfmiddlewaretoken]').val();
$.ajax({
method: "POST",
url: "/add-to-cart",
data: {
'product_id': product_id,
'product_qty': product_qty,
csrfmiddlewaretoken: token,
},
success: function (response) {
console.log(response);
alertify.success(response.status);
},
});
});
});