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:
@@ -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);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user