Заменены чекбокс доставки на две кнопки
## Изменения: ### 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:
@@ -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 }}">
|
||||
С доставкой (снимите галочку для самовывоза)
|
||||
</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 }}');
|
||||
|
||||
Reference in New Issue
Block a user