How can add product to the cart using ajax in django?

Question

Problem I want to add the product to the cart using ajax so that the page is not reloaded or refreshed and a popup is shown that the product is added to the cart.

Script

$(document).on("click",".Id_submit",function(event){
      event.preventDefault();
      var selector = $(this).closest(".productID")
      console.log(selector.find("form").attr('action'))
      $.ajax({
        type : 'POST',
        url: selector.find("form").attr('action'),
        success: function()
        {
          alert("Product added to cart")
        }
      });

html

<form id='transactionIDValue' class="d-inline" method="post">
              {{cart_product_form}}
              {% csrf_token %}
              <input type="submit" class="btn btn-primary shadow px-5 py-2 Id_submit" value="Add To Cart">
              
</form>

views.py

@require_POST
def cart_add(request, product_id):
    cart = Cart(request)
    product = get_object_or_404(transactions, id=product_id)
    form = CartAddProductForm(request.POST)
    if form.is_valid():
        cd = form.cleaned_data
        cart.add(product=product, quantity=cd['quantity'])
    print(cart)

    # request.session['items_total'] = cart.product.count()
    return HttpResponse('success')

urls.py

extra_patterns = [
    path('add/carts/<int:product_id>/', views.cart_add, name='cart_add'),
]

urlpatterns=[
   
    path ('add/',include(extra_patterns)),
]

Error This is the errror I'm facing Forbidden (CSRF token missing or incorrect.): /cart/add/add/carts/16/ The issue I'm facing is that using the script it goes the cart url but the product is not added and in the console it shows that the url is forbidden. So, can someone help me with this issue please.

score 1 · Accepted Answer · answered Jul 02 '21 at 07:54

1

There are a couple of ways of doing this.

A lot of people will recommend just adding the decorator @csrf_exempt to the view like:

@require_POST
@csrf_exempt
def cart_add(request, product_id):
    ...

See here on why this is a bad idea generally, but you can draw your own conclusions in how you want to protect your app.

The best thing to do is to submit the csrf_token field value with the js:

$(document).on("click",".Id_submit",function(event){
      event.preventDefault();
      var selector = $(this).closest(".productID")
      console.log(selector.find("form").attr('action'))
      const form_data = {
        csrfmiddlewaretoken: $('#transactionIDValue input[name="csrfmiddlewaretoken"]').val()
      }
      $.ajax({
        type : 'POST',
        url: selector.find("form").attr('action'),
        data: form_data,
        success: function()
        {
          alert("Product added to cart")
        }
      });

answered Jul 02 '21 at 07:54

Tom Hamilton Stubber

729
1
5
15

Is this ```{{cart_product_form}}``` making an issue, because quantity value is not getting cart_add views function and the product is not added properly. – Muhammad Usama Naveed Jul 02 '21 at 08:53
yes ```{{cart_product_form}}``` is not working due to which it never adds the product to the cart and always show the previous products in the cart. – Muhammad Usama Naveed Jul 02 '21 at 09:11
But the request succeeds yes? `200` response? – Tom Hamilton Stubber Jul 02 '21 at 10:00
yes but the value is from ```cart_product_form``` is not added – Muhammad Usama Naveed Jul 02 '21 at 10:02
In this it never enters the form validation check in the cart_add function in views – Muhammad Usama Naveed Jul 02 '21 at 10:04

How can add product to the cart using ajax in django?

1 Answers1