Как сделать, чтобы при увеличении количества товара увеличивалась сумма?

Question

[Екатерина]

Всем привет! Помогите, пожалуйста, правильно написать скрипт, чтобы при увеличении количества (amount -> input), в в span с классом ".result" сумма увеличивалась по количеству.
Код:

<div class="itogo">	
	Цена: <span id="cena"><?= $arResult['MIN_PRICE']['PRINT_DISCOUNT_VALUE'] ?></span>
	Итого: <span class="result"></span>	
</div>

	<div class="amount">		
		<div class="val">
			<a href="#" class="minus"></a>
				<input type="text" data-change-count value="<?= $arResult['CATALOG_MEASURE_RATIO'] ?>" data-minimum="<?= $arResult['CATALOG_MEASURE_RATIO'] ?>" data-maximum="9999" data-step="<?= $arResult['CATALOG_MEASURE_RATIO'] ?>" class="input" maxlength="4">
			<a href="#" class="plus"></a>
		</div>
	</div>

В классе ".cena" указана сумма товара, например 1500 руб.

$('.plus').on('click', function() {
		var $value = parseInt($('input').val());
		var cena = $("#cena")
		$value = $value * cena;
		$('.result').text($value);
	});

Скрипт не работает, полагаю, что не так указываю input в нем

Comments

[Alex_mos]

А зачем вы событие click вешаете на input?
И зачем вы значения инпута умножаете на блок цена?

var cena = $("#cena")
    $value = $value * cena;

И замем вам вот это

<?= $arResult['MIN_PRICE']['PRINT_DISCOUNT_VALUE'] ?>

Если вы пытаетесь результат написать с помощью jQuery $('.result').text($value)
Если я все правильно понял)

[Екатерина]

Alex_mos, это логичный вопрос...

поправила)))

$('.plus').on('click', function() {
		var $value = parseInt($('input').val());
		var cena = $("#cena")
		$value = $value * cena;
		$('.result').text($value);
	});

Но выводит значение NaN, тоже самое с классом "minus"

[Екатерина]

Alex_mos,
var cena = $("#cena")
$value = $value * cena;
чтобы получить итоговую сумму, грубо говоря чтобы получить результат равный, например, 1500 руб * 2 = 3000 руб.

[Alex_mos]

Екатерина, потому что вы html разметку умножаете на значение инпута

var cena = $("#cena")
    $value = $value * cena;
    $('.result').text($value);

[Екатерина]

Alex_mos, это предложение <?= $arResult['MIN_PRICE']['PRINT_DISCOUNT_VALUE'] ?> выводит сумму

[Alex_mos]

Екатерина, в общем я вам советую пока разобраться как что у вас прописано.
И в этом моментеvar cena = $("#cena") если там какое то значение, то нужно получить это значение
var cena = $("#cena").text()
А так вы просто получаете это<span id="cena"></span>

[Екатерина]

Alex_mos, подскажите, а сейчас почему получаю NaN в классе "result"

<div class="itogo">	
	Цена: <span id="cena_tovara">1500</span>
	Итого: <span class="result"></span>
</div>
<div class="amount">		
	<div class="val">
		<a href="#" class="minus"></a>
			<input type="text" value="<?= $arResult['CATALOG_MEASURE_RATIO'] ?>" data-minimum="<?= $arResult['CATALOG_MEASURE_RATIO'] ?>" data-maximum="9999" data-step="<?= $arResult['CATALOG_MEASURE_RATIO'] ?>" class="input" maxlength="4">
		<a href="#" class="plus"></a>
    </div>
</div>

<script>
$(".plus").click(function() {
	var $price1 = document.createElement("INPUT");
		$price1.setAttribute("value", "<?= $arResult['CATALOG_MEASURE_RATIO'] ?>");
	var summa = $("#cena_tovara");
	var valueSum = $price1 * summa;
$('.result').text(valueSum);
});
</script>

[Alex_mos]

Екатерина, вы опять получаете html элемент(span) а не текст который он содержит.
Попробуйте так
var summa = $("#cena_tovara").text()

[Екатерина]

