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

Question

[Антон Вебсайтовский]

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

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

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

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

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

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

Рабочий пример тут:
https://jsfiddle.net/3cw4mups/6/

Answer 1

[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;

Comments

[Антон Вебсайтовский]

Отлично, я про это и спрашивал, как ловить id, чтобы правильно все работало.
Все верно я сделал?

$('div[data-product]').each(function() { //собираем все контейнеры товаров и прогоняем по ним цикл
   let $productNode = $(this); //фиксируем jQ-объект товара
   let productId = $productNode.data('product'); //получаем ID товара
   $productNode.find('.plus').on('click', function() {
       var $input = $(this).parent().find('input');
       $input.val(parseInt($input.val()) + 1);
       $input.change();
       return false;
   });
   $productNode.find('.minus').on('click', function() {
       var $input = $(this).parent().find('input');
       var count = parseInt($input.val()) - 1;
       count = count < 1 ? 1 : count;
       $input.val(count);
       $input.change();
       return false;
   });
 });

Проверил, работает, применил на примере своем:
https://jsfiddle.net/3cw4mups/7/

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

[MikUrrey]

Антон Вебсайтовский, смотрите, я немного дополнил ответ. Как раз $productNode поможет словить цену нужного товара. В целом да, вы меня верно поняли.

[Антон Вебсайтовский]

MikUrrey, а где ошибка тут, чет не пойму

<b id="sum">

[Антон Вебсайтовский]

MikUrrey, пошаманил и сделал так

let price = $productNode.find('input[data-role="price"]').val(); //берем цену
let priceakcia = $productNode.find('input[data-role="priceakcia"]').val(); //берем цену акции
let sellingPrice = priceakcia? priceakcia: price; //проверка цены, если есть цена акции, то берет ее, если нет то берет простую
let kolvo = $productNode.find('input[data-role="kolvo"]').val(); //берем кол-во
let totalPrice = $('#sum') //передаем цену по id
let rezult = +sellingPrice * +kolvo //умножаем сумму на кол-во
$(totalPrice).html(rezult); //выводим полученную сумму

но сумма не выводится в '#sum'

[MikUrrey]

а где ошибка тут, чет не пойму

У вас много элементов с тем же ID, и вычисляете не так.

let rezult = parseInt(sellingPrice, 10) * parseInt(kolvo, 10)
//parseInt - так строка превращается в число, что важно для математических операций.
//sellingPrice и kolvo приходят из полей как строки, и могут сломать вычисление.
//Аргумент 10 заставляет конвертировать строго в десятеричный формат.
//А еще плюсы там были лишними :)

Поэтому и сумма не выводится.
Перечитайте, я же выше подробно написал и про ID, и про то, как поймать нужные элементы без помощи ID

[Антон Вебсайтовский]

Так вот что у меня вышло:
https://jsfiddle.net/3cw4mups/10/

Я там изменил, не стал добавлять доп поля data-role, просто с name беру.

Сумма выводиться, но когда кол-во меняю в импуте, сумма не умножается.
И еще let sellingPrice = priceakcia ? priceakcia : price; не работает, я там в товаре в одном из 3, убрал цену акции и оставил просто цену.

[Антон Вебсайтовский]

MikUrrey, ну да я sum не ид сделал, а класс.

[Антон Вебсайтовский]

MikUrrey, поправил, но чет ничего не изменилось )

