Товар, умножаем цену на кол-во товара и выводим цену, как сделать?

Всем привет.
Реализовал краткий вывод товаров, у каждого товара свой id.

Теперь осталось реализовать умножение цены когда меняем кол-во товара, как-то надо к id привязывать, но я пока не разобрался.

У товара две цены, обычная и цена акция, так вот, я их передал в импут и скрыл их, от туда можно вытягивать и выводить, в id=sum". Надо как-то реализовать, если две цены есть у товара, а это обычная и скидочная, то учитывается цена скидочная первым делом и кол-во товара умножается на нее и выводиться общая сумма, как такую проверку сделать можно и само умножение на кол-во.

У товара есть кол-во, когда нажимаем плюсик или минус или вписываем в импут кол-во, то надо чтобы цена умножалась и выводилась в id=sum".

В примере сделал скрипт, но он для одного товара, не знаю как id задействовать товара, у товаров же id будет разный. Чтоб именно для данного товара считалось.

Добавил скрипт, который при клике на плюсик или минус меняет кол-во, надо к id товара как-то задействовать.

Рабочий пример тут:
https://jsfiddle.net/3cw4mups/6/
  • Вопрос задан
  • 138 просмотров
Пригласить эксперта
Ответы на вопрос 2
@MikUrrey
Вы сделали так:
$('.minus').click(function() { ...
Это вешает клик на все кнопки сразу, и внутри функции будет неудобно разбирать, к какому товару относится кнопка.
Лучше сделайте селектор для товаров, и перебирайте их циклом, каждому вешая функцию. Вот для примера:
<div data-product="1920"> ...
<!-- лучше так вместо id="1920" -->

$('div[data-product]').each(function() { //собираем все контейнеры товаров и прогоняем по ним цикл
  let $productNode = $(this); //фиксируем jQ-объект товара
  let productId = $productNode.data('product'); //получаем ID товара
  $productNode.find('.plus').on('click', function() {
    //здесь мы уже знаем ID товара (productId) и можем манипулировать
    //элементами внутри контейнера товара с помощью $productNode.find('селектор')
  });
  $productNode.find('.minus').on('click', function() {
    
  });
});


Так же в разметке есть ошибка:
<b id="sum">

<input type="hidden" id="price">

<input type="hidden" id="priceakcia">

повторяются многократно, id должен быть уникальным в рамках страницы.
Лучше дайте им, например, атрибут data-role="...", а потом обращайтесь к ним в скрипте через него:
let price = $productNode.find('input[data-role="price"]').val();
let priceakcia = $productNode.find('input[data-role="priceakcia"]').val();
//так вычисляется отпускная цена: если есть акционная, то она становится отпускной
let sellingPrice = priceakcia? priceakcia: price;
Ответ написан
delphinpro
@delphinpro
frontend developer
Что-то вы слишком заморочились с идентификаторами. Всё проще.



Я сделал поле видимым, просто для отладки. Также отсутствуют проверки на NaN и вывод цены без отделения копеек. Это все к сути не относится.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы