Как добавлять товар в корзину, jquery?

Question

[SilvestrVStolovoy]

Всем привет! Возникла такая проблема: Есть корзина для интернет магазина на jquery, но в нее почему-то всегда добавляется один и тот же товар. То есть если я добавляю товар в корзину с индивидуальной страницы товара, то все хорошо, работает как надо. Но у меня есть вывод товаров на главной странице магазина, и вот когда пытаюсь добавить товар именно с главной страницы, то независимо от выбранного товара всегда добавляется один и тот же. Подскажите пожалуйста, в чем проблема?

Вывод товара сделан циклом, форма для отправки инф о товаре выглядит так:

<form class="row g-3 form_buying_product" action="{% url 'basket_adding' %}">
{% csrf_token %}
    <div class="col-3">
        <input type="number" class="form-control number" name="number" min="1" value="1">
    </div>
    <div class="col-auto">
         <button type="submit" class="btn btn-warning submit_btn"
                                 data-product_id="{{ product_img.product.id }}"
                                 data-name="{{ product_img.product.title }}"
                                 data-price="{{ product_img.product.price }}"
         >в корзину</button>
    </div>
</form>

Вот так добавляется товар в корзину:

$(document).ready(function(){
    var form = $('.form_buying_product');

    function basketUpdating(product_id, nmb, is_delete){
        var data ={};
        data.product_id = product_id;
        data.nmb = nmb;
        var csrf_token = $('.form_buying_product [name="csrfmiddlewaretoken"]').val();
        data["csrfmiddlewaretoken"] = csrf_token;

        if (is_delete){
            data['is_delete'] = true
        }

        var url = form.attr("action");
        $.ajax({
            url: url,
            type: 'POST',
            data: data,
            cache: true,
            success: function (data) {
                if (data.products_total_nmb || data.products_total_nmb == 0){
                    $('#basket_total_nmb').text(data.products_total_nmb)
                    $('.basket-items ul').html("");
                    $.each(data.products, function(k, v){
                        $('.basket-items ul').append('<li>'+v.name+', '+v.nmb+' шт. '+' по '+v.price_per_item+' руб ' +
                      '<a class="delete-item" href="" data-product_id="'+v.id+'">X</a>'+
                        '</li>');
                    });
                }
            }
        })
    }
    form.on('submit', function(e){
        e.preventDefault();
        var nmb = $('.number').val();
        var submit_btn = $('.submit_btn');
        var product_id = submit_btn.data('product_id');
        var product_name = submit_btn.data('name');
        var product_price = submit_btn.data('price');

       basketUpdating(product_id, nmb, is_delete=false);

Comments

[Дима Долготер]

Привет. у тебя добавляется первый товар из списка. угадал?)

[SilvestrVStolovoy]

Дима Долготер, В точку :) Как я понял, надо сделать что-то вроде уникального id для каждого товара, просто пока не понял как это реализовать в коде

Answer 1

[Дима Долготер]

перепиши все.
вот твой html

<div class="row g-3 form_buying_product" >

    <div class="col-3">
        <input type="number" class="form-control number" name="number" min="1" value="1">
    </div>
    <div class="col-auto">
         <button type="submit" class="btn btn-warning submit_btn"
                                 data-product_id="{{ product_img.product.id }}"
                                 data-name="{{ product_img.product.title }}"
                                 data-price="{{ product_img.product.price }}"


         >в корзину</button>
    </div>
</div>

вот твой js

$(document).ready(function(){
 
    function basketUpdating(product_id, nmb, is_delete){
        var data ={};
        data.product_id = product_id;
        data.nmb = nmb;
        var csrf_token ={% csrf_token %}; // тут я напрямую вставил токен
        data["csrfmiddlewaretoken"] = csrf_token;

        if (is_delete){
            data['is_delete'] = true
        }

         
        $.ajax({
            url: ajax_url ,
            type: 'POST',
            data: data,
            cache: true,
            success: function (data) {
                if (data.products_total_nmb || data.products_total_nmb == 0){
                    $('#basket_total_nmb').text(data.products_total_nmb)
                    $('.basket-items ul').html("");
                    $.each(data.products, function(k, v){
                        $('.basket-items ul').append('<li>'+v.name+', '+v.nmb+' шт. '+' по '+v.price_per_item+' руб ' +
                      '<a class="delete-item" href="" data-product_id="'+v.id+'">X</a>'+
                        '</li>');
                    });
                }
            }
        })
    }
    $(".submit_btn").on('click', function(e){
        e.preventDefault();
        var nmb = $(this).closest(".row").find('.number').val();
         var product_id = $(this).data('product_id');
        var product_name =  $(this).data('name');
        var product_price =  $(this).data('price');
   var ajax_url =  $(this).data('url');
       basketUpdating(product_id, nmb, is_delete=false);

по сути поменял только
$(".submit_btn").on('click', function(e){
e.preventDefault();
var nmb = $(this).closest(".row").find('.number').val();
var product_id = $(this).data('product_id');
var product_name = $(this).data('name');
var product_price = $(this).data('price');
var ajax_url = $(this).data('url');
этот блок поставил чтоб брало инфу от конкретного блока а не первого

Comments

[SilvestrVStolovoy]

Теперь в консоли появилась ошибка "Uncaught SyntaxError: Unexpected token '%'" выдает он ее как раз на этой строке "var csrf_token ={% csrf_token %};"

[SilvestrVStolovoy]

Проблему решил, все отлично. Спасибо большое, все заработало как надо :)

[Дима Долготер]

SilvestrVStolovoy, хорошо что все хорошо)