Техническое задание

Инженерная версия — для разработки и оценки. Версия 1.0 · 23.06.2026

0. Назначение документа

Документ описывает требования к разработке нового сайта и интернет-магазина бренда La Voie Nomade (далее — LVN). Это инженерная версия: содержит карту экранов, модель данных, API-контур, состояния компонентов, нефункциональные требования, разбивку на этапы и критерии приёмки. Параллельно существует упрощённая версия для заказчика.

Документ пересобран на основе: - текущего сайта lavoienomade.com (Joomla + JShopping), - макетов в Figma (L2sNCOacL3rQrWRS49BmFd), - двух черновиков ТЗ (этап 1 — витрина, этап 2 — админка/бэкенд).

1. О бренде и контексте

La Voie Nomade («Путь кочевника», фр.) — премиальный ювелирный бренд из Алматы. Философия — соединение культур и традиций Центральной Азии и Великого Шёлкового пути. Основатель — Александра Соко. Украшения позиционируются как часть идентичности и самовыражения владельца, сопровождающие его на личном пути.

Текущее состояние: сайт работает на Joomla + JShopping. Цель проекта — полностью заменить его на современный, быстрый, премиальный e-commerce на собственном стеке с управляемой админкой.

Ключевые свойства бизнеса, влияющие на архитектуру: - Мультиязычность: RU / KAZ / EN. - Мультивалютность: ₸ KZT (базовая) / ₽ RUB / € EUR / $ USD. - Категории украшений: Кольца, Серьги, Подвески, Шармы, Колье, Браслеты, Аксессуары. - Именованные коллекции (напр. Bereke, Tribute) и именованные изделия (Universe, Arrow, Moon, Irbis Eye и т.д.). - Варианты изделий: размер, цвет металла (золото), вставки/камни, материал. - Оплата: ePay Halyk (Visa/Mastercard) и наличные при доставке по Алматы. - Доставка: курьер по Алматы (2000 ₸), СДЭК по Казахстану (7–14 дней), экспресс СДЭК (3–5 дней), самовывоз из магазинов. - Изделия могут изготавливаться на заказ / по эскизу, есть сервис изменения размера — это контентно-сервисная составляющая бренда.

2. Цели проекта

1. Премиальная визуальная подача уровня luxury-бренда (медленные, выверенные анимации, типографика, крупные изображения).
2. Полноценный интернет-магазин: каталог → карточка → корзина → оформление → оплата → заказ.
3. Самостоятельное управление контентом и товарами через админку (без разработчика).
4. Высокая скорость и SEO (SSR/ISR, оптимизация изображений, разметка schema.org).
5. Мультиязычность и мультивалютность из коробки.
6. Адаптив под все ключевые брейкпоинты.

3. Технологический стек (рекомендация)

Решение по бэкенду фиксируется на старте этапа 2. Рекомендация — Medusa.js, т.к. она нативно закрывает варианты товара, корзину, заказы, регионы (валюты), скидки и админ-API, существенно сокращая объём кастомной разработки. Если выбран кастом — закладывается +2–3 недели.

4. Дизайн-система (из Figma)

4.1 Цвета

4.2 Типографика

