1. Введение и цели проекта
1.1. Название проекта: Разработка интернет-магазина HOMM с глубокой интеграцией корпоративной системы 1С.
1.2. Цели проекта:
-
Создать современный интернет-магазин, который является публичной витриной для данных из 1С и полноценным инструментом продаж, с возможностью реализации добавления ассортимента и продажи товаров поставщиков.
-
Обеспечить полную автоматизацию бизнес-процессов через двусторонний обмен данными между сайтом и 1С по всем ключевым направлениям (товары, цены, остатки, заказы, статусы, клиенты, бонусы).
-
Сделать интерфейс максимально удобным и интуитивно понятным для пользователя, основываясь на дизайн-референсах.
-
Главная программа – 1С. Все процессы должны быть отражением 1С, но с учетом юзабилити с пользовательской стороны.
-
Реализовать гибкую систему лояльности (бонусы, сертификаты, промокоды) и широкий спектр платежных методов.
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. Отображение товаров в разделах «Хиты продаж» и «Новинки»: Эти разделы являются ключевыми для привлечения внимания пользователя. Требования к карточкам товара в этих блоках:
-
Единый макет карточки:
- Изображение товара (занимает основную площадь карточки).
- Название товара (под изображением).
- Цена товара (крупным, четким шрифтом в нижней части карточки, чтобы пользователь сразу видел стоимость).
-
Визуальные маркеры (бейджи/иконки):
- В верхней части карточки, поверх изображения, должны отображаться иконки-маркеры, информирующие покупателя об особенностях товара.
- Для раздела «Хиты продаж»: отображается иконка «Топ продаж» или символ «Огонек» (🔥). Дизайн иконки — в едином стиле сайта.
- Для раздела «Новинки»: отображается иконка «Новинка» (например, с текстом "NEW" или стилизованная звездочка).
-
Интерактивность при наведении (Hover-эффект):
- При наведении курсора мыши на карточку, она должна визуально выделяться (например, легкое увеличение масштаба, появление тени, изменение цвета фона или появление дополнительной рамки).
- Эффект должен быть плавным (с использованием CSS-переходов) и не перегруженным, чтобы сохранить «лаконичность и понятность».
-
Переход на страницу товара:
- Клик по любой области карточки (изображение, название, или сама карточка) должен вести пользователя на страницу с детальным описанием товара.
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. Общая структура и навигация: Личный кабинет должен быть интуитивно понятным и обеспечивать быстрый доступ ко всем ключевым функциям.
Верхнее меню (глобальная навигация по сайту): Постоянная панель, доступная из любой точки ЛК:
- Каталог — ссылка на полный каталог товаров.
- Поиск — строка или иконка поиска по товарам.
- Профиль — быстрый переход к личным данным.
- Сравнение — переход в раздел сравнения товаров.
- Избранное — переход в список отложенных товаров.
- Корзина — переход к корзине с отображением количества товаров и итоговой суммы.
Боковое меню (навигация по разделам ЛК): На десктопной версии — фиксированное боковое меню. На мобильных устройствах — выпадающий список (бургер-меню). Активный раздел должен визуально подсвечиваться.
- Профиль пользователя
- Мои заказы
- Избранное / Отложенные
- Адреса доставки
- Способы оплаты
- Бонусная система (с балансом и историей)
- Ввести сертификат
- Купить сертификат
- Обратная связь / Поддержка
- Выход из аккаунта (кнопка в нижней части меню)
3.4.2. Авторизация и регистрация:
- Основной способ входа: Авторизация на сайте осуществляется по номеру мобильного телефона.
- Процесс входа:
- Пользователь вводит свой номер телефона в специальное поле.
- Система отправляет SMS-сообщение с одноразовым проверочным кодом (OTP) на указанный номер.
- Пользователь вводит полученный код для подтверждения и входа в личный кабинет.
- Альтернативный способ: Для постоянных пользователей должна быть реализована возможность входа по связке «Email + Пароль» (после того, как они заполнят email в профиле и установят пароль).
- Регистрация: При первом входе по номеру телефона в системе автоматически создается учетная запись пользователя. Пользователю не нужно проходить отдельную процедуру регистрации, заполняя длинные формы.
- Восстановление доступа: Стандартная процедура восстановления пароля через Email.
3.4.3. Главная страница ЛК (Дашборд): При входе в личный кабинет пользователь видит сводную информационную панель с ключевыми данными и быстрыми действиями.
Виджеты-превью (3 блока):
- Последние заказы: Отображение 3–5 последних заказов с указанием номера заказа, даты оформления и текущего статуса (с цветовой индикацией). По клику на заказ — переход на страницу детального просмотра.
- Баланс бонусов: Крупное, заметное отображение текущего количества бонусных баллов (если активна программа лояльности). Рядом — кнопка для перехода в раздел «Бонусная система» с детальной историей.
- Избранные товары: Отображение 3–4 товаров из избранного с превью-картинками, названием и ценой. Возможность быстро добавить товар в корзину или удалить из избранного прямо из виджета.
Быстрые действия (кнопки):
- «Оформить заказ» — переход на страницу каталога или корзины.
- «Перейти в избранное» — переход в полный список избранных товаров.
- «Добавить адрес доставки» — быстрый переход в раздел управления адресами.
Уведомления: В верхней части дашборда (или в виде отдельного виджета) отображаются актуальные системные сообщения для пользователя. Примеры:
- «Ваш заказ №12345 готов к выдаче» (с ссылкой на заказ).
- «На вашем бонусном счёте +200 баллов» (за совершенную покупку).
- «Доставка заказа №12346 запланирована на 15.06.2026».
3.4.4. Профиль пользователя: Раздел для управления личными данными и настройками аккаунта.
Редактируемые данные:
- ФИО (Имя, Фамилия, Отчество — поля для заполнения).
- Номер телефона (отображается, но редактируется только через отдельную процедуру с подтверждением нового номера).
- E-mail (обязательное поле, используется для уведомлений и восстановления доступа).
- Город и Адрес (для быстрого заполнения при оформлении заказов).
Смена пароля: Отдельная форма, доступная по кнопке:
- Поля для ввода: текущий пароль, новый пароль, подтверждение нового пароля.
- После успешной смены пароля — уведомление на Email.
Настройки уведомлений: Пользователь может управлять способами получения уведомлений (через чекбоксы):
- Каналы: E-mail, Push-уведомления (в браузере/приложении), SMS.
- Типы событий: Изменение статуса заказа, Акции и спецпредложения, Новости бренда, Напоминания о брошенной корзине.
Выход из аккаунта: Кнопка «Выйти» в нижней части раздела (или бокового меню). При нажатии — подтверждение действия и выход из системы.
3.4.5. Мои заказы: Раздел для управления и отслеживания всех заказов пользователя.
Фильтрация списка заказов: Возможность фильтровать заказы по статусу:
- «В обработке» (новые, подтвержденные)
- «Доставляется» (передан в доставку, в пути)
- «Выполнен» (доставлен, завершен)
- «Отменён» (отменен пользователем или менеджером)
Элемент списка заказов (карточка заказа): Каждый заказ в списке отображается в виде карточки, содержащей:
- Номер заказа и дата оформления.
- Превью товаров: 1–2 картинки товаров из заказа. Если товаров больше, отображается индикатор «ещё +N товаров».
- Итоговая сумма заказа.
- Текущий статус с цветовой индикацией:
- Оранжевый / Желтый — «В обработке».
- Синий / Голубой — «Доставляется».
- Зелёный — «Выполнен».
- Красный / Серый — «Отменён».
- Кнопки действий:
- «Повторить заказ» — добавляет все товары из этого заказа в текущую корзину.
- «Детали» — переход на страницу с полной информацией о заказе.
- «Возврат» (отображается, если статус заказа позволяет оформить возврат, например, «Выполнен» в течение 14 дней).
Страница детального заказа: При клике на кнопку «Детали» открывается полная информация по заказу:
- Полная комплектация: Список всех товаров с названиями, артикулами, ценами на момент покупки и количеством.
- История статусов: Хронология изменения статусов с точными датами и временем (данные из 1С).
- Данные доставки: Адрес, способ доставки, ориентировочный срок / дата доставки.
- Информация об оплате: Способ оплаты, статус оплаты, сумма к оплате, детализация примененных бонусов и сертификатов.
- Электронные чеки: Ссылки на скачивание чеков в формате PDF (интеграция с фискальным оператором).
- Форма связи по заказу: Поле для текстового сообщения и кнопка «Отправить» для обращения в поддержку по конкретному заказу (сообщение автоматически привязывается к номеру заказа).
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 рублей:
- Пользователь в корзине вводит промокод или выбирает опцию «Оплатить бонусами» → списывает 500 бонусов (= 500 рублей).
- Активирует подарочный сертификат на сумму 1000 рублей.
- Вводит данные банковской карты (ЮKassa) для оплаты оставшейся суммы.
- Итоговая структура списания средств:
- Бонусы: -500 руб. (списано с бонусного счета)
- Сертификат: -1000 руб. (применен)
- Карта (ЮKassa): -3500 руб. (списано с банковской карты)
- Итого к оплате: 5000 руб. (закрыто полностью)
Реализация комбинированной оплаты должна предусматривать:
- Интерфейс корзины: На странице корзины и оформления заказа должны быть отдельные блоки:
- «Ввести промокод»
- «Ввести сертификат»
- «Оплатить бонусами» (ползунок или поле для ввода количества баллов)
- Расчет итога: Система автоматически пересчитывает оставшуюся сумму к оплате после каждого примененного способа. Пользователь видит прозрачную детализацию: «Списано бонусов: 500 руб.», «Списано по сертификату: 1000 руб.», «Осталось оплатить картой: 3500 руб.»
- Логирование: Все операции (списание бонусов, активация сертификатов, платежи) должны фиксироваться в истории заказа и в личном кабинете пользователя.
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. Дополнительные требования:
-
Хранение согласия:
- Факт согласия пользователя должен сохраняться в cookie или localStorage.
- При повторных визитах баннер не показывается (если пользователь уже согласился).
- Если правила меняются — требуется повторное получение согласия.
-
Отказ от аналитики:
- Пользователь должен иметь возможность отключить сбор аналитических данных (например, через настройки в ЛК или через специальную ссылку в политике конфиденциальности).
- Если пользователь отказывается от аналитики, скрипты Яндекс Метрики, AppMetrica, Top.Mail.Ru и другие не загружаются.
-
Ссылки на документы:
- В уведомлении должна быть активная ссылка на страницу с полной Политикой конфиденциальности и Согласием на обработку персональных данных (отдельная страница на сайте).
-
Совместимость:
- Баннер должен корректно отображаться на всех типах устройств (десктоп, планшет, мобильный телефон).
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С для настройки интеграции.