--- title: "FORMA — Интернет-магазин керамики · alekhin.dev" description: "Интернет-магазин керамики: каталог с фильтрами, карточки изделий, сохраняемая корзина и форма заказа." canonical_url: "https://alekhin.dev/projects/forma/" meta: "og:description": "Интернет-магазин керамики: каталог с фильтрами, карточки изделий, сохраняемая корзина и форма заказа." "og:image": "https://alekhin.dev/_og/s/o_44c0113cf3504ceb.png" "og:image:height": "630" "og:image:type": image/png "og:image:width": "1200" "og:title": "FORMA — Интернет-магазин керамики" "twitter:image": "https://alekhin.dev/_og/s/o_44c0113cf3504ceb.png" --- > Index of every page on this site: [llms.txt](https://alekhin.dev/llms.txt) [К проектам](https://alekhin.dev/#projects)2024 Интернет-магазин керамики # FORMA Интернет-магазин керамики: каталог с фильтрами, карточки изделий, сохраняемая корзина и форма заказа.
Задача
Дать покупателю возможность рассмотреть изделия, выбрать товары и оформить заказ.
Что сделано
Собрал каталог с фильтрами, карточки товаров, сохраняемую корзину и форму оформления заказа.
Результат
Покупатель может сравнить изделия, добавить их в корзину и перейти к оформлению заказа.
## Моя роль Концепция магазина, адаптивная разработка, каталог и фильтры, карточки товаров, корзина и checkout.
Состав работ
E-commerce / Каталог / Frontend
Период
2024
Статус
завершён
## Стек - Vue - Vite - Vue Router - Tailwind CSS *Главная страница* Первый экран задаёт спокойный характер мастерской и знакомит с изделиями через крупные фотографии. ## Каталог как продолжение истории мастерской Редакционные страницы и товары собраны в одной сдержанной визуальной системе. *Вся главная страница* Главная соединяет подборки изделий, историю мастерской и переходы в каталог. *Каталог изделий* Каталог объединяет карточки изделий и параметры подбора, помогая сравнить доступные варианты. *О мастерской* Редакционная страница рассказывает о мастерской и процессе работы, дополняя товарную часть магазина. *Чашка Туман* Карточка чашки объединяет фотографии, описание изделия и действие добавления в корзину. *Пиала Река* Карточка пиалы показывает другой тип изделия в той же системе характеристик и выбора. ## Магазин полностью работает на телефоне Каталог, фильтры, корзина и оформление перестраиваются под вертикальный экран. *Главная на телефоне* Мобильная главная сохраняет фотографический ритм и переходы к товарам. *Мобильный каталог* На телефоне каталог перестраивает сетку товаров, сохраняя фотографии, названия и цены. *Уход за изделиями* Инструкция по уходу оформлена как отдельная читаемая страница для покупателей керамики. *Ваза Контур* На мобильной карточке вазы фотографии и параметры выстроены последовательно перед добавлением в корзину. ## Корзина и оформление без лишних отвлечений Путь от выбранного изделия до заказа остаётся коротким, спокойным и понятным. *Корзина* В корзине собраны выбранные изделия. Состав сохраняется в браузере, чтобы к нему можно было вернуться позже. *Оформление заказа* Оформление заказа вынесено в отдельный сценарий с данными покупателя и составом покупки. *Мобильная корзина* Мобильная корзина сохраняет читаемые названия, количество и переход к оформлению. *Оформление на телефоне* На телефоне оформление использует последовательную форму с крупными полями. *Мобильные фильтры* Мобильные фильтры открываются отдельной панелью, после выбора параметров можно вернуться к товарам.
Технические детали Vue Router связывает каталог, карточки товаров и редакционные страницы. Корзина сохраняется в браузере; фильтры, корзина и оформление имеют отдельные мобильные состояния.
## Обсудим вашу задачу? Расскажите, что нужно сделать: сайт, магазин, сервис или автоматизацию работы. ## Связаться [alekhin.v99@gmail.com](mailto:alekhin.v99@gmail.com) [Telegram](https://t.me/alekhin_vv) [GitHub](https://github.com/ValentinAlekhin) ```json {"@context":"https://schema.org","@graph":[{"@id":"https://alekhin.dev/#website","@type":"WebSite","description":"Интернет-магазин керамики: каталог с фильтрами, карточки изделий, сохраняемая корзина и форма заказа.","inLanguage":"ru-RU","name":"FORMA","url":"/projects/forma/","creator":{"@id":"https://alekhin.dev/#identity"},"image":{"@id":"https://alekhin.dev/#/schema/image/1"},"mainEntityOfPage":{"@id":"https://alekhin.dev/projects/forma/#webpage"},"publisher":{"@id":"https://alekhin.dev/#identity"},"workTranslation":{"@id":"https://alekhin.dev/en/#website"}},{"@id":"https://alekhin.dev/projects/forma/#webpage","@type":"WebPage","description":"Интернет-магазин керамики: каталог с фильтрами, карточки изделий, сохраняемая корзина и форма заказа.","name":"FORMA — Интернет-магазин керамики","url":"https://alekhin.dev/projects/forma/","breadcrumb":{"@id":"https://alekhin.dev/projects/forma/#breadcrumb"},"image":{"@id":"https://alekhin.dev/#/schema/image/2"},"isPartOf":{"@id":"https://alekhin.dev/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://alekhin.dev/projects/forma/"]}]},{"@id":"https://alekhin.dev/#identity","@type":"Person","email":"mailto:alekhin.v99@gmail.com","jobTitle":"Разработчик сайтов и сервисов","name":"Валентин Алёхин","url":"https://alekhin.dev/","knowsAbout":["TypeScript","Vue","Nuxt","Node.js","Go","SaaS"],"sameAs":["https://github.com/ValentinAlekhin","https://t.me/alekhin_vv"]},{"@id":"https://alekhin.dev/projects/forma/#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"alekhin.dev","item":"https://alekhin.dev","position":1},{"@type":"ListItem","name":"FORMA","item":"https://alekhin.dev/projects/forma/","position":2}]},{"@id":"https://alekhin.dev/#/schema/image/1","@type":"ImageObject","contentUrl":"https://alekhin.dev/projects/forma/og.webp","inLanguage":"ru-RU","url":"https://alekhin.dev/projects/forma/og.webp"},{"@id":"https://alekhin.dev/#/schema/image/2","@type":"ImageObject","contentUrl":"https://alekhin.dev/projects/forma/og.webp","inLanguage":"ru-RU","url":"https://alekhin.dev/projects/forma/og.webp"}]} ``` ## Sitemap See the full [sitemap](https://alekhin.dev/sitemap.md) for all pages.