Как считать сумму товаров jQuery?

Question

[kamisarlapsha]

Привет. Сделал количество товара кнопками, где при нажатии на одну к значению input прибавляется число 1, а на другую - отнимается. Но как можно сделать, чтобы при нажатии на кнопку, которая допустим увеличивает значению input, в <span class="price-tires"></span> выводилась цена уже за 2 товара и т.д.
Вообщем, чтобы при нажатии на эти кнопки, у нас к общей сумме добавлялась цена ещё одной еденицы, либо отнималась.
Если что, это всё на OpenCart 2.3. В карточке товара.
Заранее спасибо.

Вот html код цены. Считаем price-new-product product--p

<p class="product-price">
 <span class="special-prices--product">
                  <span class="price-new-product product--p">3500р.</span> <span class="price-old-product">4500р.</span>
</span>
</p>

Вот js код, кнопок.

$(document).ready(function() {

var $input = $('.quant');
    
$('.count-down').click(function () {
    
var count = parseInt($input.val()) - 1;
count = count < 1 ? 1 : count;
$input.val(count);
$input.change();
return false;
    
});
    
$('.count-up').click(function () {
    
$input.val(parseInt($input.val()) + 1);
$input.change();
return false;
});
    
});

Comments

[ProjectSoft]

И что мешает взять значение из .price-new-product.product--p?
Если кнопка добавления находится в блоке товара, кнопки + и - там же, то вы с лёгкостью можете узнать контекст родителя и оперировать со всеми дочерними элементами через него.

[kamisarlapsha]

ProjectSoft, Это понятно, запутался как прибавлять каждый раз и как отнимать.

[kamisarlapsha]

ProjectSoft, И плюс отнимать нужно только до начальной цены, чтобы 0 не получался.

[AngReload]

kamisarlapsha, зачем отнимать-прибавлять? Сделайте просто функцию умножающую цену за штуку на количество.

[kamisarlapsha]

AngReload, А как быть с вычислением ?
Вот сделал с умножением.

var $priceP = parseInt($('.product--p').text());

$('.count-up').click(function () {
$input.val(parseInt($input.val()) + 1);
$input.change();
$('.price-tires').text($priceP * $input.val());
return false;
});

[Сергей]

Предлагаю в атрибут добавить цену за 1 товар

<span class="price-new-product product--p" data-price="3500">3500р.</span>

А в сам текст брать из этого атрибута и умножать на количество и дописывать "руб." и разделять на порядки

[AngReload]

Сергей, вообще parseInt нормально работает если в конце строки не числа, то есть parseInt('3500р.') === 3500

[AngReload]

kamisarlapsha, «А как быть с вычислением ?» вычислением чего?

[Сергей]

AngReload,
Завтра ваш "р." заменяется на<span class=""rub></span> или <b>руб.</b> и гарантировать работу parseInt невозможно.

Я придерживаюсь правила. что все с чем нужно работать в js, должно быть в атрибутах, если это не контент.

Так-же идея с атрибутом облегчает работу с данными
Когда мы сначала прибавим количество до 10, в цене будет 35000. Потом при уменьшении до 3, что нам нужно будет делать с 35000? Делить на 10, умножать на 3?
Проще взять базовую цену и умножить на 3, а она у нас только в атрибуте сохранится.

[kamisarlapsha]

AngReload, Нужно отнимать цену от общей, при нажатии на кнопку count-down. Но также, если уже значение самого счетчика товаров = 1, то мы ничего не отнимаем. Допустим у нас 3 таких товара на сумму 10500 и мы нажали на кнопку count-down и сумма товаров уже 7000.

Пытался так, но так не получается

if ($input.val() > 1) {
    $('.price-tires').text($priceP / $input.val());
};

[AngReload]

kamisarlapsha, а... я запутался. У нас есть:
quant — количество штук
price-new-product product--p — цена за штуку
price-tires — цена за всё
?

[kamisarlapsha]

AngReload, Да. И при изменении quant. У нас изменяется price-tires .

[AngReload]

kamisarlapsha,
price-tires === price-new-product product--p * quant
?

[kamisarlapsha]

AngReload, Это я сделал. А как из price-tires отнимать price-new-product product--p когда quant становится
меньше.

Это умножение

var $priceP = parseInt($('.product--p').text());

$('.count-up').click(function () {
$input.val(parseInt($input.val()) + 1);
$input.change();
$('.price-tires').text($priceP * $input.val());
return false;
});

[AngReload]

kamisarlapsha, так же?

$('.count-down').click(function () {
var count = parseInt($input.val()) - 1;
count = count < 1 ? 1 : count;
$input.val(count);
var priceP = parseInt($('.product--p').text());
$('.price-tires').text(priceP * count);
$input.change();
return false;
});

[kamisarlapsha]

AngReload, Да. Спасибо!

[alex-1917]

а теперь посчитайте сумму для такого варианта)))

Answer 1

[sapfear]

var calcSumm = function() {
  var summ = 0;
  $('.product-price').each(function() {
    var price = $('.price-new-product.product--p', this).text().replace('р.'); //лучше, если верстка будет вида
//<span class="price-new-product product--p" data-sum="3500">3500р.</span>
//тогда делаем не .text().replace('р.'), а .data('sum')
    var count = $input.val();
    summ += count*price;
  });
}

//и далее после пересчета количеств
$('.count-up').click(function () {
  ...
  calcSumm();
});