From edfc2fc8e1af72d07dea1a8bff3dcdfd4d04e401 Mon Sep 17 00:00:00 2001 From: apuc Date: Mon, 29 Jun 2026 18:33:35 +0300 Subject: [PATCH] Add README.md --- README.md | 595 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 595 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..6e88994 --- /dev/null +++ b/README.md @@ -0,0 +1,595 @@ + +--- + +# Техническое задание на разработку интернет-магазина с интеграцией 1С + +--- + +## 1. Введение и цели проекта + +**1.1. Название проекта:** +Разработка интернет-магазина [Название вашего бренда/магазина] с глубокой интеграцией корпоративной системы 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С для настройки интеграции. +