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:
@@ -678,10 +678,34 @@ function renderCart() {
|
||||
multiplySign.className = 'multiply-sign';
|
||||
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');
|
||||
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.min = 1;
|
||||
qtyInput.onchange = (e) => {
|
||||
@@ -695,6 +719,22 @@ function renderCart() {
|
||||
}
|
||||
};
|
||||
|
||||
// Кнопка плюс
|
||||
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');
|
||||
itemTotal.className = 'item-total';
|
||||
@@ -708,7 +748,7 @@ function renderCart() {
|
||||
|
||||
row.appendChild(namePrice);
|
||||
row.appendChild(multiplySign);
|
||||
row.appendChild(qtyInput);
|
||||
row.appendChild(qtyControl);
|
||||
row.appendChild(itemTotal);
|
||||
row.appendChild(deleteBtn);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user