• Дисплейный/заголовочный шрифт: Helvetica Neue (Thin / Light / Roman / Medium / Bold). H1 84/88 (-1), H2 64/68 (-1), H3 34/38 (-1).
• Акцидентный рукописный шрифт: Costa Blanca Cyrillic — для выделенных слов в заголовках (бордовый #6c0400).
• Текст: Inter (местами Roboto).
• Mozer-Trial — дополнительное начертание для отдельных блоков.

4.3 Сетка и брейкпоинты

Контентная ширина и адаптив: 1920 / 1290 / 1024 / 768 / 480 / 375 / 320 px. Базовый дизайн отрисован под 1920, рабочая контентная ширина ~1290.

4.4 Состояния и интерактив

• hover на карточках товара (смена изображения / иконка «в избранное»),
• плавные переходы, сдержанные анимации появления (без перегруза),
• видео-фон в hero на главной (video-bg.mp4),
• ленивые загрузки изображений.

Допущение: часть фреймов в Figma помечена как незавершённые («ТЗ ???») — Корзина, Избранное, Карточка товара, 404 и мобильные версии ряда страниц. Перед версткой этих экранов требуется финализация макетов дизайнером. Несоответствия фиксируются как design-блокеры (см. раздел «Вопросы»).

5. Карта экранов (sitemap)

Все публичные URL — с языковым префиксом /{ru|kk|en}/....

5.1 Публичная часть

5.2 E-commerce и аккаунт

5.3 Админка (этап 2)

/admin/...: Дашборд · Товары · Варианты · Категории · Коллекции · Заказы · Клиенты · Контент-страницы · Публикации · Магазины · Медиабиблиотека · Валюты/курсы · Промокоды (опц.) · Переводы (i18n) · Пользователи админки/роли · Настройки.

6. Детализация ключевых экранов

6.1 Главная

Hero с видео-фоном и слоганом «Что делает нас особенными?» + CTA «Перейти в каталог». Блок «Категории» (7 плиток). Горизонтальные подборки товаров (карточки с бейджами NEW / MUST HAVE, иконка wishlist, hover-смена фото). Блок «Основатель бренда» (фото + цитата Александры Соко). Блок «Наша философия». Блок «Мы в Instagram» + лента. Подвал: навигация, категории, инфо-ссылки, подписка на рассылку, соцсети, крупный логотип-надпись «LA VOIE* NOMADE».

6.2 Каталог / Категория

Заголовок-категория с переключателем подкатегорий (иконки), панель фильтров (категория, коллекция, цена, металл, камень, наличие — финальный набор уточнить) и сортировки (по популярности / новизне / цене ↑↓). Сетка карточек (переключение сетка/список). Карточка: фото, название, коллекция, цена (+ старая цена при скидке), бейдж, wishlist, «В корзину». Пагинация / бесконечная подгрузка. Внизу — блок ценностей (доставка, гарантия, сертификация, ювелирный уход).

6.3 Карточка товара

Галерея (несколько фото + hover/зум), название, коллекция, цена/старая цена, выбор варианта (размер, цвет металла, камень), счётчик количества, «В корзину» + wishlist. Аккордеоны: Характеристики (вес, проба, металл, вставки, размер, артикул), Доставка, Возврат/гарантия, Видеообзор. Блок «Другие изделия коллекции». Разметка schema.org/Product.

6.4 Коллекции / Страница коллекции

Список коллекций (крупные обложки + название). Страница коллекции: hero-описание (история коллекции) + грид товаров коллекции.

6.5 Избранное (Wishlist)

Заголовок «Ваш список желаний», счётчик товаров, сортировка, грид карточек с «В корзину» и удалением. Сохраняется для гостя (cookie/localStorage) и для авторизованного (в БД, синхронизация при входе).

6.6 Корзина

Список позиций (фото, название, коллекция, вариант, цена, qty, удалить), сводка заказа (сумма, доставка — предв., итого), промокод (опц.), CTA «Оформить заказ». Блок ценностей + «Другие изделия». Пустое состояние.

6.7 Оформление заказа (Checkout)

Шаги/единая форма: контакты (имя, телефон, email), способ доставки (Алматы-курьер / СДЭК / экспресс / самовывоз — с расчётом стоимости и адресом), способ оплаты (онлайн картой через одну подключённую платёжную систему), комментарий, согласие с офертой и обработкой ПД. Итоговая сводка. Переход на hosted-страницу платёжной системы → возврат на /checkout/success или страницу ошибки.

6.8 Личный кабинет

Профиль (данные, смена пароля), история заказов со статусами, детальная страница заказа, адресная книга, избранное.

7. Модель данных (основные сущности)

i18n-поля ({ru, kk, en}) помечены *. Базовая валюта цен — KZT; пересчёт в другие валюты по курсам (§7.10).

7.1 Product — id, sku/артикул, slug, title*, description*, categoryId, collectionId, status (draft/active/archived), badges[] (NEW/MUST HAVE/…), basePrice, oldPrice?, images[] (порядок), attributes (вес, проба, металл, вставки), seo{title*, description*}, isMadeToOrder?, createdAt, updatedAt

7.2 ProductVariant — id, productId, title (напр. «4 mm / Жёлтое золото»), options{size, metalColor, stone, material}, sku, priceDelta, stockQty, available

7.3 Category — id, slug, title*, parentId?, image, sortOrder, seo

7.4 Collection — id, slug, title*, description* (история), cover, gallery[], productIds[], seo

7.5 MediaAsset — id, url, alt*, width, height, type

7.6 Customer (User) — id, name, phone, email, passwordHash, addresses[], wishlist[productId], createdAt

7.7 Address — id, customerId, city, street, building, apartment, comment, isDefault

7.8 Cart — id, customerId? / sessionId, items[{variantId, qty, priceSnapshot}], currency, updatedAt

7.9 Order — id, number, customer{name, phone, email}, items[{variantId, titleSnapshot, qty, price}], subtotal, deliveryMethod, deliveryCost, deliveryAddress, paymentMethod (epay/cash), paymentStatus (pending/paid/failed/refunded), status (new/processing/shipped/completed/cancelled), comment, currency, total, createdAt

7.10 CurrencyRate — code (KZT/RUB/EUR/USD), rateToBase, updatedAt (обновление ручное в админке или авто по API ЦБ — уточнить)

7.11 Page (CMS) — id, slug, title*, body* (rich), seo — инфо/юр. страницы

7.12 Publication — id, title*, cover, excerpt*, source, externalUrl?, body*, publishedAt

7.13 Store — id, name, address*, phone, workingHours, geo{lat, lng}

7.14 Promo (промокоды) — id, code, type (percent/fixed), value, conditions, validFrom, validTo, usageLimit

7.15 AdminUser / Role — id, name, email, passwordHash, role (admin/manager), permissions[]

8. API-контур (основные группы)

REST (или GraphQL при Medusa-storefront). Все списки — с пагинацией, фильтрами, локалью и валютой.

• Catalog: GET /products (filters: category, collection, price range, metal, stone, availability; sort; page), GET /products/{slug}, GET /categories, GET /collections, GET /collections/{slug}, GET /search?q=
• Cart: GET /cart, POST /cart/items, PATCH /cart/items/{id}, DELETE /cart/items/{id}
• Wishlist: GET /wishlist, POST /wishlist/{productId}, DELETE /wishlist/{productId}
• Checkout/Orders: POST /orders, GET /orders/{id}, GET /account/orders, POST /delivery/calc (СДЭК), POST /payments/epay/init, POST /payments/epay/callback (webhook)
• Auth: POST /auth/register, POST /auth/login, POST /auth/logout, POST /auth/reset-password, GET /me
• Account: PATCH /me, GET/POST/PATCH/DELETE /me/addresses
• Content: GET /pages/{slug}, GET /publications, GET /stores, GET /currencies
• Admin: CRUD по всем сущностям §7 + загрузка медиа + управление переводами + экспорт заказов.

Требования: валидация входных данных, rate limiting на auth/checkout, идемпотентность платёжных колбэков, JWT/сессии httpOnly, CORS.

9. Интеграции

10. Нефункциональные требования

Производительность: Lighthouse Performance ≥ 90 (mobile), LCP < 2.5 s, CLS < 0.1; изображения WebP/AVIF, next/image, lazy-load, CDN; ISR для каталога/карточек.

SEO: SSR/ISR, уникальные title/description на каждую страницу и язык, OpenGraph, sitemap.xml, robots.txt, ЧПУ-URL, хлебные крошки, разметка schema.org Product / BreadcrumbList / Organization, hreflang для RU/KK/EN, редиректы со старых Joomla-URL (карта 301).

Адаптив: корректная работа на 320/375/480/768/1024/1290/1920.

Доступность: контраст, alt у изображений, фокус-стейты, навигация с клавиатуры, семантика.

Безопасность: HTTPS, валидация и санитизация ввода, защита форм (анти-спам), rate limiting, хранение паролей (bcrypt/argon2), идемпотентные платёжные webhooks, секреты в env.

Правовое (РК): cookie-consent, страницы оферты / политики / обработки ПД, согласия в формах, хранение ПД согласно законодательству РК.

Мультиязычность/валюта: контент на RU/KK/EN, переключатели языка и валюты в шапке, пересчёт цен по курсам.

Логирование/мониторинг: ошибки (Sentry), логи заказов и платежей.

11. Этапы, результат и критерии приёмки

Проект разбит на 3 этапа (полный e-commerce, реалистичная последовательность).

Этап 1 — Публичная часть (витрина) на mock-данных

Состав: настройка проекта (Next.js + Tailwind + i18n), дизайн-система/токены, верстка всех публичных экранов §5.1, каталог с фильтрами/сортировкой (фронтовая логика на mock), карточка товара, коллекции, контент-страницы, корзина и избранное как фронтовые компоненты (локальное состояние, без бэкенда — т.к. присутствуют в дизайне), адаптив, оптимизация, базовое SEO, 404. Результат: полностью кликабельный сайт-витрина на тестовых данных. Критерии приёмки: все экраны §5.1 сверстаны и адаптивны (320–1920); Lighthouse ≥ 90; навигация и состояния работают; контент на 3 языках подключается; корзина/избранное работают локально.

Этап 2 — Backend, БД и админка

Состав: проектирование БД (§7), реализация API (§8), админка (товары, варианты, категории, коллекции, заказы, клиенты, контент-страницы, публикации, магазины, медиа, валюты, переводы, роли), импорт товаров из CSV, управление баннерами и подборками главной, авторизация и защита доступа, работа с изображениями (загрузка/хранение/оптимизация), управление мультиязычным контентом. Результат: рабочая админка + бэкенд + БД; можно наполнять каталог и контент. Критерии приёмки: CRUD по всем сущностям; загрузка изображений; создание заказа через API; роли админ/менеджер; данные отдаются на 3 языках и в нужной валюте.

Этап 3 — Интеграция, корзина/заказ/оплата, ЛК, запуск

Состав: подключение фронта к API, реальные корзина/избранное (с синхронизацией для авторизованных), checkout, интеграция одной платёжной системы (онлайн-оплата картой), расчёт доставки (СДЭК) + самовывоз, оформление и статусы заказов, промокоды, email- и WhatsApp/Telegram-уведомления, личный кабинет, аналитика (Метрика/GA4/Pixel + e-commerce события), 301-редиректы со старого сайта, финальное QA и деплой. Результат: боевой интернет-магазин. Критерии приёмки: сквозной сценарий «каталог → корзина → оформление → онлайн-оплата → заказ в админке → email клиенту» проходит на проде; самовывоз работает; ЛК показывает заказы; аналитика фиксирует purchase; миграция URL без потери SEO.