Hello!
Currently I am building an eCommerce website and while adding a “add to wish list”-functionality, I for some reason encounter this error in the console:
It is not really clear where in the code the return is HTML and not a JSON response. Could someone please help me out?
My JS code, using the Fetch API:
async function addToWishListFunction(e) {
e.preventDefault();
const singleProductId = e.currentTarget.dataset.singleProductId
console.log(singleProductId)
await fetch("", {
method: "POST",
headers: {
"Accept": "application/json",
"X-Requested-With": "XMLHttpRequest",
"X-CSRFToken": csrftoken,
},
body: JSON.stringify({ "products": singleProductId }),
})
.then(response => {
if (!response.ok) {
console.log("Response invalid")
} else {
console.log("Response is valid")
return response.json();
}
})
.then(data => {
console.log(data);
})
.catch(error => {
console.log(error)
})
}
The view:
@login_required(redirect_field_name="authapp:signin")
def addtowishlist(request):
if request.headers.get("X-Requested-With") == "XMLHttpRequest":
try:
posted_data = json.loads(request.body)
print(posted_data)
except json.JSONDecodeError:
return JsonResponse({"error": "Invalid JSON data"}, status=400)
wished_product = get_object_or_404(Wishlist, id=posted_data["products"])
if wished_product.products.filter(id=request.user.id).exists():
wished_product.products.remove(request.user)
print("removed")
return JsonResponse({"remove": "The product is removed"})
else:
wished_product.products.add(request.user)
print("Added")
return JsonResponse({"added": "The product was added to your wishlist"})
From the template:
<div class="yith-wcwl-add-to-wishlist">
<div class="yith-wcwl-add-button show">
<a href="{% url 'mainapp:addtowishlist' %}"><div class="add_to_wishlist" data-single-product-id = "{{ product.id }}"></div></a>
</div>
</div>
Model:
class Wishlist(models.Model):
customuser = models.ForeignKey(CustomUser, on_delete=models.CASCADE)
products = models.ForeignKey(Product, on_delete=models.CASCADE)
def __str__(self):
return self.products.product_name
