Обновить верстку на сайте
Техническое задание на обновление вёрстки интернет-магазина по доставке готовой еды
Цель технического задания
Целью данного технического задания является обновление вёрстки существующего интернет-магазина по доставке готовой еды. В рамках проекта необходимо интегрировать новую вёрстку с уже реализованной логикой взаимодействия с бэкендом, чтобы обеспечить функциональность сайта, соответствующую современным требованиям дизайна и удобства пользователя.
Требования
- Соответствие макету: Вёрстка должна полностью соответствовать предоставленному макету, обеспечивая точное воспроизведение дизайна на всех страницах сайта.
- Современные браузеры: Вёрстка должна поддерживать современные версии браузеров:
- Google Chrome (начиная с 2020 года)
- Mozilla Firefox (начиная с 2020 года)
- Safari (начиная с 2015 года)
- Адаптивность: Вёрстка должна быть адаптивной и корректно отображаться на различных устройствах (мобильных, планшетах и десктопах).
- Кроссбраузерность: Обеспечить одинаковое отображение и функциональность сайта в указанных браузерах.
- Оптимизация: Вёрстка должна быть оптимизирована для быстрой загрузки и минимизации времени отклика.
- Интеграция компонентов: Если компоненты необходимо вносить в базовый шаблон, это должно быть сделано так же, как реализовано в базовом шаблоне, с описанием манифеста компонента и его возможных настроек. Интеграция должна быть продумана таким образом, чтобы компоненты корректно функционировали внутри сборщика из монорепозитория.
Исходные данные
- Проект на Angular:
- Существует проект на Angular, который реализует логику интернет-магазина по доставке готовой еды.
- Структура проекта:
- Есть базовый проект и компоненты шаблона заказчика.
- Некоторые элементы необходимо будет вносить в базовый проект, а другие — в компоненты заказчика.
- Сборка проекта:
- Сборка проекта происходит из единого монорепозитория, из которого берутся разные компоненты для создания сайта заказчика.
- Для этого потребуется использовать программу, осуществляющую такую сборку.
- Принципы разработки:
- Принципиально разработка проекта на Angular не отличается от стандартного процесса создания проекта на Angular.
- Не требуется писать взаимодействие между бэкендом и фронтендом, так как оно уже реализовано.
- Если потребуется добавить какие-либо данные, это можно сделать через уже существующие сервисы.
- Если какие-то данные на бэкенде будут недоступны, их можно замокать, чтобы не замедлять процесс разработки.
- Позже данные можно будет подключить или получить четкие указания по подключению, после чего провести тестирование.
Список страниц
- Главная страница
- Страница товара
- Страница входа в личный кабинет
- Страница личного кабинета
- Страница истории заказа
- Страница корзины
- Страница оформления заказа
- Шаг 1: Ввод данных
- Шаг 2: Выбор параметров заказа
- Шаг 3: Информация о заказе
- Тестовая страница
- Текстовая страница для статьи
- Страница контактов
- Страница вакансий
- Страница, разводящая на статьи
- Страница отзывов
- Страница приложений мобильных
- Страница 404 (Не найдена)
- Страница "Сайт временно не работает"
Полностью новые элементы
В данном разделе мы рассматриваем новые элементы, которые необходимо реализовать в проекте. Начнем с верхней части главной страницы, где размещен блок для скачивания нашего приложения. Этот блок также включает разделы "Почему нас выбирают", "Категории" и "Вакансии". Важно отметить, что все эти разделы оформлены в едином блоке, который располагается над футером. Этот блок, а также все его внутренние элементы, должны быть полностью реализованы, так как они отсутствуют в текущем варианте базового шаблона.
- Разделы "Вакансии" и "Статьи":
- Разделы "Вакансии" и "Статьи" должны быть интегрированы в общий проект, так как их абстрагирование невозможно. Они будут реализованы в базовом виде, который должен быть настраиваемым под запросы заказчика.
- Базовый вид для раздела "Вакансии" подразумевает простую реализацию в виде списка, аналогично тому, как это показано на странице вакансий.
- Грид, окруженный элементами, должен быть вынесен в общий проект, чтобы обеспечить возможность создания такого грида как для раздела статей, так и для других элементов. Настройки грида будут зависеть от параметров проекта, позволяя адаптировать внешний вид под конкретные требования.
- Блок оформления заказа:
- Важным элементом является блок оформления заказа, в котором отображаются примененные акции. Этот блок должен быть перенесен в общий проект после его реализации в базовом проекте.
- В базовом проекте также необходимо добавить строки для элементов, о которых уже шла речь, чтобы обеспечить полноту функционала и соответствие требованиям заказчика.
Таким образом, все новые элементы должны быть интегрированы в проект, с возможностью настройки и адаптации под специфические запросы, обеспечивая при этом качественное и удобное взаимодействие для пользователей.
