Кнопка количества (+/-)
Сегодня мы научимся делать кнопку подсчёта количества. Это один из наиболее необходимых и часто встречающихся элементов на сайтах. В частности, является неотъемлемым элементом любого интернет-магазина (вы могли заметить его в карточках товаров, либо на странице товаров интернет-магазинов). В основном, используется для выбора количества товара во время покупки, упрощая тем самым процесс покупки для пользователя и делая сайт проще и приятнее в использовании, что является хорошим показателем для привлечения клиентов.
Для создания данной кнопки вам надо перекопировать следующие части кодов:
<span class="change minus min">
<span>-</span>
</span>
<input type="text" name="productСount" value="1" disabled="">
<span class="change plus">
<span>+</span>
</span>
.count {
display: flex;
}
.count .change {
display: flex;
justify-content: center;
align-items: center;
width: 25px;
height: 25px;
font-weight: 600;
color: #fff;
background-color: #35e201;
border-radius: 3px;
cursor: pointer;
}
.count input {
max-width: 55px;
text-align: center;
font-weight: 700;
background-color: #fff;
border: none;
border-radius: 3px;
margin: 0 5px;
}
.count .minus.min {
background-color: #989797;
}
document.querySelectorAll('.count .plus').forEach(item => {
item.addEventListener('click', function () {
++item.parentElement.querySelector('input').value;
if (item.parentElement.querySelector('input').value > 1) {
item.parentElement.querySelector('.minus').classList.remove('min');
}
});
});
document.querySelectorAll('.count .minus').forEach(item => {
item.addEventListener('click', function () {
--item.parentElement.querySelector('input').value;
if (item.parentElement.querySelector('input').value < 2) {
item.parentElement.querySelector('input').value = 1
item.classList.add('min');
}
});
});
После копирования вышеупомянутых кусков кода, у вас должна появиться вот такая кнопка:
При значении количества равного единице, кнопка уменьшения количества становится серой, указывая пользователю, что меньше одного товара выбрать невозможно. Все цвета кнопок в CSS можете изменять по своему желанию. Для корректной работы данного элемента, не рекомендуем вносить изменения в структуру html или JavaScript кода.