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

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

### 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> <h5 class="mb-0">Доставка</h5>
</div> </div>
<div class="card-body"> <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="row">
<div class="col-md-6"> <div class="col-md-6">
<div class="mb-3 form-check"> <!-- Кнопки выбора типа доставки -->
{{ form.is_delivery }} <div class="mb-3">
<label class="form-check-label" for="{{ form.is_delivery.id_for_label }}"> <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> </label>
</div> </div>
</div>
<!-- Чекбокс "Покупатель = получатель" -->
<div class="mb-3 form-check"> <div class="mb-3 form-check">
{{ form.customer_is_recipient }} {{ form.customer_is_recipient }}
<label class="form-check-label" for="{{ form.customer_is_recipient.id_for_label }}"> <label class="form-check-label" for="{{ form.customer_is_recipient.id_for_label }}">
@@ -959,23 +973,38 @@ if (typeof $ !== 'undefined') {
language: 'ru' language: 'ru'
}); });
// Показ/скрытие полей доставки/самовывоза // === УПРАВЛЕНИЕ ТИПОМ ДОСТАВКИ (КНОПКИ) ===
const deliveryTypeRadios = document.querySelectorAll('input[name="delivery-type"]');
const isDeliveryCheckbox = document.getElementById('{{ form.is_delivery.id_for_label }}'); const isDeliveryCheckbox = document.getElementById('{{ form.is_delivery.id_for_label }}');
const deliveryFields = document.getElementById('delivery-fields'); const deliveryFields = document.getElementById('delivery-fields');
const pickupFields = document.getElementById('pickup-fields'); const pickupFields = document.getElementById('pickup-fields');
function toggleDeliveryFields() { function syncDeliveryType() {
if (isDeliveryCheckbox.checked) { const selectedType = document.querySelector('input[name="delivery-type"]:checked').value;
if (selectedType === 'delivery') {
// Доставка
isDeliveryCheckbox.checked = true;
deliveryFields.style.display = ''; deliveryFields.style.display = '';
pickupFields.style.display = 'none'; pickupFields.style.display = 'none';
console.log('[DELIVERY TYPE] Delivery selected');
} else { } else {
// Самовывоз
isDeliveryCheckbox.checked = false;
deliveryFields.style.display = 'none'; deliveryFields.style.display = 'none';
pickupFields.style.display = ''; 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 }}'); const customerIsRecipientCheckbox = document.getElementById('{{ form.customer_is_recipient.id_for_label }}');