Оглавление статьи
Описание проекта
Основная идея заключалась в создании проекта с применением полученных знаний при изучении JavaScript. За основу был взят проект, разработанный в рамках этой статьи.
Дизайн, идея проекта, а так же API был взят из платного курса от webcademy.ru.
Функционал проекта
Роутинг
Маршрутизация в проекте выполнена как spa, что позволяет переходить по ссылкам сайта без обновления самой страницы. Поддерживаются два вида маршрутов:
- Старый вариант с использование хэшей #/foo/bar
- Актуальный вариант с использованием привычных ссылок /foo/bar
Фильтр товаров
При первом переходе на сайт пользователю отображаются все доступные товары. Фильтр позволяет выполнить выборку товаров по нужным критериям. Всего доступно 4 критерия по которым можно отфильтровать товары:
- Выбор проекта
- Количество комнат
- Площадь
- Стоимость
При выборке отображается количество найденных совпадений, с которыми пользователь может ознакомиться при нажатии на кнопку “Показать”.
Список товаров
Отображение товаров выполнено в двух стилях, между которыми можно переключаться:
- Плиткой
- Таблицей
Сортировка товаров
Для каждого стиля отображения товаров предусмотрена свое оформление сортировки.
Избранное
Каждый товар может быть добавлен в избранное нажатием по соответствующей иконке в виде сердца.
Добавить товар в избранное можно как из главной страницы, так и через страницу самого товара.
Все избранные товары отображаются в отдельной странице “Избранное”.
Так же избранные товары могут быть убраны из страницы “Избранное”, повторным нажатием на иконку сердца.
Страница товара
Имеется возможность ознакомиться с понравившимся товаром подробнее перейдя на его отдельную страницу.
Бронь товара
Там же на странице товара имеется возможность его забронировать, нажав по кнопке “Забронировать” и заполнив форму.
Список заявок
Все отправленные заявки на бронь будут отображаться на отдельной странице “Заявки”.
На странице заявок предусмотрена пагинация.
Итоги проекта
Работа была выполнена в рамках Пет проекта.