Технічне завдання: Адаптація сторінки картки товару під різні розширення екрану для ПК
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
