Интернет-магазин
Магазин букетов, в котором заказ оформляется за четыре шага
Мобильная витрина для цветочного магазина с доставкой: слайдер подборок, каталог с фильтром, карточка с настройкой букета и оформление заказа. Все экраны ниже рабочие: листайте, нажимайте, добавляйте в корзину.
Листайте ряд вбок или выбирайте экран вкладкой
«Пион и мята» — вымышленный магазин, цены и названия придуманы для показа. Фото с Unsplash.
- Задача
- Магазину с доставкой нужна витрина для телефона, где букет выбирают и оплачивают за пару минут: большинство заказов приходит с мобильного.
- Решение
- Собрал витрину как приложение: полноэкранные подборки, фильтр и сортировка в шторках, настройка букета прямо в карточке, плавающий блок действий вместо меню и оформление заказа в четыре коротких шага с проверкой полей.
- Что получает владелец
- Путь от каталога до оплаты за четыре экрана, без регистрации
- Фильтр, сортировка, корзина и избранное работают без перезагрузки
- Открытка и лента выбираются в карточке и попадают в заказ отдельной строкой
- В рабочей версии подключаются оплата картой и СБП, заявки в Telegram или CRM и админка товаров
- Стек
- HTML и CSS без фреймворков
- TypeScript
- Astro для сборки
- Фото WebP
- Шрифты Onest и Oswald
Как устроено
Получатель и адрес, день и интервал, открытка, оплата. Каждый шаг проверяет свои поля и подсказывает, что поправить, а итог считается с доставкой и доплатой за точное время.
Фильтр выезжает снизу, как на телефоне: кнопка «Показать» сразу считает, сколько букетов подходит. Сортировка переставляет карточки без перезагрузки страницы.
Открытка с текстом и лента из восьми цветов выбираются в карточке и переносятся в заказ. Выбор виден на плитке до оформления.
Фото пережаты в WebP и грузятся по мере прокрутки, шрифты лежат на сайте, сторонних библиотек нет. Lighthouse на телефоне ставит скорости 100 из 100.
Витрина собрана под ширину от 320 до 430 пикселей: безопасные зоны, плавающий блок действий вместо бургера, клавиатура не закрывает поля.
Соберу такую же под ваш товар: каталог, корзина, оплата и доставка. Смета по разделам, оплата по этапам после приёмки, тестовая копия до запуска.
Напишите в чате на Профи.ру, что за проект и к какому сроку. В ответ пришлю смету по пунктам.