Верстка и программирование новой страницы на сайте

Аватар пользователя g.stepanenko

ПСД макет здесь - https://yadi.sk/d/Y6Bmul6u3a4yxe (десктоп и адаптив)
1. Название товара должно выводится над товаром и фото

2. http://prntscr.com/kgm1aq - при наведении на кнопки появляется ховер (оранжевый) и подсказка.
Для "заказать расчет" подсказка:
Цена зависит от выбранных размеров, материалов, фурнитуры и наполнения
Для "вызвать замерщика"
Размеры изделия могут быть изменены. Воспользуйтесь услугой замерщика

3. Характеристики
http://prntscr.com/kgm512 - это поле заполняется в карточке. http://prntscr.com/kgm5jz
Блок описания про габариты - статичный.
Материалы:
Функционал блока такой, же как сейчас на сайте. только в новом дизайне. При клике на "здесь" - якорь до табов материалов.

4. Описание
http://prntscr.com/kgm6ct - если описание будет больше, то при клике на "читать дальше" открывается полностью и уходит под фото http://prntscr.com/kgm6xt

5. Должна быть возможность загружать несколько фотографий для карточки товара и открывать их в большом размере при клике. http://prntscr.com/kgm7gc - стрелки перелистывают фото. При наведении на маленькое фото должен быть ховер, при клике на него - открываться должен в полном размере.

6. Если фото у товара только одно, то описание должно начинаться как в макете, а продолжение уходить под фото http://prntscr.com/kgm898

7. Преимущества
http://prntscr.com/kgm8eb - статичный блок. Эти иконки уже сверстаны и есть в каталоге, только названия у них другие.

8. Табы
http://prntscr.com/kgm9mf - на первом табе показн ховер активного таба, второй таб - не активный, справа - ховер наведения на таб.
В табах должны выводится вот эти блоки - http://prntscr.com/kgma4a , чтобы материалы не занимали много места - выводим в два ряда. При клике на "показать еще" подгружаются еще 2 ряда.

9. Похожие товары
Эти товары выводятся так же. как в каталоге, только вместе кнопки "рассчитать" кнопка "подробнее" - при клике переход в карточку товара. В похожих товарах должны выводится товары из того же раздела.

10. Отзывы
Пока отзывы выводим как и сейчас на сайте, но потом они должны выводится с фото, при наведении на фото должен быть ховер с лупой, при клике - открываться в полном размере http://prntscr.com/kgmbb9

11. Форма
Отрисована новая форма для отзывов http://prntscr.com/kgmbz6 . Должна быть возможность прикреплять несколько фото к отзывы (ховер на "добавить еще" показан справа), если не заполнены обязательные поля, должна появляться в поле надпись красным "Обязательное поле!". Не отрисован поп-ап после отправки формы - дошлю его.

12. http://prntscr.com/kgmczl - этот блок должен работать как вот это на существующей карточке http://prntscr.com/kgmda1

13. Наши салоны и подвал, такие же, как у каталога.

В комментариях жду предложений с ценами и сроками выполнения работы.

0 Thanks