Форум

Denis_Landar · #1 (**permalink**) 17.01.2018, 19:04

Добрый день!
Возникла проблема, в которой мне нужная помощь моих друзей с форума

Есть страничка, на которой есть мини-магазинчик, но теперь есть новое условие!
Когда посетитель будет вводить количества товара, то как сделать так, что бы при вводе большего количества(например больше 12) цена товара менялась и перекрашивалась в другой цвет?
Страница мини-магазинчика: https://polynor.com.ua/order
Калькулятор:

$(function() {
    var table = $(".order-table"),
    div = table.find(".number"),
    input = div.find("input").get(),
    total = $(".order-end-form>input:text");
 
    function sum() {
        var n = input.reduce(function(s, el) {
            var val = +el.value || 0,
            price = +el.dataset.price || 0;
            val < 0 && (val = 0);
            return s + val * price
        }, 0);
        total.val(n)
    }
    div.each(function(indx, el) {
        var price = parseInt($(el).prev().text()),
        input = $("input", el).on({
            input: sum
        })[0];
        input.dataset.price = price;
        $(el).on("click", ".minus,.plus", function(event) {
            val = +input.value || 0;
            $(event.target).is(".minus") ?
            val-- : val++;
            val < 0 && (val = 0);
            input.value = val;
            sum()
        })
    })
});

Форма товара:

<tr>
										<td><b>НПУ POLYNOR</b>
											<br>Однокомпонентный напыляемый полиуретановый утеплитель для тепло и
											<br>шумоизоляции объектов. Аэрозольный баллон 890 мл
											<p><b>Система скидок</b></p>
											<table class="table_in_tableorder">
												<tr>
													<td>от 1 шт</td>
													<td>≥ 12 шт</td>
													<td>≥ 48 шт</td>
													<td>≥ 120 шт</td>
												</tr>
												<tr>
													<td>280 грн</td>
													<td>270 грн</td>
													<td>260 грн</td>
													<td>250 грн</td>
												</tr>
											</table>
										</td>
										<td><img src="img/order/ballon.png" alt="НПУ POLYNOR"></td>
										<td><span>280,00</span>
											<div class="number">
												<span style="user-select: none;padding:3px 9px 3px 9px;" class="minus">-</span>
												<input style="user-select: none;background-color: #fff;" name="НПУ POLYNOR" type="text" value="0" size="5" />
												<span style="user-select: none;" class="plus">+</span>
											</div>
										</td>
									</tr>

j0hnik · #2 (**permalink**) 18.01.2018, 01:06

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<span id="cena">280</span><span> руб.</span><br>
	<input type="text" id="inp" value='0'>
	<script>
		inp.oninput=function(){
			var a = [[120,250,'#0F0'],[48,260,'#590'],[12,270,'#950'],[1,280,'#F00']].find(el => el[0] <= inp.value),
			cena = document.querySelector("#cena");
			cena.textContent = a[1];
			cena.style.color = a[2];
		};
	</script>
</body>
</html>

Вот простой пример

j0hnik · #3 (**permalink**) 18.01.2018, 01:09

массив A [[кол-во, цена, цвет],[кол-во, цена, цвет]...]

рони · #4 (**permalink**) 18.01.2018, 02:13

j0hnik,

var a = [[120,250,'#0F0'],[48,260,'#590'],[12,270,'#950'],[1,280,'#F00']].find(el => el[0] <= (+inp.value||1)),

j0hnik · #5 (**permalink**) 18.01.2018, 05:26

рони,
Согласен, так должно быть.

Denis_Landar · #6 (**permalink**) 18.01.2018, 19:22

рони,
j0hnik,
Спасибо, вы очень помогли!

Denis_Landar · #7 (**permalink**) 21.01.2018, 01:50

j0hnik,
Добрый вечер!
Не могли бы вы ещё раз посмотреть, я залил на сервер, но скрипт ведёт себя странно! Первый товар за 280
Вот сайт:https://polynor.com.ua/order

j0hnik · #8 (**permalink**) 21.01.2018, 03:52

поставьте в конец страницы перед закрывающим тегом</body>

function cena(){
			var a = [[120,250,'#0F0'],[48,260,'#590'],[12,270,'#950'],[1,280,'#F00']].find(el => el[0] <= (+inp.value||1)),
			cena = document.querySelector("#cena");
			cena.textContent = a[1];
			cena.style.color = a[2];
		};

		document.querySelector('#inp').addEventListener("input",  cena, false);
		document.body.addEventListener("click",  cena, false); 
		window.addEventListener("DOMContentLoaded",  cena, false);

Denis_Landar · #9 (**permalink**) 10.03.2018, 13:50

j0hnik,
Здравствуйте!
Вы помогли мне с написанием этого скрипта, всё работает отлично, цена меняется с учётом количества, но при добавлении товара не меняется сумма в итоговом input, в span цена 270, а в input приходит начальная 280.
Если можете помочь, то подскажите, что не так, пожалуйста!
Вот эта страница: https://advanced.cn.ua/order

Пример ячейки с товаром:

<tr>
	<td><img src="img/order/ballon.png" alt="НПУ POLYNOR"></td>
	<td><span id="cena">280</span>
	<div class="number">
		<span style="user-select: none;padding:3px 9px 3px 9px;" class="minus">-</span>
		<input style="user-select: none;background-color: #fff;" id="inp"POLYNOR" type="text" value="0" size="5" />
		<span style="user-select: none;" class="plus">+</span>
	</div>
	</td>
</tr>

Итоговая сумма(куда приходит цена):

<div class="order-end-form">
 <p><b>Сумма заказа</b></p>
 <input readonly name="Сумма" style="background-color: #fff;" type="text">
 <input onClick="ga('send', 'event', 'order', 'click');" class="btn-sale" type="submit" value="Заказать">
</div>

"Калькулятор":

$(function() {
	var table = $(".order-table"),
	div = table.find(".number"),
	input = div.find("input").get(),
	total = $(".order-end-form>input:text");

	function sum() {
		var n = input.reduce(function(s, el) {
			var val = +el.value || 0,
			price = +el.dataset.price || 0;
			val < 0 && (val = 0);
			return s + val * price
		}, 0);
		total.val(n)
	}
	div.each(function(indx, el) {
		var price = parseInt($(el).prev().text()),
		input = $("input", el).on({
			input: sum
		})[0];
		input.dataset.price = price;
		$(el).on("click", ".minus, .plus", function(event) {
			val = +input.value || 0;
			$(event.target).is(".minus") ?
			val-- : val++;
			val < 0 && (val = 0);
			input.value = val;
			sum()
		})
	})
});

Замена цены:

<script>
	 function cena(){
				var a = [[120,250,'#0F0'],[48,260,'#590'],[12,270,'#950'],[1,280,'#F00']].find(el => el[0] <= (+inp.value||1)),
					cena = document.querySelector("#cena");
					cena.textContent = a[1];
					cena.style.color = a[2];
				};

				document.querySelector('#inp').addEventListener("input", cena, false);
				document.body.addEventListener("click", cena, false); 
				window.addEventListener("DOMContentLoaded", cena, false);
			</script>

Форум

Справочник

Discord чат

Курсы javascript