$('div[data-product]').each(function() { //собираем все контейнеры товаров и прогоняем по ним цикл
   let $productNode = $(this); //фиксируем jQ-объект товара
   let productId = $productNode.data('product'); //получаем ID товара
   $productNode.find('.plus').on('click', function() {
     var $input = $(this).parent().find('input');
     $input.val(parseInt($input.val()) + 1);
     $input.change();
     return false;
   });
   $productNode.find('.minus').on('click', function() {
     var $input = $(this).parent().find('input');
     var count = parseInt($input.val()) - 1;
     count = count < 1 ? 1 : count;
     $input.val(count);
     $input.change();
     return false;
   });

   let price = $productNode.find('input[name="price"]').val(); //берем цену
   let priceakcia = $productNode.find('input[name="priceakcia"]').val(); //берем цену акции
   let sellingPrice = priceakcia ? priceakcia : price; //проверка цены, если есть цена акции, то берет ее, если нет то берет простую
   let kolvo = $productNode.find('input[name="kolvo"]').val(); //берем кол-во
   let totalPrice = $('.sum') //передаем цену по id
   let rezult = parseInt(sellingPrice, 10) * parseInt(kolvo, 10) //умножаем сумму на кол-во
   $(totalPrice).html(rezult); //выводим полученную сумму
 });

[Антон Вебсайтовский]

Чуть изменил одно поле, let totalPrice = $productNode.find('.sum')
Теперь, let sellingPrice = priceakcia ? priceakcia : price; срабатывает верно.

[MikUrrey]

Да, так правильно. А в остальном у вас все теперь верно.

[Антон Вебсайтовский]

MikUrrey, понял, значит верно ) но не работает, когда меняю кол-во цена остается прежней )

[MikUrrey]

У вас за это отвечает блок кода внизу, заверните его в функцию:

function setPrice($productNode) {
   let price = $productNode.find('input[name="price"]').val(); //берем цену
   let priceakcia = $productNode.find('input[name="priceakcia"]').val(); //берем цену акции
   let sellingPrice = priceakcia ? priceakcia : price; //проверка цены, если есть цена акции, то берет ее, если нет то берет простую
   let kolvo = $productNode.find('input[name="kolvo"]').val(); //берем кол-во
   let $totalPrice = $productNode.find('.sum') //передаем цену по id
   let rezult = parseInt(sellingPrice, 10) * parseInt(kolvo, 10) //умножаем сумму на кол-во
   $totalPrice.html(rezult); //выводим полученную сумму
}

Затем разместите эту функцию в самом начале и вызовите её вместо того блока и в обработчиках кликов перед $input.change():
setPrice($productNode)

[Антон Вебсайтовский]

MikUrrey, либо не работает, но скорее я не так сделал https://jsfiddle.net/d5L8kwgs/

[MikUrrey]

Антон Вебсайтовский, не надо setPrice вызывать внутри setPrice, это вызывает зацикливание

[Антон Вебсайтовский]

MikUrrey, а я пробовал и поверх доставал уже ) и так и так пробовал.

[MikUrrey]

Антон Вебсайтовский, видимо, это был не тот "поверх")))
https://jsfiddle.net/vke54ncg/

Answer 2

[Сергей delphinpro]

Что-то вы слишком заморочились с идентификаторами. Всё проще.



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

Comments

[Антон Вебсайтовский]

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

Ну и как быть с двумя ценами, надо чтобы цену акции брал, если она есть, а если нет то обычную цену брал и умножал, вот ломаю голову как такую проверку сделать.

А так спасибо за пример хороший.

[Антон Вебсайтовский]

Я правильно понял, где кол-во, скрипт не учитывает id товара

$('.minplus').each(function() {
    const $input = $('.kolvo', this);
    let val = +$input.val();
    $('.plus', this).on('click', function() {
      val += 1;
      $input.val(val).trigger('input');
    });
    $('.minus', this).on('click', function() {
      val -= 1;
      if (val < 0) val = 0;
      $input.val(val).trigger('input');
    });
  });

[Сергей delphinpro]

Антон Вебсайтовский, Где меняется количество.
Зачем скрипту знать ID товара? Я же написал про разделение ответственности.
Эта часть кода просто меняет значение инпута. Больше ей знать не нужно.

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

Ваша проблема в вопросе обозначена как разделять разные карточки и обрабатывать их отдельно друг от друга. Я показал.

