Add styled +/- quantity controls to POS cart

Implemented intuitive quantity management in the cart with:
- Minus button (-): Decreases quantity by 1, removes item if qty becomes 0
- Plus button (+): Increases quantity by 1
- Quantity input field: Centered, uniform styling with buttons
- All controls styled with Bootstrap outline-secondary (gray) for cohesive look
- Buttons feature Bootstrap Icons (dash-circle, plus-circle) at 1.2em size
- Auto-save to Redis after each quantity change

Benefits:
 Faster quantity adjustments without keyboard input
 Consistent gray styling across all quantity controls
 Mobile-friendly touch targets
 Automatic cart persistence maintained

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-20 10:19:28 +03:00
parent eac778b06d
commit 763ad2ce07

View File

@@ -677,11 +677,35 @@ function renderCart() {
const multiplySign = document.createElement('span'); const multiplySign = document.createElement('span');
multiplySign.className = 'multiply-sign'; multiplySign.className = 'multiply-sign';
multiplySign.textContent = 'x'; multiplySign.textContent = 'x';
// Контейнер для кнопок количества
const qtyControl = document.createElement('div');
qtyControl.className = 'd-flex align-items-center';
qtyControl.style.gap = '2px';
// Кнопка минус
const minusBtn = document.createElement('button');
minusBtn.className = 'btn btn-outline-secondary btn-sm';
minusBtn.innerHTML = '<i class="bi bi-dash-circle" style="font-size: 1.2em;"></i>';
minusBtn.onclick = (e) => {
e.preventDefault();
const currentQty = cart.get(cartKey).qty;
if (currentQty <= 1) {
removeFromCart(cartKey);
} else {
cart.get(cartKey).qty = currentQty - 1;
renderCart();
saveCartToRedis();
}
};
// Поле ввода количества // Поле ввода количества
const qtyInput = document.createElement('input'); const qtyInput = document.createElement('input');
qtyInput.type = 'number'; qtyInput.type = 'number';
qtyInput.className = 'qty-input'; qtyInput.className = 'qty-input form-control form-control-sm';
qtyInput.style.width = '60px';
qtyInput.style.textAlign = 'center';
qtyInput.style.padding = '0.375rem 0.25rem';
qtyInput.value = item.qty; qtyInput.value = item.qty;
qtyInput.min = 1; qtyInput.min = 1;
qtyInput.onchange = (e) => { qtyInput.onchange = (e) => {
@@ -694,6 +718,22 @@ function renderCart() {
saveCartToRedis(); // Сохраняем в Redis при изменении количества saveCartToRedis(); // Сохраняем в Redis при изменении количества
} }
}; };
// Кнопка плюс
const plusBtn = document.createElement('button');
plusBtn.className = 'btn btn-outline-secondary btn-sm';
plusBtn.innerHTML = '<i class="bi bi-plus-circle" style="font-size: 1.2em;"></i>';
plusBtn.onclick = (e) => {
e.preventDefault();
cart.get(cartKey).qty += 1;
renderCart();
saveCartToRedis();
};
// Собираем контейнер
qtyControl.appendChild(minusBtn);
qtyControl.appendChild(qtyInput);
qtyControl.appendChild(plusBtn);
// Сумма за позицию // Сумма за позицию
const itemTotal = document.createElement('div'); const itemTotal = document.createElement('div');
@@ -708,7 +748,7 @@ function renderCart() {
row.appendChild(namePrice); row.appendChild(namePrice);
row.appendChild(multiplySign); row.appendChild(multiplySign);
row.appendChild(qtyInput); row.appendChild(qtyControl);
row.appendChild(itemTotal); row.appendChild(itemTotal);
row.appendChild(deleteBtn); row.appendChild(deleteBtn);