Техническое задание: Адаптация страницы карточки товара под разные разрешения экрана для ПК
1. Общий описание
Необходимо адаптировать страницу карточки товара в соответствии с дизайном, представленным в
скриншоте. Основная цель – обеспечить правильное расположение элементов на различных
разрешениях экрана, улучшить UX и сделать интерфейс более удобным для пользователей.
2. Требования к адаптивности
● Страница должна корректно отображаться на экранах с шириной от 1024px и
выше.
● Использовать гибкие сетки (например, flexbox, grid) для расположения
блоков.
● Обеспечить правильное масштабирование и отступы между элементами.
3. Изменения на странице
3.1. Блок с ценой и характеристиками
● Обеспечить фиксированное расположение этого блока при прокрутке страницы
(sticky position).
● Добавить текст "Гарантированный кэшбэк".
● Сумма кэшбека автоматически рассчитывается как 1% от цены со скидкой и имеет
округление до 1 грн. в меньшую сторону.
3.2. Изменения в карточках товаров
Матрасы
● Переименовать "Доп. информация" на "Характеристики".
● Добавить:
● "Допустимое нагрузка". (цифру можно взять в свойствах)
● "Видеообзор" (если есть в галерее видео, открывать галерею именно с видео, если
нет, пункт не отображается).
Кровати
● Переименовать "Размер спального места" на "Размер спального места (Ш х
Д)".
● Переименовать "Размер" на "Габариты (Ш х Д х В)".
● Добавить:
● "Просмотреть образцы" (скролл до образцов ткани).
● "Видеообзор" (аналогично к матрасам).
● "Рекомендуем добавить" (скролл до блока "С этим товаром покупают").
● Переименовать "Доп. информация" на "Характеристики".
● Убрать из "Дополнительной информации" пункт "Категория ткани".
● Разместить в порядке, указанном на скриншотах.
4. Требования к верстке
● Корректное отображение в браузерах Chrome, Firefox, Opera, Edge, Safari.
5. Тестирование и приемка работы
● Работы проводить на dev версии сайта
● Тестирование на экранах 1024px, 1280px, 1440px, 1920px.
● Проверка корректного отображения всех элементов.
● Тестирование функционала прокрутки, зума, адаптивного блока с ценой.
6. Срок выполнения
● Желательный дедлайн – 10 рабочих дней.
7. Примечания
● Начать с карточки товара – матрасы. После завершения работ предоставить для
проверки. После согласования продолжить работу над другими категориями.
9. Дополнительные материалы
● Скриншот примера карточки товара (матрасы): Карточка товара-матрас.jpg
● Скриншот примера карточки товара (кровати): Карточка товара-кровать.jpg
● Пример отображения разрешения 1920px: Screenshot_2.png
