Изменение числа(в span) при вводе большего количества товара
Добрый день!
Возникла проблема, в которой мне нужная помощь моих друзей с форума:) Есть страничка, на которой есть мини-магазинчик, но теперь есть новое условие! Когда посетитель будет вводить количества товара, то как сделать так, что бы при вводе большего количества(например больше 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> |
<!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>
Вот простой пример |
массив A [[кол-во, цена, цвет],[кол-во, цена, цвет]...]
|
j0hnik,
var a = [[120,250,'#0F0'],[48,260,'#590'],[12,270,'#950'],[1,280,'#F00']].find(el => el[0] <= (+inp.value||1)), |
рони,
Согласен, так должно быть. |
рони,
j0hnik, Спасибо, вы очень помогли! |
j0hnik,
Добрый вечер! Не могли бы вы ещё раз посмотреть, я залил на сервер, но скрипт ведёт себя странно! Первый товар за 280 Вот сайт:https://polynor.com.ua/order |
поставьте в конец страницы перед закрывающим тегом</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);
|
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>
|
| Часовой пояс GMT +3, время: 17:49. |