Cart in Django is not updating in frontend but working fine in database

I'm making an ecom site. When customer select Product size from dropdown boxes, it sends the correct selected size in backend but showing default value in frontend.

My HTML code for this:

<select class="form-select form-select-sm" id="size-cart{{ product.id }}">
{% for key, value in sizes.items %}
{% if key == product.id %}
  <option selected value="{{ value.id }}">{{ value.size }}</option>
{% endif %}
{% endfor %}
{% for size in all_sizes %}
  <option value="{{ size.id }}">{{ size.size }}</option>
{% endfor %}
</select>

Frontend related code:

<script>
$(document).on('click', '.update-cart', function(e){
  e.preventDefault();
  var product_id = $(this).data('index');
  var product_size = $('#size-cart'+ product_id).val();

  console.log("Size: ", product_size);

  $.ajax({
    type: 'POST',
    url : "{% url 'cart_update' %}",
    data: {
      product_id : $(this).data('index'),
      product_qty: $('#select' + product_id + ' option:selected').text(),
      product_size: product_size,
      csrfmiddlewaretoken: '{{ csrf_token }}',
      action: 'post'
    },
    success: function(json) {
      location.reload();
    },

    error: function(xhr, errmsg, err){

    }
  });
})
</script>

Related code in views.py file

def cart_update(request):
    cart = Cart(request)
    if request.POST.get('action') == 'post':
        print("request POST data:", request.POST)
        product_id = int(request.POST.get('product_id'))
        product_qty = int(request.POST.get('product_qty'))
        size_id = int(request.POST.get('product_size'))
        selected_size = get_object_or_404(Product_Size, id=size_id)
        print("Selected size: ", selected_size)

        

        cart.update(product=product_id, quantity = product_qty, size=selected_size)

        response = JsonResponse({'qty': product_qty})
        messages.success(request, ("Your cart has been updated...."))
        
        return response

Related code in cart.py in Cart class:

   def update(self, product, quantity, size):
        prdct = get_object_or_404(Product, id=product)
        #print(f"Found product: {prdct}")

        product_id = str(prdct.id)
        product_qty = int(quantity)

        print("Size passed in cart.update ", size)

    
        

        if product_id in self.cart:

            self.cart[product_id]['quantity'] = product_qty
            if size:
                self.cart[product_id]['size']= size.size
                print(f"Updated cart: {self.cart[product_id]['size']}")
            else:
                self.cart[product_id]['size']= None

            self.session['cart'] = self.cart
            self.session.modified = True
            print("session updated: ", self.session.get('cart'))

        if self.request.user.is_authenticated:

            current_user = Profile.objects.filter(user__id=self.request.user.id)
            carty = str(self.cart)
            carty = carty.replace("\'", "\"")
            current_user.update(old_cart=str(carty))

        return self.cart

In the print() in cart.update() I'm getting the correct info like which dropdown I selected. And also in Ajax, selected size is passed correctly. I selected xxl size

I selected xxl size After clicking update button it remains M-32 again

After clicking update button it remains M-32 again. It works perfectly for quantity. How to solve this?

Try the following:

<select class="form-select form-select-sm" id="size-cart{{ product.id }}">
{% for key, value in sizes.items %}
{% if key == product.id %}
  <option selected value="{{ value.id }}">{{ value.size }}</option>
{% else %}
  <option value="{{ value.id }}">{{ value.size }}</option>
{% endif %}
{% endfor %}
{% for size in all_sizes %}
  <option value="{{ size.id }}">{{ size.size }}</option>
{% endfor %}
</select>

Not sure, but it looks like you are asking the HTML to have only the correct product.id to be selected, but that conditional is bypassed if it doesn't match. But what then?

This code is working correct.

<select class="form-select form-select-sm" id="size-cart{{ product.id }}">
{% for key, value in sizes.items %}
{% if key == product.id|slugify %}
  <option selected>{{ value }}</option>
{% endif %}
{% endfor %}

{% for size in all_sizes %}
<option value="{{size.id}}">{{ size.size }}</option>
{% endfor %}
</select>
Back to Top