Как генерировать часть страницы заново Django?

Question

[Александр Бондаренко]

Пытаюсь добавлять товар в корзину через ajax, без обновления страницы, с помощью форума получилось, но вот как обновлять данные в модальной корзине не могу понять, пытался просто вставить код заново, но он не генерируется джанго, Как можно заставить джанго сгенерировать джанго заново часть странички, или как можно получить через ajax данные и вставить их в нужные блоки?

$( ".add_to_cart" ).submit(function(e,addr) {
        e.preventDefault();
        var quantity = $(this).find('select option:selected').val();
        console.log(quantity);
        $.ajax({
        type: "POST",
        url: String($('.add_to_cart').data("action")),
        data: {csrfmiddlewaretoken: csrftoken, quantity: quantity
            },
        success: function() {
            $('.main-offer_list').html(`{% for item in cart %}
        {% with product=item.product %}
        <div class="main-offer_list-item">
            <div class="main-offer_list-info">
                <div class="main-offer_list-title">
                    {{ product.name }}
                </div>
                <div class="main-offer_list-calc">
                    {{ item.quantity }}
                </div>
            </div>
            <img src="{{ product.image.url }}" alt="">
            <div class="main-offer_list-close">
                <a class="delete-btn" data-delete="{% url 'cart:cart_remove' product.id %}"><img class="img-svg" src="{% static 'img/close.svg' %}" alt=""></a>
            </div>
        </div>
        {% endwith %}
        {% endfor %}`);
        } 
      });
});

Answer 1

[Дмитрий Сергеев]

Александр Бондаренко все достаточно просто.
1. Вы должны создать шаблон - блок, который бы будете вставлять на странице рендеринга корзины через тег {% include 'blocks/cart_items.html' %} например.
2. Создаете view который будет рендерить шаблон только blocks/cart_items.html в него передаете данные о корзине. По сути все что у вас в $('.main-offer_list').html( нужно выделить в отдельный файл шаблона.
3. Вставляете получеый код в нужное место.

<div class="cart-wrap">
    {% include 'blocks/cart_items.html' %}
</div>

$('.cart-wrap').html( 'тут дата которая пришла с сервера' );

Преимущество такого подхода в том, что у вас используется один и тот же шаблон, и чтобы изменить его не придётся править js, достаточно подправить в 1 месте, то есть сам подключаемый в корзину шаблон

Comments

[Александр Бондаренко]

Спасибо, а можно немного подробнее со 2 пунктом, как именно мне нужно будет вызывать это view после добавления через ajax?

[Александр Бондаренко]

создал view

def cart_gen(request):
    categories= Category.objects.all()
    products = Product.objects.filter(available=True)
    cart_product_form = CartAddProductForm()
    return render(request, 'shop/product/cart.html', {'product': products,'categories': categories,'cart_product_form': cart_product_form})

создал cart.html

{% for item in cart %}
        {% with product=item.product %}
        <div class="main-offer_list-item">
            <div class="main-offer_list-info">
                <div class="main-offer_list-title">
                    {{ product.name }}
                </div>
                <div class="main-offer_list-calc">
                    {{item.quantity}}
                </div>
            </div>
            <img src="{{ product.image.url }}" alt="">
            <div class="main-offer_list-close">
                <a class="delete-btn" data-delete="{% url 'cart:cart_remove' product.id %}"><img class="img-svg" src="{% static 'img/close.svg' %}" alt=""></a>
            </div>
        </div>
        {% endwith %}
{% endfor %}

[Дмитрий Сергеев]

Александр Бондаренко, не очень понял ваш вопрос. Напишите конкретно, что нужно объяснить

[Александр Бондаренко]

Я сделал всё по пунктам как Вы описали, только не могу понять как изменять в ajax success, чтобы корзина изменялась. Я сделал файл cart.html, сделал view заменил в странице участок кода на include, а что сделать с ajax?

$('.cart-wrap').html( 'тут дата которая пришла с сервера' );

Вот тут не понял немного

[Дмитрий Сергеев]

Александр Бондаренко, когда вам нужно обновить корзину, вы делаете запрос на созданный вами view он отдает вам шаблон. То что вы получите в методе success и нужно вставить в контейнер который оборачивает cart.html. Я же выше все написал

[Дмитрий Сергеев]

{% include 'blocks/cart_items.html' %}


$('.cart-wrap').html( 'тут дата которая пришла с сервера' );

[Александр Бондаренко]

Спасибо за помощь, пока не до конца понял, попробую разобраться, в любом случае огромное спасибо за помощь