Макет проекта по ссылке.
Начальное состояние проекта по ссылке.
Ознакомиться с разметкой можно в директории markup.
Все необходимые данные загружаются с сервера, сервер доступен по ссылке.
Проект должен соответствовать критериям качества.
Кондитерская Кекс — интернет-магазин десертов: тортов, пирожных. Пользователи сайта могут регистрироваться, добавлять товар в избранное, оставлять комментарии и оценивать вкусности.
Хэдер имеет несколько состояний в зависимости от которых меняется его наполнение.
-
Хэдер неавторизованного пользователя
- Логотип — при клике на логотип пользователь перенаправляется на главную страницу.
- Кнопка регистрации перенаправляет на страницу регистрации.
- Кнопка входа перенаправляет на страницу входа.
-
Хэдер авторизованного пользователя
- Аватар пользователя
- Почта пользователя
- Логотип — при клике на логотоип пользователь перенаправляется на главную страницу
- Иконка избранного. Если в избранное добавлен хотя бы один товар, то рядом с иконкой показывается количество товаров, добавленных в избранное. При каждом добавлении товара или удаление из списка избранных, счётчик меняет своё значение.
- Кнопка
выход, при клике на которую происходит выход из закрытой части приложения.
Отрисовать футер.
Кнопка назад возвращает пользователя на один шаг назад, на ту страницу, с которой был осуществлён переход.
Если на странице каталога отрисованы не все карточки товара, то показывается кнопка показать ещё. При клике на кнопку отрисовываются следующие шесть карточек.
Если на странице показаны все карточки, кнопка скрывается.
Если на странице показаны все карточки, показывается кнопка в начало. При клике на неё страница прокручивается до самого верха.
Приложение состоит из нескольких страниц: Каталог /Catalog, Избранное /Favourites, 404 /404, Вход /logIn, Регистрация /SignUp, Главная /Index, Ошибка страницы /ErrorPage, Страница товара /ProductPage
Страница доступна только для неавторизованных пользователей, остальные переправляются на главную страницу.
Поля для ввода данных: имя, пароль, адрес электронной почты, загрузка изображения-аватара.
Данные полей проходят валидацию:
- Имя. Обязательное поле. Валидное имя включает минимум одну букву.
- Пароль. Обязательное поле. Валидный пароль содержит минимум одну букву и одну цифру. Пароль не должен содержать пробел.
- Почта. Обязательное поле. Валидный адрес — можно использовать регулярное выражение или встроенный валидатор браузера.
- Аватар. Необязательное поле. Для загрузки доступно изображение не более 100 на 100 пикселей, размер менее 1 мб, в формате jpg или png.
В случае ошибки заполнения к полю применяется соответствующий стиль и показывается соответствующее сообщение об ошибке. Форму при этом отправить невозможно.
Кнопка зарегистрироваться. При клике на кнопку данные отправляются на сервер. В случае ошибки запроса введённые пользователем данные сохраняются и появляется соответствующее сообщение. При успешной отправке форма очищается, а пользователю показывается сообщение об успехе.
Ссылка-переход на страницу входа.
Страница доступна только для неавторизованных пользователей, остальные переправляются на главную страницу.
Поля для ввода данных: почта и пароль.
Данные полей проходят валидацию:
- Почта. Обязательное поле. Валидный адрес — можно использовать регулярное выражение или встроенный валидатор браузера.
- Пароль. Обязательное поле. Валидный пароль содержит минимум одну букву и одну цифру. Пароль не должен содержать пробел.
В случае ошибки заполнения к полю применяется соответствующий стиль и показывается соответствующее сообщение об ошибке. Форму при этом отправить невозможно.
Кнопка входа. При клике на кнопку данные отправляются на сервер. В случае ошибки запроса введённые пользователем данные сохраняются и появляется соответствующее сообщение. При успешной отправке форма очищается, а пользователь перенаправляется на главную страницу.
Ссылка-переход на страницу регистрации.
Если при загрузке данных о товарах произошла ошибка, показывается страница /ErrorPage
Главная страница доступна всем пользователям.
Главная страница состоит из блоков и элементов:
- Хэдер и футер
- Хиро блок
- Блок кексы
- Виджет последний отзыв
- Интерактивная карта
Хиро блок содержит ссылку на страницу каталога.
Блок кексы: Блок с 3 случайными карточками товаров и карточкой-ссылкой на каталог товаров. При клике на карточку товара осуществляется переход на страницу данного товара.
Последний отзыв. В виджет отрисовывается последний комментарий, оставленный пользователями к любому продукту.
Интерактивная карта с отметкой точек продаж. Для отметки доступны два вида меток: для кондитерских и для производства. Пользователь может выбрать, какую точку показать на карте. По умолчанию выбран первый магазин. Для работы с картами используется библиотека Leaflet.
Метки для работы с картой:
- Кондитерская 1 — 59.970969, 30.316252 — img\content\map-marker2.svg
- Кондитерская 2 — 59.967947, 30.274708 — img\content\map-marker2.svg
- Производство — 59.960380, 30.308725 — img\content\map-marker1.svg
Страница доступна всем пользователям.
Страница состоит из блоков и элементов:
- Хэдер и футер
- Ссылка назад
- Фильтр
- Список с карточками товара
- Кнопка показать еще или кнопка в начало
Доступны два взаимосвязанных фильтра.
По умолчанию ни один из фильтров не применён.
Первоначально пользователю доступен фильтр первого порядка — основы. После выбора основы пользователю становится доступен фильтр второго порядка — начинки и украшения.
Выбрать единовременно можно только одну основу. Для одной основы может быть выбрано несколько видов начинок и украшений. Показанные на странице товары должны соответствовать выбранным фильтрам.
Клик по уже выбранному варианту фильтра отменяет этот выбор. Если пользователь отменил выбор основы, то соответствующий фильтр второго порядка скрывается, все выбранные в нём опции сбрасываются.
Если для выбранных фильтров нет доступных товаров, отрисовывается соответствующее сообщение.
В каталоге изначально отображается до шести карточек товара. Если каталог содержит больше карточек, пользователю доступна кнопка показать ещё. При клике на неё отрисовывается следующая порция карточек. После того, как пользователю показаны все возможные карточки, кнопка показать ещё скрывается, а вместо неё показывается кнопка в начало. При клике на неё страница прокручивается до самого верха.
Каждая карточка содержит информацию:
- Наименование продукта
- Изображение
- Цена
- Чип новинка (опционально)
- Кнопка
добавить/удалить в избранное. Если пользователь неавторизован, при клике на кнопку он перенаправляется на страницу входа.
При клике на наименование или изображение продукта пользователь перенаправляется на страницу соответствующего товара
При добавлении продукта в избранное или его удалении изменяется внешний вид кнопки, а также значение счётчика в хэдере.
Страница доступна всем пользователям, но для работы части функционала необходимо пройти регистрацию.
Страница состоит из блоков и элементов:
- Хэдер и футер
- Ссылка назад
- Информация о товаре
- Форма отправки отзыва (по умолчанию скрыта)
- Список отзывов
Блок содержит информацию: наименование товара, цену, вес, рейтинг, описание товара — и кнопку добавления в избранное.
Если с сервера приходит дробное значение рейтинга, его необходимо округлить до ближайшего целого.
В описании товара по умолчанию отрисовывается до 140 символов. Если символов в описании больше, доступна иконка …, при клике на которую открывается оставшаяся часть описания, а сама иконка скрывается.
Кнопка добавления в избранное работает так же, как в карточке товара.
При клике на кнопку оставить отзыв авторизованным пользователем открывается форма оставить отзыв. Кнопка оставить отзыв меняет вид на отменить отзыв, а также изменяются стили блока с информацией о товаре. При открытой форме у пользователя сохраняется доступ к сортировке и фильтрам.
При клике на кнопку отменить отзыв форма отзыва скрывается, поля ввода очищаются, блок с информацией о товаре возвращается к изначальному виду.
Для неавторизованного пользователя при клике на кнопку оставить отзыв происходит перенаправление на страницу входа.
Оставить отзыв может только авторизованный пользователь.
Кроме текстового отзыва на продукт, пользователю необходимо поставить оценку. Данное поле обязательно для заполнения. По умолчанию оценка не проставлена.
В форме для отправки отзыва доступно два текстовых поля: достоинства и недостатки.
Если пользователь выбрал оценку 4 или 5 звёзд, обязательным для заполнения будет поле — достоинства, заполнение второго поля при этом опционально.
Если пользователь выбрал оценку от 1 до 3 звёзд, обязательным для заполнения будет поле — недостатки, заполнение второго поля при этом опционально.
При заполнении текстового поля пользователю доступен счётчиков символов — при каждом введении нового символов, счётчик указывает оставшееся доступное для ввода количество символов. Ограничение для поля 500 символов.
Данные полей ввода проходят валидацию. Если поле заполнено неверно, к нему применяется соответствующий стиль и показывается сообщение об ошибке. У пользователя не должно быть возможности отправить неправильно заполненную форму.
Клик на кнопку отправить отзыв отправляет данные на сервер. Если при отправке произошла ошибка, показывается соответствующее сообщение, а введённые пользователем данные сохраняются. При успешной отправке форма очищается.
Список отзывов доступен всем пользователям.
По умолчанию отображаются отзывы с любым рейтингом, отсортированные от самых новых к более старым.
Для списка отзывов доступен фильтр по рейтингу и сортировка по дате добавления.
На странице отрисовывается по два отзыва. Если для товара доступно больше отзывов, показывается кнопка показать ещё. При клике на неё отрисовывается следующая порция отзывов. Если показаны все отзывы, кнопка скрывается.
Если фильтру не соответствует ни один отзыв, отрисовывается соответствующее сообщение и кнопка сбросить фильтры. При клике на кнопку список возвращается к состоянию по умолчанию.
В случае ошибки загрузки отзывов на странице показывается соответствующее сообщение и кнопка попробовать ещё — при клике на кнопку отправляется повторный запрос по загрузке отзывов.
Если у товара ещё нет отзывов, пользователь видит соответствующее сообщение.
Страница доступна только авторизованным пользователям.
Перейти на страницу можно по клику на иконку избранного в хэдере.
Страница состоит из блоков и элементов:
- Хэдер и футер
- Ссылка назад
- Счётчик товаров и их стоимость
- Карточки товаров
- Кнопка очистки
Если в избранном есть товары, то на странице отображается блок с их количеством и общей стоимостью, а также карточки выбранных товаров.
Если товаров в избранном нет, на странице отрисовывается соответствующее сообщение.
Клик на кнопку удалить из избранного в карточке товара, удаляет этот товар из списка. Стоимость товаров и их количество при этом пересчитываются.
Клик на кнопку очистить удаляет все товары из избранного.
Обращение к несуществующей странице не приводит к появлению ошибок в приложении, а корректно обрабатывается маршрутизацией. Пользователь перенаправляется на страницу «404».
Все необходимые данные загружаются с сервера.
Сервер доступен по адресу
Спецификация по взаимодействию с сервером в формате OpenAPI
Во время выполнения запроса показывается лоадер. Дизайн лоадера заложен в вёрстке.
В случае недоступности сервера отображается информационное сообщение.
Авторизация на сервере происходит на основании токена. Токен передаётся с каждым запросом в заголовке X-Token.
Для работы с картами используйте библиотеку: Leaflet
Вёрстку вы сможете найти в приложенном к техническому заданию архиве.