Заменены чекбокс доставки на две кнопки

## Изменения:

### 1. UI Улучшения
- Заменен чекбокс "С доставкой" на две кнопки: "С ДОСТАВКОЙ" и "САМОВЫВОЗ"
- Кнопки расположены в один ряд, используют btn-group Bootstrap
- Первая кнопка активна по умолчанию (С ДОСТАВКОЙ)
- Добавлены иконки: truck (доставка), shop (самовывоз)
- Чекбокс скрыт, видны только две кнопки

### 2. Функциональность
- Две кнопки работают как radio buttons (только одна может быть активна)
- При выборе кнопки синхронизируется скрытое поле is_delivery (Django form)
- Показываются/скрываются соответствующие блоки:
  - "С ДОСТАВКОЙ" → блок адреса доставки
  - "САМОВЫВОЗ" → блок с точками самовывоза

### 3. JavaScript логика
- Новая функция syncDeliveryType() синхронизирует состояние кнопок с полем is_delivery
- При клике на кнопку обновляется скрытое поле для отправки на сервер
- Логи в консоль для отладки

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-11 03:02:35 +03:00
parent ddbb4f963b
commit 8360f98ad2

View File

@@ -166,14 +166,28 @@
<h5 class="mb-0">Доставка</h5>
</div>
<div class="card-body">
<!-- Скрытое поле для передачи значения is_delivery -->
<input type="hidden" id="{{ form.is_delivery.id_for_label }}" name="{{ form.is_delivery.name }}" value="on">
<div class="row">
<div class="col-md-6">
<div class="mb-3 form-check">
{{ form.is_delivery }}
<label class="form-check-label" for="{{ form.is_delivery.id_for_label }}">
С доставкой (снимите галочку для самовывоза)
<!-- Кнопки выбора типа доставки -->
<div class="mb-3">
<label class="form-label d-block mb-2">Тип доставки</label>
<div class="btn-group w-100" role="group">
<input type="radio" class="btn-check" name="delivery-type" id="delivery-type-delivery" value="delivery" checked>
<label class="btn btn-outline-primary" for="delivery-type-delivery">
<i class="bi bi-truck"></i> С ДОСТАВКОЙ
</label>
<input type="radio" class="btn-check" name="delivery-type" id="delivery-type-pickup" value="pickup">
<label class="btn btn-outline-primary" for="delivery-type-pickup">
<i class="bi bi-shop"></i> САМОВЫВОЗ
</label>
</div>
</div>
<!-- Чекбокс "Покупатель = получатель" -->
<div class="mb-3 form-check">
{{ form.customer_is_recipient }}
<label class="form-check-label" for="{{ form.customer_is_recipient.id_for_label }}">
@@ -959,23 +973,38 @@ if (typeof $ !== 'undefined') {
language: 'ru'
});
// Показ/скрытие полей доставки/самовывоза
// === УПРАВЛЕНИЕ ТИПОМ ДОСТАВКИ (КНОПКИ) ===
const deliveryTypeRadios = document.querySelectorAll('input[name="delivery-type"]');
const isDeliveryCheckbox = document.getElementById('{{ form.is_delivery.id_for_label }}');
const deliveryFields = document.getElementById('delivery-fields');
const pickupFields = document.getElementById('pickup-fields');
function toggleDeliveryFields() {
if (isDeliveryCheckbox.checked) {
function syncDeliveryType() {
const selectedType = document.querySelector('input[name="delivery-type"]:checked').value;
if (selectedType === 'delivery') {
// Доставка
isDeliveryCheckbox.checked = true;
deliveryFields.style.display = '';
pickupFields.style.display = 'none';
console.log('[DELIVERY TYPE] Delivery selected');
} else {
// Самовывоз
isDeliveryCheckbox.checked = false;
deliveryFields.style.display = 'none';
pickupFields.style.display = '';
console.log('[DELIVERY TYPE] Pickup selected');
}
}
isDeliveryCheckbox.addEventListener('change', toggleDeliveryFields);
toggleDeliveryFields(); // Инициализация при загрузке
// Обработчики для кнопок
deliveryTypeRadios.forEach(radio => {
radio.addEventListener('change', syncDeliveryType);
});
// Инициализация при загрузке
console.log('[DELIVERY TYPE] Initializing delivery type buttons');
syncDeliveryType();
// Показ/скрытие полей получателя
const customerIsRecipientCheckbox = document.getElementById('{{ form.customer_is_recipient.id_for_label }}');