Одна форма вместо восьми Демо на видео ⬆️ Верстала я на днях первый экран страницы, где настроены продажи серии уроков и удивилась от количества форм, их было столько же, сколько карточек с уроками😳 Это было сделано для того, чтобы выбранный урок при открытии формы всегда был на первом месте в списке, с активным чекбоксом и выделением. Что логично с точки зрения покупателя, сразу видно, что выбрано и исключен лишний клик. Но 8 форм😳 А если позиций на странице будет 20, 30... При таком количестве блоков с формой - это лишняя работа для специалиста и потенциальный хаос при редактировании. 💡 Решение Я оставила одну универсальную форму с полным списком уроков в предложении. А с помощью скрипта: - связала каждую кнопку с нужным предложением внутри этой формы, - при клике нужный урок автоматически отмечается галочкой, - сам блок с уроком поднимается в начало списка, - пользователь видит его первым, но при этом может выбрать и другие уроки. После закрытия формы всё возвращается в исходное состояние, чекбоксы сбрасываются👌 ✨ Таким образом мы оптимизируем саму механику GetCourse, решив сразу три типовые боли: - дублирование форм, - запутанный UX для пользователей, - лишнюю ручную работу для специалистов. 🧠 Результат ✅ вместо восьми форм — одна, ✅ пользователю не нужно искать свой урок — он сразу сверху и выделен, ✅ можно добавить другие уроки, если захочет, ✅ специалисту проще поддерживать сайт — правки делаются в одном месте. P. S. Попутно починила баг Геткурс, когда он выделяет цветом только одно последнее предложение из выбранных, что сбивает пользователя. Теперь все выбранные чекбоксы выделены цветом👌 Сам скрипт я выложу в комментариях под этим постом 👇