595 lines
58 KiB
Markdown
595 lines
58 KiB
Markdown
---
|
||
|
||
# Техническое задание на разработку интернет-магазина с интеграцией 1С
|
||
|
||
---
|
||
|
||
## 1. Введение и цели проекта
|
||
|
||
**1.1. Название проекта:**
|
||
Разработка интернет-магазина HOMM с глубокой интеграцией корпоративной системы 1С.
|
||
|
||
**1.2. Цели проекта:**
|
||
|
||
1. Создать современный интернет-магазин, который является **публичной витриной** для данных из 1С и **полноценным инструментом продаж**, с возможностью реализации добавления ассортимента и продажи товаров поставщиков.
|
||
|
||
2. Обеспечить полную автоматизацию бизнес-процессов через двусторонний обмен данными между сайтом и 1С по всем ключевым направлениям (товары, цены, остатки, заказы, статусы, клиенты, бонусы).
|
||
|
||
3. Сделать интерфейс максимально удобным и интуитивно понятным для пользователя, основываясь на дизайн-референсах.
|
||
|
||
4. Главная программа – **1С**. Все процессы должны быть отражением 1С, но с учетом юзабилити с пользовательской стороны.
|
||
|
||
5. Реализовать гибкую систему лояльности (бонусы, сертификаты, промокоды) и широкий спектр платежных методов.
|
||
|
||
---
|
||
|
||
## 2. Общие требования к дизайну и пользовательскому интерфейсу (UI/UX)
|
||
|
||
**2.1. Вдохновение и референсы:**
|
||
Основным источником вдохновения для визуального стиля является сайт **hiberg.ru**.
|
||
|
||
**Требуемые характеристики дизайна:**
|
||
- **Эстетика:** Чистый, современный минимализм. Много свободного воздуха («белого пространства»).
|
||
- **Цветовая гамма:** Сдержанная, благородная. Использование базовых цветов (белый, темно-серый, черный) в сочетании с одним-двумя акцентными цветами для кнопок и ключевых элементов (например, фирменный цвет бренда).
|
||
- **Типографика:** Использование качественных, легкочитаемых шрифтов. Четкая иерархия заголовков (H1-H4) и текста.
|
||
- **Визуальный контент:** Акцент на качественных фотографиях товаров на чистом фоне. Минимальное использование декоративных элементов, которые не несут смысловой нагрузки.
|
||
- **Категории товаров:** Продуманное отображение категорий с использованием крупных баннеров или плиточной сетки.
|
||
- **Юзабилити:** Интуитивно понятная навигация, продуманные пользовательские сценарии (от поиска товара до оформления заказа). Все действия на сайте должны быть «легкими» и требовать минимум кликов.
|
||
|
||
**2.2. Адаптивность и кроссплатформенность:**
|
||
- Сайт должен корректно отображаться и быть полностью функциональным на всех типах устройств: десктопы (все популярные разрешения экрана), планшеты и смартфоны (iOS, Android).
|
||
- Совместимость с последними версиями браузеров: Google Chrome, Mozilla Firefox, Safari, Microsoft Edge, а также с их предшествующими двумя основными версиями.
|
||
- Кроссбраузерность: корректное отображение во всех современных браузерах.
|
||
|
||
---
|
||
|
||
## 3. Функциональные требования
|
||
|
||
### 3.1. Интеграция с 1С (Ядро системы)
|
||
|
||
Это главная и самая критичная часть проекта. Сайт — это не отдельная система, а клиентский интерфейс к базе 1С.
|
||
|
||
**3.1.1. Обмен данными (Синхронизация):**
|
||
|
||
- **Тип обмена:** Двусторонний, автоматический, с использованием REST API. Рекомендуемый протокол — обмен по расписанию (например, каждые 5–15 минут) с возможностью ручного запуска.
|
||
|
||
- **Направления синхронизации:**
|
||
|
||
*Из 1С на сайт:*
|
||
- Товары: артикул, название, полное описание, характеристики (сгруппированные по свойствам), цена, остатки, штрих-коды.
|
||
- Изображения товаров (медиафайлы).
|
||
- Категории и структура каталога.
|
||
- Статусы заказов (после обработки менеджером в 1С).
|
||
- Актуальные курсы валют (если применимо).
|
||
|
||
*С сайта в 1С:*
|
||
- Новые заказы (со всеми деталями: состав, сумма, данные клиента, выбранный способ доставки и оплаты, примененные бонусы и сертификаты).
|
||
- Изменения статуса заказа, инициированные пользователем (например, отмена заказа).
|
||
- Данные о новых зарегистрированных пользователях (для синхронизации бонусной программы).
|
||
|
||
**3.1.2. Администрирование интеграции (Панель администратора):**
|
||
|
||
- **Мониторинг:** Отображение статуса последнего обмена (дата, время, успешно/ошибка).
|
||
- **Логирование:** Хранение и просмотр логов (журналов) каждого обмена для диагностики ошибок.
|
||
- **Ручное управление:** Кнопки для принудительного запуска или остановки синхронизации.
|
||
- **Уведомления:** Настройка и отправка критических оповещений администратору при сбоях обмена (по Email, в Telegram, через SMS).
|
||
|
||
---
|
||
|
||
### 3.2. Каталог и Карточка товара (Витрина)
|
||
|
||
**3.2.1. Общие принципы:**
|
||
- Данные о товарах (цены, остатки, описания) отображаются на сайте **исключительно** из 1С. Ручное редактирование этих полей в админке сайта запрещено или минимально (только для служебных пометок, не влияющих на 1С).
|
||
- Все карточки товаров должны быть лаконичными, информативными и визуально привлекательными, соответствуя общему стилю сайта (референс `hiberg.ru`).
|
||
|
||
**3.2.2. Отображение товаров в разделах «Хиты продаж» и «Новинки»:**
|
||
Эти разделы являются ключевыми для привлечения внимания пользователя. Требования к карточкам товара в этих блоках:
|
||
|
||
1. **Единый макет карточки:**
|
||
- Изображение товара (занимает основную площадь карточки).
|
||
- Название товара (под изображением).
|
||
- Цена товара (крупным, четким шрифтом в **нижней части** карточки, чтобы пользователь сразу видел стоимость).
|
||
|
||
2. **Визуальные маркеры (бейджи/иконки):**
|
||
- В **верхней части** карточки, поверх изображения, должны отображаться иконки-маркеры, информирующие покупателя об особенностях товара.
|
||
- Для раздела **«Хиты продаж»**: отображается иконка **«Топ продаж»** или символ **«Огонек»** (🔥). Дизайн иконки — в едином стиле сайта.
|
||
- Для раздела **«Новинки»**: отображается иконка **«Новинка»** (например, с текстом "NEW" или стилизованная звездочка).
|
||
|
||
3. **Интерактивность при наведении (Hover-эффект):**
|
||
- При наведении курсора мыши на карточку, она должна **визуально выделяться** (например, легкое увеличение масштаба, появление тени, изменение цвета фона или появление дополнительной рамки).
|
||
- Эффект должен быть плавным (с использованием CSS-переходов) и не перегруженным, чтобы сохранить «лаконичность и понятность».
|
||
|
||
4. **Переход на страницу товара:**
|
||
- Клик по любой области карточки (изображение, название, или сама карточка) должен вести пользователя на **страницу с детальным описанием товара**.
|
||
|
||
**3.2.3. Дополнительные элементы на странице каталога:**
|
||
- Помимо разделов «Хиты» и «Новинки», в общем каталоге товаров должна быть реализована сортировка (по цене, популярности, новизне) и фильтрация (по цене, характеристикам, брендам).
|
||
- Для товаров в общем списке также допускается отображение бейджей («Хит», «Новинка») при условии, что товар попадает в эти категории.
|
||
|
||
**3.2.4. Карточка товара должна содержать:**
|
||
- Качественное изображение (возможно, несколько фото + увеличение при наведении).
|
||
- Название, артикул, цену.
|
||
- Отображение актуального статуса наличия («В наличии», «Под заказ», «Нет в наличии»).
|
||
- Краткое описание и полные характеристики (в виде таблицы или списка, сгруппированные по типам).
|
||
- Выбор количества товара.
|
||
- Кнопку «В корзину».
|
||
- Блок «С этим товаром покупают» / «Рекомендуемые товары».
|
||
|
||
---
|
||
|
||
### 3.3. Корзина и Оформление заказа
|
||
|
||
**3.3.1. Корзина:**
|
||
- **Доступность:** Корзина должна быть доступна из любого места сайта (иконка в шапке с количеством товаров и общей суммой).
|
||
- **Страница корзины** должна обеспечивать:
|
||
- Четкое отображение списка добавленных товаров с фото, названием, ценой и выбранным количеством.
|
||
- Возможность легко изменить количество товара или удалить его из корзины.
|
||
- Отображение итоговой суммы заказа (сумма товаров, стоимость доставки, если применимо).
|
||
- Поле для ввода промокода/купона на скидку.
|
||
- Поле для ввода подарочного сертификата.
|
||
- Возможность оплаты бонусами (ползунок или поле для ввода количества баллов).
|
||
- Крупную, заметную кнопку для перехода к оформлению заказа («Оформить заказ»).
|
||
- **Критерий успеха:** Процесс управления корзиной (добавление, изменение, удаление) должен происходить без перезагрузки страницы (с использованием AJAX/Vue.js).
|
||
|
||
**3.3.2. Оформление заказа:**
|
||
- Одноэтапная или двухэтапная форма оформления заказа (для простоты и скорости).
|
||
- **Обязательные поля для заполнения:**
|
||
- ФИО (подтягивается из профиля, если пользователь авторизован)
|
||
- Контактный телефон (подтягивается из профиля)
|
||
- Email (подтягивается из профиля)
|
||
- Адрес доставки (или выбор пункта самовывоза)
|
||
- Способ доставки
|
||
- Способ оплаты (с возможностью комбинирования: бонусы, сертификат, карта/СБП/наличные)
|
||
- Возможность оставить комментарий к заказу.
|
||
- Подтверждение заказа с отправкой уведомления на email и телефон клиента.
|
||
- **Передача заказа:** При оформлении заказа вся информация (состав корзины, данные покупателя, примененные бонусы и сертификаты) должна корректно передаваться в 1С для создания документа «Заказ клиента».
|
||
|
||
---
|
||
|
||
### 3.4. Личный кабинет пользователя (ЛК)
|
||
|
||
**3.4.1. Общая структура и навигация:**
|
||
Личный кабинет должен быть интуитивно понятным и обеспечивать быстрый доступ ко всем ключевым функциям.
|
||
|
||
**Верхнее меню (глобальная навигация по сайту):**
|
||
Постоянная панель, доступная из любой точки ЛК:
|
||
1. **Каталог** — ссылка на полный каталог товаров.
|
||
2. **Поиск** — строка или иконка поиска по товарам.
|
||
3. **Профиль** — быстрый переход к личным данным.
|
||
4. **Сравнение** — переход в раздел сравнения товаров.
|
||
5. **Избранное** — переход в список отложенных товаров.
|
||
6. **Корзина** — переход к корзине с отображением количества товаров и итоговой суммы.
|
||
|
||
**Боковое меню (навигация по разделам ЛК):**
|
||
На десктопной версии — фиксированное боковое меню. На мобильных устройствах — выпадающий список (бургер-меню). Активный раздел должен визуально подсвечиваться.
|
||
|
||
1. **Профиль пользователя**
|
||
2. **Мои заказы**
|
||
3. **Избранное / Отложенные**
|
||
4. **Адреса доставки**
|
||
5. **Способы оплаты**
|
||
6. **Бонусная система** (с балансом и историей)
|
||
7. **Ввести сертификат**
|
||
8. **Купить сертификат**
|
||
9. **Обратная связь / Поддержка**
|
||
10. **Выход из аккаунта** (кнопка в нижней части меню)
|
||
|
||
**3.4.2. Авторизация и регистрация:**
|
||
- **Основной способ входа:** Авторизация на сайте осуществляется **по номеру мобильного телефона**.
|
||
- **Процесс входа:**
|
||
1. Пользователь вводит свой номер телефона в специальное поле.
|
||
2. Система отправляет SMS-сообщение с одноразовым проверочным кодом (OTP) на указанный номер.
|
||
3. Пользователь вводит полученный код для подтверждения и входа в личный кабинет.
|
||
- **Альтернативный способ:** Для постоянных пользователей должна быть реализована возможность входа по связке «Email + Пароль» (после того, как они заполнят email в профиле и установят пароль).
|
||
- **Регистрация:** При первом входе по номеру телефона в системе автоматически создается учетная запись пользователя. Пользователю не нужно проходить отдельную процедуру регистрации, заполняя длинные формы.
|
||
- **Восстановление доступа:** Стандартная процедура восстановления пароля через Email.
|
||
|
||
**3.4.3. Главная страница ЛК (Дашборд):**
|
||
При входе в личный кабинет пользователь видит сводную информационную панель с ключевыми данными и быстрыми действиями.
|
||
|
||
**Виджеты-превью (3 блока):**
|
||
1. **Последние заказы:** Отображение 3–5 последних заказов с указанием номера заказа, даты оформления и текущего статуса (с цветовой индикацией). По клику на заказ — переход на страницу детального просмотра.
|
||
2. **Баланс бонусов:** Крупное, заметное отображение текущего количества бонусных баллов (если активна программа лояльности). Рядом — кнопка для перехода в раздел «Бонусная система» с детальной историей.
|
||
3. **Избранные товары:** Отображение 3–4 товаров из избранного с превью-картинками, названием и ценой. Возможность быстро добавить товар в корзину или удалить из избранного прямо из виджета.
|
||
|
||
**Быстрые действия (кнопки):**
|
||
- **«Оформить заказ»** — переход на страницу каталога или корзины.
|
||
- **«Перейти в избранное»** — переход в полный список избранных товаров.
|
||
- **«Добавить адрес доставки»** — быстрый переход в раздел управления адресами.
|
||
|
||
**Уведомления:**
|
||
В верхней части дашборда (или в виде отдельного виджета) отображаются актуальные системные сообщения для пользователя. Примеры:
|
||
- «Ваш заказ №12345 готов к выдаче» (с ссылкой на заказ).
|
||
- «На вашем бонусном счёте +200 баллов» (за совершенную покупку).
|
||
- «Доставка заказа №12346 запланирована на 15.06.2026».
|
||
|
||
**3.4.4. Профиль пользователя:**
|
||
Раздел для управления личными данными и настройками аккаунта.
|
||
|
||
**Редактируемые данные:**
|
||
- **ФИО** (Имя, Фамилия, Отчество — поля для заполнения).
|
||
- **Номер телефона** (отображается, но редактируется только через отдельную процедуру с подтверждением нового номера).
|
||
- **E-mail** (обязательное поле, используется для уведомлений и восстановления доступа).
|
||
- **Город** и **Адрес** (для быстрого заполнения при оформлении заказов).
|
||
|
||
**Смена пароля:**
|
||
Отдельная форма, доступная по кнопке:
|
||
- Поля для ввода: текущий пароль, новый пароль, подтверждение нового пароля.
|
||
- После успешной смены пароля — уведомление на Email.
|
||
|
||
**Настройки уведомлений:**
|
||
Пользователь может управлять способами получения уведомлений (через чекбоксы):
|
||
- **Каналы:** E-mail, Push-уведомления (в браузере/приложении), SMS.
|
||
- **Типы событий:** Изменение статуса заказа, Акции и спецпредложения, Новости бренда, Напоминания о брошенной корзине.
|
||
|
||
**Выход из аккаунта:**
|
||
Кнопка «Выйти» в нижней части раздела (или бокового меню). При нажатии — подтверждение действия и выход из системы.
|
||
|
||
**3.4.5. Мои заказы:**
|
||
Раздел для управления и отслеживания всех заказов пользователя.
|
||
|
||
**Фильтрация списка заказов:**
|
||
Возможность фильтровать заказы по статусу:
|
||
- «В обработке» (новые, подтвержденные)
|
||
- «Доставляется» (передан в доставку, в пути)
|
||
- «Выполнен» (доставлен, завершен)
|
||
- «Отменён» (отменен пользователем или менеджером)
|
||
|
||
**Элемент списка заказов (карточка заказа):**
|
||
Каждый заказ в списке отображается в виде карточки, содержащей:
|
||
1. **Номер заказа** и **дата оформления**.
|
||
2. **Превью товаров:** 1–2 картинки товаров из заказа. Если товаров больше, отображается индикатор «ещё +N товаров».
|
||
3. **Итоговая сумма** заказа.
|
||
4. **Текущий статус** с цветовой индикацией:
|
||
- Оранжевый / Желтый — «В обработке».
|
||
- Синий / Голубой — «Доставляется».
|
||
- Зелёный — «Выполнен».
|
||
- Красный / Серый — «Отменён».
|
||
5. **Кнопки действий:**
|
||
- **«Повторить заказ»** — добавляет все товары из этого заказа в текущую корзину.
|
||
- **«Детали»** — переход на страницу с полной информацией о заказе.
|
||
- **«Возврат»** (отображается, если статус заказа позволяет оформить возврат, например, «Выполнен» в течение 14 дней).
|
||
|
||
**Страница детального заказа:**
|
||
При клике на кнопку «Детали» открывается полная информация по заказу:
|
||
1. **Полная комплектация:** Список всех товаров с названиями, артикулами, ценами на момент покупки и количеством.
|
||
2. **История статусов:** Хронология изменения статусов с точными датами и временем (данные из 1С).
|
||
3. **Данные доставки:** Адрес, способ доставки, ориентировочный срок / дата доставки.
|
||
4. **Информация об оплате:** Способ оплаты, статус оплаты, сумма к оплате, детализация примененных бонусов и сертификатов.
|
||
5. **Электронные чеки:** Ссылки на скачивание чеков в формате PDF (интеграция с фискальным оператором).
|
||
6. **Форма связи по заказу:** Поле для текстового сообщения и кнопка «Отправить» для обращения в поддержку по конкретному заказу (сообщение автоматически привязывается к номеру заказа).
|
||
|
||
**3.4.6. Избранное / Отложенные товары:**
|
||
Раздел для хранения товаров, которые пользователь отметил как понравившиеся.
|
||
|
||
- **Отображение:** Сетка товаров с превью-картинкой, названием, ценой и статусом наличия («В наличии», «Нет в наличии», «Скоро будет»).
|
||
- **Кнопки действий для каждого товара:**
|
||
- **«В корзину»** — быстрая отправка товара в корзину.
|
||
- **«Удалить из избранного»** — удаление товара из списка.
|
||
- **«Перейти к товару»** — переход на страницу товара.
|
||
- **Сортировка:** Возможность сортировки списка по дате добавления (сначала новые / старые) и по цене (возрастание / убывание).
|
||
- **Оповещение:** Если товар из избранного становится доступным (возвращается на склад) или меняет цену, пользователь получает уведомление (через выбранный канал).
|
||
|
||
**3.4.7. Адреса доставки:**
|
||
- Возможность добавлять, редактировать и удалять адреса доставки.
|
||
- Каждый адрес содержит: город, улица, дом, квартира/офис, индекс, дополнительная информация (подъезд, код домофона, этаж).
|
||
- Возможность установить один адрес как адрес по умолчанию (используется при оформлении заказа).
|
||
- Название для каждого адреса (например, «Дом», «Работа», «Дача») для быстрого выбора.
|
||
|
||
**3.4.8. Способы оплаты:**
|
||
- Отображение списка сохраненных банковских карт (если реализовано через платежную систему, например, ЮKassa) с возможностью добавить новую карту или удалить существующую.
|
||
- Отображение предпочтительного способа оплаты для быстрого оформления заказов.
|
||
|
||
**3.4.9. Бонусная система (интеграция с 1С):**
|
||
- Отображение текущего бонусного баланса (крупная цифра).
|
||
- Детальная история начислений и списаний: за какой заказ, сколько начислено/списано, дата операции.
|
||
- Правила программы лояльности (условия начисления, срок действия бонусов) в виде краткой справки или ссылки на полную страницу.
|
||
- Возможность оплатить часть заказа бонусами (если реализовано в корзине, здесь можно отображать переключатель или инструкцию).
|
||
|
||
**3.4.10. Ввести сертификат и Купить сертификат:**
|
||
- **Ввести сертификат:** Простая форма для ввода кода подарочного сертификата. После активации сертификат привязывается к бонусному счету пользователя или применяется к текущему заказу.
|
||
- **Купить сертификат:** Страница с выбором номинала сертификата, возможностью указать имя получателя, личное сообщение и способ отправки (на Email получателя или передать вручную).
|
||
|
||
**3.4.11. Обратная связь / Поддержка:**
|
||
Раздел для общения со службой поддержки.
|
||
|
||
**Создание нового обращения:**
|
||
Форма с полями:
|
||
- **Категория обращения:** выпадающий список («Вопрос по заказу», «Техническая ошибка», «Предложение», «Вопрос по товару», «Возврат/Обмен»).
|
||
- **Тема:** краткое описание проблемы (опционально).
|
||
- **Сообщение:** текстовое поле для подробного описания.
|
||
- **Прикрепление файлов:** возможность прикрепить фотографии или документы для пояснения (несколько файлов, ограничения по размеру и форматам).
|
||
- **Кнопка «Отправить»:** обращение отправляется в систему поддержки (на Email менеджеров или в CRM-систему).
|
||
|
||
**Чат с поддержкой:**
|
||
Виджет онлайн-чата, доступный из любой страницы сайта и особенно из ЛК. Интеграция с выбранным сервисом (например, JivoSite, Telegram-бот, свой сервис). Чат должен поддерживать:
|
||
- Отправку текстовых сообщений.
|
||
- Передачу файлов (изображений).
|
||
- Историю переписки (для авторизованных пользователей).
|
||
|
||
---
|
||
|
||
### 3.5. Способы оплаты
|
||
|
||
**3.5.1. Общие принципы:**
|
||
На сайте должна быть реализована гибкая система оплаты, позволяющая пользователю комбинировать различные способы в рамках одного заказа. Все платежные операции должны быть безопасными и соответствовать требованиям законодательства (152-ФЗ, 54-ФЗ).
|
||
|
||
**3.5.2. Доступные способы оплаты (на момент запуска):**
|
||
|
||
| № | Способ оплаты | Описание | Особенности реализации |
|
||
|---|---------------|----------|------------------------|
|
||
| 1 | **ЮKassa** | Прием платежей банковскими картами (Visa, MasterCard, МИР) через платежный шлюз ЮKassa. | Поддержка 3D-Secure. Отображение в интерфейсе как «Банковская карта». |
|
||
| 2 | **СБП (Система быстрых платежей)** | Оплата через СБП по QR-коду или через кнопку на сайте. | Генерация QR-кода для сканирования в мобильном приложении банка. |
|
||
| 3 | **МИР Pay** | Оплата через платежную систему «Мир» (токенизированные карты). | Интеграция через API МИР Pay. |
|
||
| 4 | **Наличными при получении** | Оплата наличными курьеру или в пункте выдачи заказов. | Отображается как «Оплата при получении». Не требует онлайн-транзакции. |
|
||
|
||
**3.5.3. Планируемые к добавлению способы оплаты (на следующих этапах):**
|
||
|
||
| № | Способ оплаты | Описание | Особенности реализации |
|
||
|---|---------------|----------|------------------------|
|
||
| 5 | **Рассрочка** | Покупка товаров с оплатой частями через банк-партнер (например, Тинькофф, Сбербанк, Почта Банк). | На странице оформления заказа отображается виджет банка с условиями. Пользователь заполняет заявку и после одобрения возвращается к оформлению. |
|
||
| 6 | **Оплата частями** | Сервис «Долями» или «Сплит» — оплата равными частями без участия банка (через партнеров). | Аналогично рассрочке, но с другими условиями (обычно 4 части). |
|
||
|
||
**3.5.4. Комбинированная оплата (гибридные сценарии):**
|
||
|
||
Пользователь должен иметь возможность оплатить заказ, используя **несколько способов одновременно**. Это критически важная функция, особенно для программы лояльности и сертификатов.
|
||
|
||
**Пример сценария оплаты заказа на сумму 5000 рублей:**
|
||
1. Пользователь в корзине вводит промокод или выбирает опцию «Оплатить бонусами» → списывает 500 бонусов (= 500 рублей).
|
||
2. Активирует подарочный сертификат на сумму 1000 рублей.
|
||
3. Вводит данные банковской карты (ЮKassa) для оплаты оставшейся суммы.
|
||
4. **Итоговая структура списания средств:**
|
||
- **Бонусы:** -500 руб. (списано с бонусного счета)
|
||
- **Сертификат:** -1000 руб. (применен)
|
||
- **Карта (ЮKassa):** -3500 руб. (списано с банковской карты)
|
||
- **Итого к оплате:** 5000 руб. (закрыто полностью)
|
||
|
||
**Реализация комбинированной оплаты должна предусматривать:**
|
||
1. **Интерфейс корзины:** На странице корзины и оформления заказа должны быть отдельные блоки:
|
||
- «Ввести промокод»
|
||
- «Ввести сертификат»
|
||
- «Оплатить бонусами» (ползунок или поле для ввода количества баллов)
|
||
2. **Расчет итога:** Система автоматически пересчитывает оставшуюся сумму к оплате после каждого примененного способа. Пользователь видит прозрачную детализацию: «Списано бонусов: 500 руб.», «Списано по сертификату: 1000 руб.», «Осталось оплатить картой: 3500 руб.»
|
||
3. **Логирование:** Все операции (списание бонусов, активация сертификатов, платежи) должны фиксироваться в истории заказа и в личном кабинете пользователя.
|
||
|
||
**3.5.5. Платежный виджет / Блок оформления заказа:**
|
||
|
||
Ниже приведена схема блока выбора способа оплаты на странице оформления заказа (визуальный пример для разработчиков).
|
||
|
||
```
|
||
+---------------------------------------------------+
|
||
| Способ оплаты |
|
||
| |
|
||
| [x] Банковская карта (ЮKassa) |
|
||
| [ ] СБП (QR-код) |
|
||
| [ ] МИР Pay |
|
||
| [ ] Наличными при получении |
|
||
| [ ] Рассрочка / Оплата частями |
|
||
| |
|
||
| ----------------- Дополнительно ----------------- |
|
||
| |
|
||
| [Ввести промокод] -> [Применить] |
|
||
| |
|
||
| [Ввести подарочный сертификат] -> [Активировать] |
|
||
| |
|
||
| Оплатить бонусами: [----o----] [500 баллов] |
|
||
| |
|
||
| ------------------------------------------------ |
|
||
| Итог к оплате: 5 000,00 ₽ |
|
||
| Бонусы к списанию: -500,00 ₽ |
|
||
| Сертификат: -1 000,00 ₽ |
|
||
| К оплате (карта/СБП): 3 500,00 ₽ |
|
||
| |
|
||
| [Оформить заказ] |
|
||
+---------------------------------------------------+
|
||
```
|
||
|
||
**3.5.6. Интеграция с 1С:**
|
||
- Информация о способе оплаты, примененных сертификатах и списанных бонусах должна передаваться в 1С вместе с заказом.
|
||
- В 1С должен формироваться документ, отражающий все части оплаты (например, «Бонусы списаны», «Сертификат активирован», «Ожидается оплата по карте»).
|
||
|
||
**3.5.7. Безопасность и нормативные требования:**
|
||
- Все онлайн-платежи должны проходить через сертифицированный платежный шлюз (ЮKassa).
|
||
- Данные банковских карт не хранятся на сервере сайта (используется токенизация).
|
||
- Электронные чеки формируются и отправляются покупателю на Email после успешной онлайн-оплаты (интеграция с 54-ФЗ).
|
||
|
||
---
|
||
|
||
### 3.6. Панель администратора сайта
|
||
|
||
**3.6.1. Управление пользователями и ролями (Иерархия администраторов):**
|
||
- Создание учетных записей для сотрудников с разграничением прав доступа (ролевая модель).
|
||
|
||
**Примеры ролей:**
|
||
- **Супер-администратор:** Полный доступ ко всем разделам и настройкам.
|
||
- **Менеджер по контенту:** Управление текстами на сайте, баннерами, SEO-мета-тегами.
|
||
- **Менеджер по работе с бонусами/промокодами:** Управление бонусной программой, выпуск сертификатов.
|
||
- **Технический администратор:** Доступ только к разделу «Интеграция с 1С» (мониторинг, логи, запуск синхронизации).
|
||
- Все действия администраторов должны логироваться (кто, когда, что сделал).
|
||
|
||
**3.6.2. Разделы админ-панели:**
|
||
|
||
**Интеграция:**
|
||
- Мониторинг статуса обмена (последний успешный обмен, ошибки).
|
||
- Ручное управление синхронизацией (запуск/остановка).
|
||
- Просмотр логов обмена.
|
||
- Уведомления: оповещения администратора о критических ошибках (email, Telegram и т.п.).
|
||
|
||
**Заказы:** (Опционально, если требуется частичное редактирование до передачи в 1С). В основном — просмотр.
|
||
|
||
**Пользователи:** Список всех пользователей с возможностью редактирования их данных и бонусного баланса (в исключительных случаях).
|
||
|
||
**Маркетинг:** Управление промокодами и подарочными сертификатами.
|
||
|
||
**Контент:** Управление статическими страницами (О компании, Доставка и оплата, Контакты), баннерами и слайдерами на главной странице.
|
||
|
||
**Настройки:** Общие настройки сайта (контакты, соцсети, настройки платежных систем).
|
||
|
||
---
|
||
|
||
### 3.7. Согласие на обработку персональных данных и Cookie-уведомление
|
||
|
||
**3.7.1. Общие требования:**
|
||
На сайте должны быть реализованы механизмы получения согласия пользователя на обработку персональных данных и использование файлов cookie, соответствующие требованиям законодательства РФ (152-ФЗ «О персональных данных», ФЗ «О рекламе») и международным стандартам (GDPR — опционально).
|
||
|
||
**3.7.2. Варианты реализации (на выбор заказчика):**
|
||
|
||
**Вариант А — Всплывающий баннер при первом визите (рекомендуемый):**
|
||
При первом заходе пользователя на сайт (или при первом посещении после изменения правил) отображается всплывающее окно (визор) с кратким уведомлением и кнопками для согласия.
|
||
|
||
**Содержание уведомления:**
|
||
> На сайте используются файлы cookie и сервисы веб-аналитики: Яндекс Метрика, AppMetrica, Top.Mail.Ru и другие — для обеспечения работы сайта и аналитики. Подробнее
|
||
>
|
||
> Используя сайт, вы предоставляете согласие на обработку персональных данных с применением указанных сервисов и принимаете условия Согласия на обработку персональных данных
|
||
|
||
**Кнопки действий:**
|
||
- **«Соглашаюсь»** — принятие всех условий. Баннер закрывается, cookie сохраняются, аналитика активируется.
|
||
- **«Подробнее»** — переход на страницу с полным текстом Политики конфиденциальности и Согласия на обработку персональных данных (с возможностью ознакомиться и затем вернуться к принятию).
|
||
|
||
**Дизайн:**
|
||
- Всплывающий визор по центру экрана (модальное окно) или снизу (баннер-шторка).
|
||
- Скромный и лаконичный дизайн, не перегружающий интерфейс.
|
||
- Текст должен быть хорошо читаемым, кнопки — заметными.
|
||
|
||
**Вариант Б — Скромный баннер в нижней части экрана:**
|
||
Небольшая полоса (шторка) внизу страницы, не перекрывающая основной контент.
|
||
- **Содержание:** Краткая версия уведомления (1–2 строки).
|
||
- **Кнопки:** «Принять», «Настроить» (переход к настройкам cookie), «Подробнее».
|
||
- **Дизайн:** Минималистичный, не отвлекающий внимание.
|
||
|
||
**3.7.3. Дополнительные требования:**
|
||
|
||
1. **Хранение согласия:**
|
||
- Факт согласия пользователя должен сохраняться в cookie или localStorage.
|
||
- При повторных визитах баннер не показывается (если пользователь уже согласился).
|
||
- Если правила меняются — требуется повторное получение согласия.
|
||
|
||
2. **Отказ от аналитики:**
|
||
- Пользователь должен иметь возможность отключить сбор аналитических данных (например, через настройки в ЛК или через специальную ссылку в политике конфиденциальности).
|
||
- Если пользователь отказывается от аналитики, скрипты Яндекс Метрики, AppMetrica, Top.Mail.Ru и другие не загружаются.
|
||
|
||
3. **Ссылки на документы:**
|
||
- В уведомлении должна быть активная ссылка на страницу с полной Политикой конфиденциальности и Согласием на обработку персональных данных (отдельная страница на сайте).
|
||
|
||
4. **Совместимость:**
|
||
- Баннер должен корректно отображаться на всех типах устройств (десктоп, планшет, мобильный телефон).
|
||
|
||
**3.7.4. Техническая реализация:**
|
||
|
||
- **Список сервисов аналитики:**
|
||
- Яндекс Метрика
|
||
- AppMetrica
|
||
- Top.Mail.Ru
|
||
- (Возможно добавление других сервисов в будущем)
|
||
|
||
- **Типы cookie:**
|
||
- **Технические (обязательные):** Необходимы для работы сайта (корзина, авторизация, хранение сессии). Не требуют согласия.
|
||
- **Аналитические (опциональные):** Сбор статистики посещений, поведения пользователей. Требуют согласия.
|
||
- **Маркетинговые (опциональные):** Для ретаргетинга, персонализированной рекламы. Требуют согласия.
|
||
|
||
- **Механизм загрузки скриптов:**
|
||
- Скрипты аналитики и маркетинговые пиксели загружаются только после получения согласия пользователя.
|
||
- Использовать асинхронную загрузку для ускорения работы сайта.
|
||
|
||
---
|
||
|
||
## 4. Нефункциональные требования
|
||
|
||
**4.1. Производительность:**
|
||
- Высокая скорость загрузки страниц (оптимизация изображений, кеширование, быстрая работа сервера). Скорость загрузки страниц должна быть не более 3 секунд.
|
||
|
||
**4.2. Надежность:**
|
||
- Система должна быть устойчивой к пиковым нагрузкам. Интеграция с 1С не должна «падать» при большом количестве заказов.
|
||
|
||
**4.3. Безопасность:**
|
||
- SSL-сертификат, защита от XSS и SQL-инъекций.
|
||
- Все данные пользователей защищены. Строгое соблюдение требований 152-ФЗ (персональные данные).
|
||
|
||
**4.4. Масштабируемость:**
|
||
- Архитектура решения должна позволять легко добавлять новые функции в будущем.
|
||
|
||
---
|
||
|
||
## 5. Технологический стек
|
||
|
||
**5.1. Бэкенд:**
|
||
| Компонент | Технология | Обоснование |
|
||
|-----------|------------|-------------|
|
||
| Язык программирования | **Python 3.10+** | Высокая производительность, огромная экосистема библиотек, простота поддержки |
|
||
| Фреймворк | **Django 4.2+** | Быстрая разработка, встроенная админка, ORM, безопасность, масштабируемость |
|
||
| REST API | **Django REST Framework (DRF)** | Создание гибкого API для взаимодействия с 1С и фронтендом |
|
||
| База данных | **PostgreSQL 14+** | Надежная, производительная, поддерживает сложные запросы и транзакции |
|
||
| Кеширование | **Redis** | Высокоскоростное кеширование, хранение сессий, очереди задач |
|
||
| Фоновые задачи | **Celery + Redis** | Асинхронная обработка задач (синхронизация с 1С, отправка email/SMS) |
|
||
| Интеграция с 1С | **REST API** | Двусторонний обмен данными через защищенное API-соединение |
|
||
|
||
**5.2. Фронтенд:**
|
||
| Компонент | Технология | Обоснование |
|
||
|-----------|------------|-------------|
|
||
| Язык разметки | **HTML5** | Современная семантика, доступность |
|
||
| Стили | **CSS3 + SCSS** | Модульная архитектура стилей, переиспользуемость |
|
||
| JavaScript | **Vue.js 3** | Реактивность, компонентный подход, высокая производительность на клиенте |
|
||
| Управление состоянием | **Pinia** (для Vue.js) | Простое и масштабируемое управление состоянием приложения |
|
||
| HTTP-клиент | **Axios** | Взаимодействие с REST API бэкенда |
|
||
|
||
**5.3. Инфраструктура:**
|
||
| Компонент | Технология | Обоснование |
|
||
|-----------|------------|-------------|
|
||
| Веб-сервер | **Nginx** | Высокая производительность, раздача статики, проксирование |
|
||
| Сервер приложений | **Gunicorn / uWSGI** | Запуск Django-приложения в production-среде |
|
||
| Контейнеризация | **Docker + Docker Compose** | Унификация окружений на всех этапах разработки |
|
||
| CI/CD | **GitHub Actions / GitLab CI** | Автоматическое тестирование и деплой |
|
||
| Мониторинг | **Sentry** (ошибки), **Prometheus + Grafana** (метрики) | Отслеживание ошибок и производительности |
|
||
|
||
**5.4. Дополнительные интеграции:**
|
||
| Сервис | Назначение |
|
||
|--------|------------|
|
||
| **ЮKassa** | Прием платежей банковскими картами и СБП |
|
||
| **SMS-шлюз** | Отправка SMS для авторизации и уведомлений (например, Twilio, SMS-аэро) |
|
||
| **Email-сервис** | Отправка уведомлений, чеков (например, SendGrid, Яндекс Почта) |
|
||
| **Яндекс Метрика, AppMetrica, Top.Mail.Ru** | Веб-аналитика |
|
||
| **JivoSite / аналоги** | Онлайн-чат для поддержки клиентов |
|
||
|
||
---
|
||
|
||
## 6. Этапы и сроки реализации
|
||
|
||
**Общий срок разработки: 2 месяца (8 недель).**
|
||
|
||
| № | Этап | Длительность | Содержание работ | Результат |
|
||
|---|------|--------------|------------------|-----------|
|
||
| 1 | **Проектирование архитектуры** | 1 неделя | Проектирование структуры БД, API-схемы, интеграционных точек с 1С, утверждение макетов | Документ архитектуры, утвержденные макеты |
|
||
| 2 | **Разработка бэкенда (ядро)** | 2 недели | Создание Django-проекта, моделей данных, базовых API-эндпоинтов, настройка PostgreSQL, Redis, Celery | Работающее ядро бэкенда |
|
||
| 3 | **Разработка фронтенда** | 2 недели | Верстка всех страниц, разработка компонентов на Vue.js, настройка взаимодействия с API | Готовые клиентские интерфейсы |
|
||
| 4 | **Интеграция с 1С** | 1 неделя | Настройка REST API для обмена, разработка механизмов импорта/экспорта, тестирование синхронизации | Рабочая интеграция с 1С |
|
||
| 5 | **Интеграция платежных систем** | 0.5 недели | Подключение ЮKassa, СБП, МИР Pay, настройка сценариев оплаты | Работающие способы оплаты |
|
||
| 6 | **Тестирование и отладка** | 1 неделя | Функциональное, нагрузочное, интеграционное тестирование. Исправление ошибок. | Стабильная работа всех систем |
|
||
| 7 | **Деплой и ввод в эксплуатацию** | 0.5 недели | Настройка сервера, деплой проекта, обучение персонала, запуск в production | Работающий интернет-магазин |
|
||
|
||
**График работ по неделям:**
|
||
|
||
| Неделя | Этапы |
|
||
|--------|-------|
|
||
| Неделя 1 | Проектирование архитектуры + начало разработки бэкенда |
|
||
| Неделя 2 | Разработка бэкенда (ядро) |
|
||
| Неделя 3 | Разработка бэкенда + начало разработки фронтенда |
|
||
| Неделя 4 | Разработка фронтенда |
|
||
| Неделя 5 | Разработка фронтенда + интеграция с 1С |
|
||
| Неделя 6 | Интеграция с 1С + интеграция платежных систем |
|
||
| Неделя 7 | Тестирование и отладка |
|
||
| Неделя 8 | Завершение тестирования, деплой, ввод в эксплуатацию |
|
||
|
||
---
|
||
|
||
## 7. Примечания и допущения
|
||
|
||
- **Интеграция с 1С:** Для реализации обмена потребуется привлечение специалиста со стороны заказчика (1С-программист) для настройки выгрузки/загрузки данных с сайта. Этот пункт является **критичным** для соблюдения сроков.
|
||
- **Документация:** Исполнитель должен предоставить подробную техническую документацию по API для дальнейшей поддержки интеграции.
|
||
- **Обучение:** Необходимо предусмотреть этап обучения администраторов работе с панелью управления сайтом и отслеживанием синхронизации (включено в неделю 8).
|
||
- **Контент:** Тексты, фото товаров, описания предоставляются заказчиком.
|
||
- **Хостинг и домен:** Приобретаются и оплачиваются заказчиком отдельно.
|
||
- **Платежные системы:** Интеграция с конкретными платежными системами и службами доставки обсуждается и согласовывается отдельно на этапе проектирования.
|
||
- **Дизайн-макеты:** Разрабатываются и утверждаются заказчиком до начала программирования (включено в неделю 1).
|
||
- **Сроки:** 2 месяца — фиксированные; для их соблюдения требуется своевременное предоставление всех материалов со стороны заказчика, а также доступ к 1С для настройки интеграции.
|
||
|