Почему ajax не работает в первый раз с JsonResponse Django / Ajax

Question

Я добавляю свои товары в корзину, используйте кнопку с product.id.Попытка добавления в корзину без обновления страницы, и этот код работает, но не работает с первого раза, нужно обновить, после обновления это работает хорошо.

<a href="javascript:void(0);" class="add_to_cart" data-id="{{ product.id }}"><button>Add in the cart</button></a>

это мой URL

url(r'^cart/create/$', views.cart_create, name='cart_create'),

мойметод return JsonResponse, длина корзины и общая стоимость

def cart_create(request):
    cart = Cart(request)
    product_id = request.GET.get('product_id')
    product = Product.objects.get(id=product_id)
    cart.add(product=product)

    return JsonResponse({'cart_length':cart.get_length(), 'cart_total':cart.get_total_price()})

Ajax работает, но не первый раз (нужно обновить страницу) после добавления первого товара, работает хорошо без обновления

$(document).ready(function(){
    $(".add_to_cart").click(function(){
        product_id = $(this).attr("data-id")
        data = {
            product_id: product_id,
        },

        $.ajax({
            type: "GET",
            url: '{% url "cart:cart_create" %}',
            data: data,
            success: function(data){
                $(".cart_count").html(data.cart_length + " товаров " + data.cart_total + " ₽")
            },
        });
    });
});

header

{% if cart|length > 0 %}
    Our cart:

    <a href="{% url 'cart:cart_show' %}" class="cart_count">
        {{ cart.get_length }} products {{ cart.get_total_price }}
    </a>
{% else %}
    <a href="{% url 'cart:cart_show' %}">Cart empty</a>
{% endif %}

Server return "GET /cart/create/?product_id=1 HTTP/1.1" 200 after click.

И это работает, но не отображается в первый раз в шапке.Пожалуйста, помогите мне

Я понял, что если я уберу блок, если {% if cart|length > 0 %}{% else %}{% endif %} и оставлю только {{ cart.get_length }} products {{ cart.get_total_price }} ₽, он будет работать