Срочная работа, макеты высылаю исполнителю отдельно.
Имеем в наличии 3 страницы: index.html (главная страница – каталог товаров), catalog.html (страница раздела с товарами), detail.html (детальная страница товара).
На главной странице есть перечень разделов, которое в данном случае является меню. Название раздела и иконка к нему – это ссылка на раздел. Иконка должна быть svg картинкой. При наведении на ссылку, подчеркивание у текста убирается.
В популярных товарах ссылкой на детальную страницу является название, изображение товара и кнопка "Подробнее". Если название товара занимает более двух строк, то следующая строка не налезает на первую, а смещается ниже. Сортировка происходит без перезагрузки страницы.
На странице раздела название раздела – это H1. Относительно товаров все то же самое, что и на главной странице. Строка под названием раздела – это фильтр, который меняет содержимое каталога без перезагрузки страницы. Сортировка применяется к выбранному подразделу, тоже без перезагрузки страницы. Фильтр работает на javascript/jquery. При выборе какого-либо свойства, оно сразу применяется, показывая только подходящие товары.
Детальная страница. Название товара – H1. Хлебные крошки ведут на соответствующие страницы раздела. Справа под ценой при клике на кнопку "Заказать" под описанием товара открывается форма заказа. Форма должна проходить валидацию на корректность введенных данных. Обязательные поля: Имя, Фамилия, Емэйл/Телефон, Адрес доставки, Капча. При успешном отправлении форма сворачивается и на ее месте появляется текст "Заказ успешно отправлен!", если какая-либо ошибка связанная с валидацией полей, то это поле выделяется красной обводкой и справа от него пишется ошибка, если ошибка на стороне сервера, то над формой появляется сообщение о том, что что-то пошло не так и описание ошибки.
Изображения товара имеют миниатюры, при клики на которые меняется основная картинка.
Опубликован 13.04.2015 в 19:12
Заказ находится в архиве