01 / Задача
Сделать витрину доставки, где гость выбирает блюда и оформляет заказ прямо на сайте, без мессенджеров и звонков. Отдельным требованием была независимость от разработчика: меню, цены, фотографии и реквизиты владелец должен править сам.
02 / Решение
Витрину собрали на статике: меню на 58 позиций в шести категориях, фильтр по категориям, счётчики порций прямо на карточках, корзина в модальном окне и липкая панель с суммой на мобильном. Фотографии отдаются в WebP в двух размерах через srcset с ленивой загрузкой и собственной точкой фокуса кадрирования у каждой позиции; карточки вне экрана не рендерятся, поэтому длинный список не тормозит. Есть светлая и тёмная темы с запоминанием выбора, разметка Restaurant и Menu для поисковиков, работа с клавиатуры и учёт prefers-reduced-motion. Админку вынесли в отдельный Node-сервер: заказы с составом и суммой, меню с пагинацией, поиском и загрузкой фото, категории, реквизиты для документов и подвала. Правки пишутся в исходники и пересобирают сайт автоматически, перед каждой записью создаётся резервная копия.
03 / Реализация
Что сделали
- Витрина меню на 58 позиций в 6 категориях
- Фильтр по категориям
- Счётчики порций на карточках
- Корзина в модальном окне
- Липкая панель с суммой на мобильном
- Оформление заказа с сайта
- Фото в WebP двух размеров с srcset
- Своя точка фокуса кадрирования у позиции
- Отложенный рендер карточек вне экрана
- Светлая и тёмная темы с запоминанием
- Разметка Restaurant и Menu для поисковиков
- Доступность с клавиатуры и prefers-reduced-motion
- Админка: заказы с составом и отметкой об обработке
- Админка: меню с поиском, фильтром и загрузкой фото
- Админка: категории и реквизиты организации
- Автоматическая пересборка сайта после правок
- Резервная копия перед каждой записью
- Юридические страницы: оферта, политика, согласие