Живая мастерская · Alpine.js
Данные → работающий интерфейс
Меняйте поля, проходите шаги, проверяйте результат и забирайте готовую страницу со своим состоянием.
Тариф и состав услуги
Сколько стоит выбранный пакет
Поля сразу пересчитывают итог. Цены условные: 490 ₽ за пользователя в месяц; поддержка — 1 500 ₽ в месяц.
Попробуйте: выберите 10 пользователей и 12 месяцев без поддержки. Скидка 15% уменьшит сумму с 58 800 до 49 980 ₽.
От 1 до 100 пользователей. Пустое поле не считается нулём.
Стоимость за выбранный период
- В месяц
- До скидки
- Скидка
Это расчёт примера, без оплаты и оформления заказа.
Проверьте число пользователей
Исправьте поле — тогда появится корректный расчёт.
x-model.number связывает поля с данными; вычисляемое свойство возвращает цену; x-text выводит результат.
Заявка с несколькими позициями
Добавьте работы и посчитайте сумму
Каждая строка хранит собственный идентификатор. Добавление и удаление не переносят введённые значения между соседними строками.
Попробуйте: измените количество первой работы с 2 на 3 — итог станет 8 500 ₽. Затем удалите эту строку: интеграция останется за 4 000 ₽.
В заявке пока нет позиций
Добавьте первую работу. Начальные строки можно вернуть кнопкой сброса.
x-for создаёт строки; :key="row.id" сохраняет их идентичность. Ошибочная строка блокирует общий итог, вместо незаметного исключения из суммы.
Заявка без перегруженного экрана
Три шага до понятного результата
Переход вперёд проверяет текущий шаг, переход назад сохраняет ввод. Никакие данные не отправляются на сервер.
Попробуйте: очистите описание и нажмите «Далее». После исправления перейдите к параметрам, укажите 16 часов и проверьте итоговую карточку.
x-show переключает шаги без потери полей; методы проверяют данные, а $nextTick помогает поставить фокус после изменения экрана.
Личный кабинет и настройки проекта
Редактирование с сохранением и отменой
Сохранённая карточка и редактируемые поля — разные объекты. Отмена не оставляет в карточке случайные изменения.
Попробуйте: измените название, затем нажмите «Отменить». Карточка останется прежней. Повторите изменение и сохраните — теперь результат обновится.
Ответственный
Карточка готова к редактированию
Откройте поля кнопкой «Редактировать карточку». Изменения применяются только после сохранения.
Перед редактированием создаётся копия объекта. @submit.prevent применяет проверенный ввод; отмена восстанавливает копию сохранённых данных.
Каталог услуг
Выберите условия и примените их
Настройки в панели сначала остаются черновыми. Список меняется только после «Применить фильтры»; отдельные условия можно снять чипами.
Попробуйте: категория «Формы» и «Только доступные» оставят одну карточку. Максимальная цена 1 000 ₽ покажет пустую выдачу.
Подходящие услуги
Под эти условия ничего не найдено
Увеличьте цену или снимите часть ограничений.
Alpine управляет двумя наборами фильтров. Нативный <dialog> ограничивает фокус; Escape закрывает панель, не применяя черновой выбор.
Персональные настройки интерфейса
Настройте вид и обновите страницу
Плотность, порядок и тема сохраняются официальным плагином Persist. Изменяется только область предпросмотра ниже.
Попробуйте: выберите тёмную тему и компактный вид, затем обновите страницу. Если браузер разрешает хранение, настройки останутся.
Услуги в личном кабинете
$persist(...).as(...).using(...) сохраняет настройки по собственному ключу. Сброс не затрагивает другие данные сайта; при запрете хранилища используется память вкладки.