Програміст Опенкарт 3.0.2.0.

Технічне завдання: Адаптація сторінки картки товару під різні розширення екрану для ПК

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