Как изменить количество товара на сайте электронной коммерции django? DJANGO

Ошибка не возникает. Количество меняется только в первом товаре, даже если я нажимаю стрелку второго товара, количество первого товара меняется. cart.js

var changeQ = document.getElementsByClassName('increase')


for (i = 0; i < changeQ.length; i++) {
    changeQ[i].addEventListener('click', function(){
        var productId = this.dataset.product
        var action = this.dataset.action
        console.log('productId:', productId, 'Action:', action)
        
        
        if (action == 'plus'){
            Increase(productId, action)
        }
        else if(action=='minus'){
            Decrease(productId, action)
        }
    })
}

function Increase(productId,action){
    console.log('Increase')
    var quantity = Number(document.getElementById("quantity").value);
    quantity = quantity+1;
    document.getElementById("quantity").value = quantity;
    console.log(quantity);
}

function Decrease(productId,action){
    var quantity = Number(document.getElementById("quantity").value);
    console.log('Decrease')
    quantity = quantity-1;
    document.getElementById("quantity").value=quantity;

}

шаблон

<div class="counter">
    <div class="arrow-up increase" id="arrow-up" data-product="{{item.product.id}}" data-action="plus" ><i class="fa fa-arrow-up"></i></div>
    <div class="quantity"><input type="number" id="quantity" value="1"></div>
    <div class="arrow-down increase" id="arrow-down" data-product="{{item.product.id}}" data-action="minus"><i class="fa fa-arrow-down"></i></div>
  
  </div>

Это в Django. Так что же я могу сделать, чтобы указать конкретный продукт. Может ли кто-нибудь помочь мне решить эту проблему, пожалуйста!

Поскольку вы использовали document.getElementById() в функциях Increase и Decrease, она возвращает первый элемент с id='quantity', поэтому вы можете установить количество только для первого товара.

Поэтому вам нужно использовать какое-то значение, чтобы различать теги input с id='quantity'. Я бы предложил добавить data-product="{{ item.product.id }}" к тегу input, поскольку вы уже передаете id товара как productId в обе функции.

Таким образом, ваш шаблон будет выглядеть примерно так

<div class="counter">
    <div class="arrow-up increase" id="arrow-up" data-product="{{item.product.id}}" data-action="plus" ><i class="fa fa-arrow-up"></i></div>
    <div class="quantity"><input type="number" id="quantity" value="1" data-product="{{item.product.id}}"></div>
    <div class="arrow-down increase" id="arrow-down" data-product="{{item.product.id}}" data-action="minus"><i class="fa fa-arrow-down"></i></div>
</div>

А функции Increase и Decrease будут изменены так

function Increase(productId,action){
    console.log('Increase')
    var quantity = Number(document.querySelector(`input[data-product=${productId}]`).value);
    quantity = quantity+1;
    document.querySelector(`input[data-product=${productId}]`).value = quantity;
    console.log(quantity);
}

function Decrease(productId,action){
    var quantity = Number(document.querySelector(`input[data-product=${productId}]`).value);
    console.log('Decrease')
    quantity = quantity-1;
    document.querySelector(`input[data-product=${productId}]`).value=quantity;
}
  • document.querySelector() позволяет нам использовать селекторы CSS для выбора элементов. Здесь мы используем его для выбора тегов input с атрибутом data-product, равным значению в productId.
  • ${} предназначен для интерполяции строк, мы можем использовать его для вставки productId в строку селектора.
Вернуться на верх