РАЗБОР ПРОЕКТАИНТЕРНЕТ-МАГАЗИН
Капсула — интернет-магазин бренда БАДов: витрина, заказ и личный кабинет
Фронтенд интернет-магазина на 1С-Битрикс: вёрстка по макетам из Figma — витрина, товар, корзина, оформление заказа и кабинет, — которую затем интегрируют в шаблоны Битрикса. Пока сайт работает на демонстрационных данных, а формы и кабинет отдают события, к которым подключается бэкенд.
- Роль
- Фронтенд-разработчик
- Сроки
- 2026, сентябрь
Задача
Сверстать по макетам весь магазин — от витрины до личного кабинета — под интеграцию в интернет-магазин на 1С-Битрикс: статическим многостраничным сайтом без JS-фреймворка и с событиями для подключения API.
Что входит в решение
- Вёрстка под интернет-магазин на 1С-Битрикс: статические страницы и чистый TypeScript без фреймворка, которые переносятся в шаблоны Битрикса.
- Сборка на Vite и Vituum: каждая страница — отдельный Pug-шаблон, общие блоки — миксины, стили по BEM на Sass-модулях.
- Плавная типографика: корневой размер шрифта зависит от ориентации экрана и типа ввода — на сенсорных экранах чистый vw, с мышью половина через rem, чтобы работал зум браузера.
- Карточка товара с формами выпуска и ценой, корзина, оформление заказа: контакты, доставка курьером или в пункт выдачи, оплата через СБП или картой, списание бонусных баллов.
- Личный кабинет: личные данные, заказы с фильтрами и повтором заказа, детали заказа со статусами, история начисления и списания баллов.
- Модальные окна и формы отдают события — отправка, подтверждение кода, повторная отправка, сохранение профиля, — к которым подключается API; профиль и корзина сохраняются в браузере.
- Иконки собираются в спрайт при загрузке, изображения конвертируются в AVIF и WebP скриптом на sharp.
Коммерческий проект: весь фронтенд по готовому дизайну сделал я. Скриншоты сняты с локальной сборки на демонстрационных данных, название и логотип бренда скрыты.