Alex_mos, скажите при выводе вот этого скрипта:

$(".plus").click(function() {
  var $price1 = document.createElement("INPUT");
	$price1.setAttribute("value", "<?= $arResult['CATALOG_MEASURE_RATIO'] ?>");
	//$price1.setAttribute("type", "text");
	console.log($price1);
  var summa = $("#cena_tovara");
  var summaTov = summa.text();
	console.log(summaTov);
  var valueSum = $price1 * summaTov;
$('.result').text(valueSum);
});

консоль показывает:

по умолчанию VALUE=1, при последующем клике едет "+1" или " -1"
Но, получается, консоль видит, что value всегда "1"? хотя кликнула по "+" 2 раза. Почему input в данном скрипте так читается?

[Alex_mos]

Екатерина, честно говоря, я не совсем понимаю зачем вы при нажатии на "плюс" создаёте элемент инпутvar $price1 = document.createElement("INPUT");

И в вашем коде вот этот инпут, сюда пользователь вводит какое то число?

<input type="text" data-change-count value="<?= $arResult['CATALOG_MEASURE_RATIO'] ?>" data-minimum="<?= $arResult['CATALOG_MEASURE_RATIO'] ?......

(просто с телефона, не все влезло)

Я же правильно понимаю вы какие то данные получаете с сервера(на php)?

[Екатерина]

Alex_mos, может вводить, но это не обязательно, при кликах на plus и minus в input отображается количество товара.

[Alex_mos]

Екатерина, а может вам просто в этом инпуте в значении value написать 0 и при каждом нажатии на кнопку плюс увеличивать value на 1 а при на жатии на минус, уменьшать ( но на минусе сделать проверку, что если value>=0 то больше не уменьшать) и это значение value отрисовывать

Или вам обязательно нужно это
value="<?= $arResult['CATALOG_MEASURE_RATIO'] ?>"

[Екатерина]

Alex_mos, обязательно нужно value="<?= $arResult['CATALOG_MEASURE_RATIO'] ?>" , фактически это строка переводится как value = 1, по умолчанию, чтобы клиент не тыкал лишний раз на plus, и она считывается, т.е. консоль мне показала, что value=1

[Alex_mos]

Екатерина, а значение value="<?= $arResult['CATALOG_MEASURE_RATIO'] ?>" этого приходит откуда то?

[Екатерина]

Alex_mos, это значение связано с корзиной, но значение этого кода вроде ни откуда не приходит, оно только в корзину отправляется

[Alex_mos]

Екатерина, это не ВордПресс случайно? Я все не могу сообразить) или у вас сайт на PHP?

[Екатерина]

Alex_mos, это битрикс и он на php и там все так сложно настроено, особенно, когда не ты писал это. У меня элементарные вещи вызывают кучу проблем...

[Alex_mos]

Екатерина, просто получается, при нажатии на кнопку "плюс" нужно менять значение value там откуда оно приходит
<?= $arResult['CATALOG_MEASURE_RATIO этот момент, поэтому он и отображается у вас постоянно 1

[Екатерина]

Alex_mos, а ты не мог бы подсказать, что в этом коде я делаю не так https://codepen.io/Ekaterina_Poluk/pen/GRvavgr когда количество товара доходит до 3, нажимаю на "minus" и деление работает через пень колоду
1500+1500+1500=4500
после я нажимаю "minus" и получается ерунда... хотя должно получится 4500-1500=3000
const incrementQuantity2 - не правильно прописываю

[Alex_mos]

Екатерина, мне с телефона немного не удобно, что то не хочет менять)) попробуй добавить ещё одну переменную newPrice.
Когда выполняется "плюс" добавляй в нее значение price*quality. И выводи newPrice.
И попробуй так же с минусом.

Answer 1

[Екатерина]

решение - https://codepen.io/Ekaterina_Poluk/pen/GRvavgr

Answer 2

[Timpixel]

Я немного не понимаю JS, но попробую помочь.
$value = $value + cena;
Просто смени * на +
Надеюсь, поможет.

Comments

[Екатерина]

* - это умножение
+ - это сложение
спасибо за помощь, но это не поможет...