I have problem with my ecommerce project. When i try to add item to the cart I get this error. But item is in the cart and I get this problem only in my console. Can you please help me get rid of this error?
html code - https://i.sstatic.net/LCns9.png
{% for p in products %}
<div class="bg-white h-[400] w-[400]">
<div class=" flex bg-color1 text-sm text-white absolute p-2 m-4 rounded-full ">New</div>
<img class="w-4/5 flex mx-auto mt-2" src={{ p.image.url }} alt="">
<p class=" my-2 text-center text-sm">{{ p.category }}</p>
<a href={% url 'core:product-detail' p.pid %} class="my-2 flex items-center justify-center text-color1 font-medium text-xl">{{ p.title }}</a>
<div class="flex justify-center text-center mb-2">
<span class="shop__price">{{ p.price }} Kč</span>
<span class="text-sm line-through font-sm ml-2 text-color2">29.99 Kč</span>
</div>
<div class="add-cart flex justify-center text-center mb-2 ">
<input type="hidden" value="{{ p.id }}" class="product-id-{{ p.id }}">
<input type="hidden" value="{{ p.title }}" class="product-title-{{ p.id }}">
<input type="hidden" value="{{ p.image.url }}" class="product-image-{{ p.id }}">
<input type="hidden" value="{{ p.price }}" class="product-price-{{ p.id }}">
<input type="hidden" value="{{ p.pid }}" class="product-pid-{{ p.id }}">
<input type="hidden" value="1" class="product-qt-{{ p.id }}">
<button class="add-to-cart-btn flex justify-center text-center mb-2" data-index="{{ p.id }}">
<a type="submit" id="add_to_cart" class="pointer inline-block bg-color1 text-white px-3 py-2 rounded-md font-medium transition hover:bg-color2 button">Add To Cart</a>
</button>
</div>
</div>
{% endfor %}
js code - https://i.sstatic.net/6NE7L.png
$("#add_to_cart, .add-to-cart-btn").on("click", function(){
let this_val = $(this)
let index = this_val.attr('data-index')
let product_qt = $(".product-qt-" + index).val()
let product_title = $(".product-title-" + index).val()
let product_id = $(".product-id-" + index).val()
let product_price = $(".product-price-" + index).val()
let product_image = $(".product-image-" + index).val()
let product_pid = $(".product-pid-" + index).val()
$.ajax({
url: '/add-to-cart',
data: {
'id': product_id,
'pid': product_pid,
'qt' : product_qt,
'title' : product_title,
'price' : product_price,
'image' : product_image,
},
dataType: 'json',
beforeSend: function(){
console.log("addind the product")
},
success:function(response){
console.log("product added")
$(".cart-items-count").text(response.totalcartitems)
}
})
})
view / function - https://i.sstatic.net/mja5v.png
def add_to_cart(request):
cart_product = {}
cart_product[str(request.GET["id"])] = {
'title':request.GET['title'],
'qt':request.GET['qt'],
'price':request.GET['price'],
'image':request.GET['image'],
'pid':request.GET['pid'],
}
if 'cart_data_obj' in request.session:
if str(request.GET["id"]) in request.session['cart_data_obj']:
cart_data = request.session['cart_data_obj']
cart_data[str(request.GET['id'])]['qt'] = int(cart_product[str(request.GET["id"])]['qt'])
cart_data.update(cart_data)
request.session['cart_data_obj'] = cart_data
else:
cart_data = request.session['cart_data_obj']
cart_data.update(cart_product)
request.session['cart_data_obj'] = cart_data
else:
request.session['cart_data_obj'] = cart_product
return JsonResponse({"data":request.session['cart_data_obj'], 'totalcartitems': len(request.session['cart_data_obj']) })
VScode/ console - https://i.sstatic.net/aufFg.png
browser/ console - https://i.sstatic.net/hcwMm.png
error detail - https://i.sstatic.net/gEV1Y.png