Программист Опенкарт 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