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