Шкаф Элемент Эко
Выберите количество секций и их наполнение
Количество секций:
...
/* Новый блок для мобильного выпадающего списка */
.mobile-select {
display: none; /* Скрыт по умолчанию */
margin-bottom: 12px;
}
.mobile-select select {
width: 100%;
padding: 8px;
border-radius: 8px;
border: 2px solid #e5e7eb;
font-size: 0.9rem;
font-weight: 600;
color: #1e1e1e;
appearance: none;
background-image: linear-gradient(to bottom right, #2782fe, #2782fe), linear-gradient(#fff, #fff);
background-repeat: no-repeat;
background-position: right 10px top 50%, 0 0;
background-size: 10px 10px, 100% 100%;
transition: all 0.15s ease;
}
/* Показывать выпадающий список только на мобильных */
@media (max-width: 600px) {
.mobile-select {
display: block;
}
.wc-fill-options {
display: none; /* Прячем обычные кнопки */
}
}
// Обработка мобильного выпадающего списка
function renderMobileSelect() {
const mobileSelectContainer = document.getElementById('mobile-select');
mobileSelectContainer.innerHTML = ''; // Очистка контейнера
// Генерируем выпадающий список для каждой секции
for (let i = 0; i < wcState.sections; i++) {
const sectionTitle = `Секция ${i + 1}`;
const select = document.createElement('select');
select.className = 'wc-mobile-select';
select.dataset.sectionIndex = i;
// Опции для каждого типа наполнения
WC_FILLS.forEach(fill => {
const option = document.createElement('option');
option.value = fill.id;
option.textContent = fill.label;
if (wcState.fills[i] === fill.id) {
option.selected = true;
}
select.appendChild(option);
});
// Обработчик смены значения
select.addEventListener('change', event => {
const newValue = event.target.value;
const sectionIndex = parseInt(event.target.dataset.sectionIndex);
wcState.fills[sectionIndex] = newValue;
wcRenderCards();
wcRenderSVG();
});
// Добавляем заголовок и сам выпадающий список
const wrapper = document.createElement('div');
wrapper.innerHTML = `
${sectionTitle}:`;
wrapper.appendChild(select);
mobileSelectContainer.appendChild(wrapper);
}
}
// Вызов рендера мобильного списка после инициализации
renderMobileSelect();
// Перезапускаем рендер мобильного списка при изменении количества секций
document.getElementById('wc-section-selector').addEventListener('click', function(e) {
const btn = e.target.closest('.wc-section-btn');
if (!btn) return;
const n = parseInt(btn.getAttribute('data-n'), 10);
wcState.sections = n;
wcRenderCards();
wcRenderSVG();
renderMobileSelect(); // Важно обновить выпадающий список
});
