Интернет-магазин керамики
FORMA
Интернет-магазин керамики: каталог с фильтрами, карточки изделий, сохраняемая корзина и форма заказа.
- Задача
- Дать покупателю возможность рассмотреть изделия, выбрать товары и оформить заказ.
- Что сделано
- Собрал каталог с фильтрами, карточки товаров, сохраняемую корзину и форму оформления заказа.
- Результат
- Покупатель может сравнить изделия, добавить их в корзину и перейти к оформлению заказа.
Моя роль
Концепция магазина, адаптивная разработка, каталог и фильтры, карточки товаров, корзина и checkout.
- Состав работ
- E-commerce / Каталог / Frontend
- Период
- 2024
- Статус
- завершён
Стек
- Vue
- Vite
- Vue Router
- Tailwind CSS
Первый экран задаёт спокойный характер мастерской и знакомит с изделиями через крупные фотографии.
Каталог как продолжение истории мастерской
Редакционные страницы и товары собраны в одной сдержанной визуальной системе.
Главная соединяет подборки изделий, историю мастерской и переходы в каталог.
Каталог объединяет карточки изделий и параметры подбора, помогая сравнить доступные варианты.
Редакционная страница рассказывает о мастерской и процессе работы, дополняя товарную часть магазина.
Карточка чашки объединяет фотографии, описание изделия и действие добавления в корзину.
Карточка пиалы показывает другой тип изделия в той же системе характеристик и выбора.
Магазин полностью работает на телефоне
Каталог, фильтры, корзина и оформление перестраиваются под вертикальный экран.
Мобильная главная сохраняет фотографический ритм и переходы к товарам.
На телефоне каталог перестраивает сетку товаров, сохраняя фотографии, названия и цены.
Инструкция по уходу оформлена как отдельная читаемая страница для покупателей керамики.
На мобильной карточке вазы фотографии и параметры выстроены последовательно перед добавлением в корзину.
Корзина и оформление без лишних отвлечений
Путь от выбранного изделия до заказа остаётся коротким, спокойным и понятным.
В корзине собраны выбранные изделия. Состав сохраняется в браузере, чтобы к нему можно было вернуться позже.
Оформление заказа вынесено в отдельный сценарий с данными покупателя и составом покупки.
Мобильная корзина сохраняет читаемые названия, количество и переход к оформлению.
На телефоне оформление использует последовательную форму с крупными полями.
Мобильные фильтры открываются отдельной панелью, после выбора параметров можно вернуться к товарам.
Технические детали
Vue Router связывает каталог, карточки товаров и редакционные страницы. Корзина сохраняется в браузере; фильтры, корзина и оформление имеют отдельные мобильные состояния.
Обсудим вашу задачу?
Расскажите, что нужно сделать: сайт, магазин, сервис или автоматизацию работы.