Кастомные кнопки для input
Здравствуйте!
Помогите пожалуйста, как сделать кастомизированые кнопки для input?
Пробовал добавлять изменение значения через JS, но разумеется значение не сохранялось и не фиксировалось самой корзиной.
Помогите пожалуйста, как сделать кастомизированые кнопки для input?
Пробовал добавлять изменение значения через JS, но разумеется значение не сохранялось и не фиксировалось самой корзиной.
<td class="count">
<form method="post" class="ms2_form form-inline" role="form">
<input type="hidden" name="key" value="{$product.key}"/>
<div class="form-group">
<button class="form-group__minus">-</button>
<input class="form-group__number" type="number" name="count" value="{$product.count}"/>
<button class="form-group__plus">+</button>
</div>
<button class="btn btn-default" type="submit" name="ms2_action" value="cart/change"></button>
</form
</td>
<script type="text/javascript">
$(function() {
(function quantityProducts() {
var $quantityArrowMinus = $("#{$product.key} .form-group__minus");
var $quantityArrowPlus = $("#{$product.key} .form-group__plus");
var $quantityNum = $("#{$product.key} .form-group__number");
$quantityArrowMinus.click(quantityMinus);
$quantityArrowPlus.click(quantityPlus);
function quantityMinus() {
if ($quantityNum.val() > 1) {
$quantityNum.val(+$quantityNum.val() - 1);
}
}
function quantityPlus() {
$quantityNum.val(+$quantityNum.val() + 1);
}
})();
});
</script>
Буду благодарен за помощь! Комментарии: 7
у меня такой код
js
js
$('.bminus').on('click',function () {
var $input = $(this).parent().find('input');
var val = +$input[0].defaultValue;
var count = parseInt($input.val()) - 1;
count = count < 1 ? 1 : count;
$input.val(count);
$input.change();
return false;
});
$('.bplus').on('click',function () {
var $input = $(this).parent().find('input');
var val = +$input[0].defaultValue;
$input.val(parseInt($input.val()) + 1);
$input.change();
return false;
});
html<div class="quantity">
<input type="text" name="count" value="1" required>
<span class="bplus"></span>
<span class="bminus"></span>
</div>
Работает но как то странно. На некоторых товарах в корзине прибавляет по 3, 2, 4, 5 единиц за одно нажатие. На самом последнем вовсе не работает. Вне зависимости от товаров.
<form method="post" class="ms2_form form-inline" role="form">
<input type="hidden" name="key" value="{$product.key}"/>
<div class="number-item">
<button class="minus">-</button>
<input type="num" class="amout" data-amout="amout" data-min="1" data-max="9999" name="count" value="{$product.count}">
<button class="plus">+</button>
</div>
<button class="btn btn-default" type="submit" name="ms2_action" value="cart/change"></button>
</form>
function itemCount(field){
var fieldCount = function(el) {
var
// Мин. значение
min = el.data('min') || false,
// Макс. значение
max = el.data('max') || false,
// Кнопка уменьшения кол-ва
dec = el.prev('.minus'),
// Кнопка увеличения кол-ва
inc = el.next('.plus');
function init(el) {
if(!el.attr('disabled')){
dec.on('click', decrement);
inc.on('click', increment);
}
// Уменьшим значение
function decrement() {
var value = parseInt(el[0].value);
value--;
if(!min || value >= min) {
el[0].value = value;
}
}
// Увеличим значение
function increment() {
var value = parseInt(el[0].value);
value++;
if(!max || value <= max) {
el[0].value = value++;
}
}
}
el.each(function() {
init($(this));
});
};
$(field).each(function(){
fieldCount($(this));
});
} itemCount('[data-amout="amout"]');
Рабочий пример сайта, где реализовано
Все рубит ок!
Все рубит ок!
Подскажи а где может закрасться ошибка? Как считаешь?
Понял каким образом происходит ошибка. Кнопка добавляет кол-во единиц в соответствии с количеством товаров стоящих после нынешнего товара.
Всё, разобрался. Затупил конкретно. Добавил JS в шаблон для каждого товара в корзине, хотел немного облегчать участь сайта не нагружая каждую страничку лишним кодом, но увы. Потому что код дублировался после каждого добавленного товара он и начал не правильно работать. Спасибо всем ребята! Огромное Спасибо!
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.