Техническое задание на обновление вёрстки интернет-магазина по доставке готовой еды
Цель технического задания Целью данного технического задания является обновление вёрстки существующего интернет-магазина по доставке готовой еды. В рамках проекта необходимо интегрировать новую вёрстку с уже реализованной логикой взаимодействия с бэкендом, чтобы обеспечить функциональность сайта, соответствующую современным требованиям дизайна и удобства пользователя.

Требования

1. Соответствие макету: Вёрстка должна полностью соответствовать предоставленному макету, обеспечивая точное воспроизведение дизайна на всех страницах сайта.
2. Современные браузеры: Вёрстка должна поддерживать современные версии браузеров:
   
   
   • Google Chrome (начиная с 2020 года)
   • Mozilla Firefox (начиная с 2020 года)
   • Safari (начиная с 2015 года)
3. Адаптивность: Вёрстка должна быть адаптивной и корректно отображаться на различных устройствах (мобильных, планшетах и десктопах).
4. Кроссбраузерность: Обеспечить одинаковое отображение и функциональность сайта в указанных браузерах.
5. Оптимизация: Вёрстка должна быть оптимизирована для быстрой загрузки и минимизации времени отклика.
6. Интеграция компонентов: Если компоненты необходимо вносить в базовый шаблон, это должно быть сделано так же, как реализовано в базовом шаблоне, с описанием манифеста компонента и его возможных настроек. Интеграция должна быть продумана таким образом, чтобы компоненты корректно функционировали внутри сборщика из монорепозитория.

Исходные данные

1. Проект на Angular:
   
   
   • Существует проект на Angular, который реализует логику интернет-магазина по доставке готовой еды.
2. Структура проекта:
   
   
   • Есть базовый проект и компоненты шаблона заказчика.
   • Некоторые элементы необходимо будет вносить в базовый проект, а другие — в компоненты заказчика.
3. Сборка проекта:
   
   
   • Сборка проекта происходит из единого монорепозитория, из которого берутся разные компоненты для создания сайта заказчика.
   • Для этого потребуется использовать программу, осуществляющую такую сборку.
4. Принципы разработки:
   
   
   • Принципиально разработка проекта на Angular не отличается от стандартного процесса создания проекта на Angular.
   • Не требуется писать взаимодействие между бэкендом и фронтендом, так как оно уже реализовано.
   • Если потребуется добавить какие-либо данные, это можно сделать через уже существующие сервисы.
   • Если какие-то данные на бэкенде будут недоступны, их можно замокать, чтобы не замедлять процесс разработки.
   • Позже данные можно будет подключить или получить четкие указания по подключению, после чего провести тестирование.

Список страниц

1. Главная страница
2. Страница товара
   
   
   • Попап блюда
3. Страница входа в личный кабинет
4. Страница личного кабинета
5. Страница истории заказа
6. Страница корзины
7. Страница оформления заказа
   
   
   • Шаг 1: Ввод данных
   • Шаг 2: Выбор параметров заказа
   • Шаг 3: Информация о заказе
8. Тестовая страница
9. Текстовая страница для статьи
   
   
   • Статическая страница
10. Страница контактов
11. Страница вакансий
12. Страница, разводящая на статьи
13. Страница отзывов
14. Страница приложений мобильных
15. Страница 404 (Не найдена)
16. Страница "Сайт временно не работает"

Полностью новые элементы В данном разделе мы рассматриваем новые элементы, которые необходимо реализовать в проекте. Начнем с верхней части главной страницы, где размещен блок для скачивания нашего приложения. Этот блок также включает разделы "Почему нас выбирают", "Категории" и "Вакансии". Важно отметить, что все эти разделы оформлены в едином блоке, который располагается над футером. Этот блок, а также все его внутренние элементы, должны быть полностью реализованы, так как они отсутствуют в текущем варианте базового шаблона.

1. Разделы "Вакансии" и "Статьи":
   
   
   • Разделы "Вакансии" и "Статьи" должны быть интегрированы в общий проект, так как их абстрагирование невозможно. Они будут реализованы в базовом виде, который должен быть настраиваемым под запросы заказчика.
   • Базовый вид для раздела "Вакансии" подразумевает простую реализацию в виде списка, аналогично тому, как это показано на странице вакансий.
   • Грид, окруженный элементами, должен быть вынесен в общий проект, чтобы обеспечить возможность создания такого грида как для раздела статей, так и для других элементов. Настройки грида будут зависеть от параметров проекта, позволяя адаптировать внешний вид под конкретные требования.
2. Блок оформления заказа:
   
   
   • Важным элементом является блок оформления заказа, в котором отображаются примененные акции. Этот блок должен быть перенесен в общий проект после его реализации в базовом проекте.
   • В базовом проекте также необходимо добавить строки для элементов, о которых уже шла речь, чтобы обеспечить полноту функционала и соответствие требованиям заказчика.

Таким образом, все новые элементы должны быть интегрированы в проект, с возможностью настройки и адаптации под специфические запросы, обеспечивая при этом качественное и удобное взаимодействие для пользователей.