Ну и как быть с двумя ценами, надо чтобы цену акции брал, если она есть, а если нет то обычную цену брал и умножал, вот ломаю голову как такую проверку сделать.

См. выше. Это не относится к сути обозначенной проблемы. Ну добавьте условие.

[Сергей delphinpro]

Значение по дефолту вы можете либо сразу вписать в html, либо вызвать функцию пересчета. Неужели с этим тоже будет проблема?

[Антон Вебсайтовский]

Сергей delphinpro, Учусь, знаний мало, по этому и задаю вопросы.

[Антон Вебсайтовский]

Так замутил, https://jsfiddle.net/8ex971Lt/3/
Теперь если две цены есть, обычная и акция цена, то выбирает цену акции, если этой цены нет, то выбирает первую обычную и по ней уже считает кол-во, я также там изменил, кол-во можно было 0 ставить, сделал чтобы ниже 1 нельзя было.

Так нюанс один только остался, копейки
Я в примере поставил цену копейки 0.50, как теперь сделать чтобы скрипт определял, если цена меньше рубля, то копейки в шаблоне скрывал, ,00, ну и показывать копейки если цена идет больше рубля.

[Антон Вебсайтовский]

Я там еще добавил чтоб точку ставил, разделял тысячные, то есть если цена больше чем 999, то становиться точка, пример 1.000 или 10.000.

Но как-то странно работает: (не правильно как-то, скрывает нули, если нажимать плюсик)

const price = +$('input[name=price]', this).val().replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1.'); //берем обычную цену
    const priceakcia = +$('input[name=priceakcia]', this).val().replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1.'); //берем цену акции

https://jsfiddle.net/8ex971Lt/5/

[Сергей delphinpro]

Антон Вебсайтовский, форматировать числа нужно в самом конце, когда все вычисления уже сделаны, перед выводом их на страницу. Т.е. Здесь

$sum.html(sum.toString().replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1.'));

, а там выше убрать replace

[Сергей delphinpro]

Антон Вебсайтовский, что касается копеек, это тоже по сути форматирование при выводе. Отделите копейки от рублей и выводите их в разные спаны.

[Антон Вебсайтовский]

Сергей delphinpro, да я понимаю что если меньше рубля надо чтоб копейки не выводились, если больше рубля чтоб выводились, вот как это сделать в js пока не пойму.

[Антон Вебсайтовский]

Сергей delphinpro, выше это где?

$sum.html(sum.toString().replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1.'));

Выводит NaN

[Сергей delphinpro]

Антон Вебсайтовский, https://jsfiddle.net/DelphinPRO/xeb64hy5/

[Антон Вебсайтовский]

Сергей delphinpro, а я там задел, теперь вижу в чем проблема, убрал то что нужно было.
Спасибо за подсказки и помощь.

Осталось с копейками решить делему )

[Сергей delphinpro]

Антон Вебсайтовский, округлить до меньшего, вычесть из одно другое

Пример:

const price = 123.45;
const ruble = Math.floor(price);
const penny = Math.round((price - ruble) * 100);
$('.ruble').html(ruble);
$('.penny').html(penny);
//<span class="ruble"></span> <span class="penny"></span>

[Антон Вебсайтовский]

@delphinpro
Так теперь выходит проверять, что есть руб или пени, и уже то что есть, мы умножаем на кол-во и выводим.
Я сделал, но у меня не работает.

и еще сделал чтобы уже конечная цена передавалась (я про ту что есть, простая цена или цена акции) то есть одна из двух, const ruble = Math.floor(sellingPrice);

Вот что вышло:
https://jsfiddle.net/8op2d7y1/2/

[Сергей delphinpro]

Антон Вебсайтовский, Читайте внимательнее, что я вам пишу:

форматировать числа нужно в самом конце, когда все вычисления уже сделаны, перед выводом их на страницу.

что касается копеек, это тоже по сути форматирование при выводе.

А также учитывайте, что про копейки я вам показал абстрактный код, без привязки к вашему.