Online Store

[Buffik]

Deploy: https://buffik.github.io/Online-Store/#/

Используемые библиотеки

Фронтенд:

React
React router
Sass
(ограничение разработки проекта: запрещено использование state-manager и сторонних библиотек по работе с сервером)

Бэкенд:

в качестве базы для наполнения проекта контентом использовались данные с dummyjson.com

Работа выполнена в команде из двух человек:

Владимир @Buffik
Динара @dinara-n

Особенности работы приложения

Главная страница (Страница товаров с фильтрами)

1. Фильтрация продуктов:
   • присутствуют два блока фильтров, по категории и брэнду/названию, где реализован список с возможностью выбрать конкретную категорию/брэнд.
   • присутствуют два блока фильтров с ползунками (dual-slider), по диапазонам цены и наличию на складе. Можно заменить наличие на складе на другое свойство товара выбранной тематики.
   • изменение любых фильтров добавляет в query-параметры соответствующие данные, для того, чтобы при перезагрузке страницы восстанавливалось текущее состояние страницы с примененными фильтрами.
   • при применении любого фильтра, динамически пересчитываются все фильтры и меняются состояния элементов в них. Текстовый поиск также относится к фильтрам. При выборе определенной категории товара, в других фильтрах пересчитывается количество найденных товаров с указанием сколько найдено при такой конфигурации фильтров, а также сколько доступно без учета всех применённых фильтров. В случае с dual-slider меняется их состояние-диапазон.
2. Реализована сортировка продуктов
   • присутствует возможность сортировки продуктов минимум по 2 критериям, например по цене и рейтингу (от наименьшего к большему и наоборот).
   • данные сортировки (если применялась) должны быть добавлены в query-параметр адресной строки. При копировании ссылки и открытии в новом окне/перезагрузке страницы, сортировка применяется к найденным продуктам.
   • при открытии в новом окне ссылки, которая содержит query-параметр сортировки, блок сортировки меняет свое состояние.
3. Реализован текстовый поиск по всем данным продуктов
   • реализован input для поиска-фильтрации продуктов по любым данным.
   • input работает одновременно с другими фильтрами.
   • добавляется в query-параметры и при перезагрузке страницы восстанавливается состояние текущего поиска. Input также восстанавливает состояние и содержит поисковый текст.
4. Реализовано переключение вида найденных продуктов
   • реализована возможность переключения вида найденных товаров: списком / блоком карточек.
   • добавляется в query-параметры. При перезагрузке страницы восстанавливается состояние текущего вида.
5. Реализован роутинг с query-параметрами
   • все примененные фильтра, сортировка, вид отображения продуктов, текстовый поиск содержаться в query-параметрах и при перезагрузке страницы восстанавливают свое состояние.
6. Реализованы кнопки сброса и копирования поиска
   • реализована кнопка сброса всех фильтров.
   • реализована кнопка копирования в буфер памяти текущего поиска.
7. Реализован блок кол-ва найденных товаров
   • после применение фильтров отображается кол-во найденных товаров
   • в случае, если товаров не нашлось, информация об этом дополнительно выводится в блоке товаров.
8. Поведение карточек найденных товаров
   • карточка товара содержит кнопку добавления в корзину. Состояние кнопки меняется при добавлении/удалении, а также восстанавливается если товар был добавлен на других страницах
   • Реализована возможность перехода на страницу с описанием товара.

Страница корзины товаров

1. Реализован блок отображения добавленных продуктов
   • продукты выводятся списком, у каждого продукта присутствуют полные данные (имя, категория, цена и т.д.) и блок для управления кол-вом данного товара.
2. Реализовано увеличение кол-ва конкретного товара и его удаление.
   • у каждого товара есть кнопка увеличения его кол-ва в корзине. При увеличении кол-ва, также изменяется состояние кол-ва и общей цены в Header-e и на странице корзины товаров. А также увеличивается общая сумма этого товара у него в списке. При этом, нельзя добавить товара больше, чем есть на складе. Информация о наличии на складе также выводится.
   • у каждого товара есть кнопка уменьшения его кол-ва в корзине. Если при уменьшении кол-ва товара его значения становится менее 1, то товар автоматический удаляется из корзины и текущей страницы. Также изменяется состояние кол-ва и общей цены в Header-e и на странице корзины товаров.
3. Реализована пагинация
   • добавлена пагинация с выбором кол-ва товара на одной странице. При изменении кол-ва товаров на странице, автоматически пересчитывается кол-во страниц для переключения. Нельзя переключиться на несуществующую страницу. При удалении товара, пагинация пересчитывается в случае, если после удаления страниц стало меньше, чем та, на которой находился пользователь. Данные добавляются в query-параметры, а состояние текущей выбранной страницы и лимита товаров на ней восстанавливается при перезагрузке страницы.
   • если товаров в корзине нет, то все блоки страницы скрываются и вместо них выводится соответствующее сообщение.
   • товар на каждой странице имеет порядковый номер с учетом того, сколько товаров есть до него на предыдущих страницах.
4. Хранение данных в localStorage
   • данные о добавленных продуктах хранятся в localStorage и при перезагрузке страницы восстанавливаются.
   • добавление и сохранение данных в localStorage происходит также и с других страниц приложения.
5. Реализован промокод блок
   • реализовано поле ввода промокодов. При этом, если промокод найден во время ввода, то реализована возможность добавления промокода в список примененных. При добавлении каждого промокода, зачеркивается старая итоговая цена на странице корзины(итоговая цена к оплате за все товары) и отображается новая, с учетом скидки промокода. Если промокодов более одного, то суммируется их общая скидка и применяется к итоговой цене. Кроме того, есть возможность удаления промокода из списка примененных. Итоговая цена при этом также пересчитывается.
6. Реализована кнопка открытия модального окна оформления покупки
   • при клике на кнопку открывается модальное окно для оформления заказа.
7. Реализован блок с общей суммой и кол-вом всех выбранных товаров
   • блок отображает сумму и кол-во всех товаров и реагирует на применение промокодов.

Модальное окно оформления товара

1. Реализован блок ввода персональной информации с валидацией
   • добавлено поле "Имя и Фамилия". Валидация: содержит не менее двух слов, длина каждого не менее 3 символов.
   • добавлено поле "Номер телефона". Валидация: должно начинаться с '+', содержать только цифры и быть не короче 9 цифр.
   • добавлено поле "Адрес доставки". Валидация: содержит не менее трех слов, длина каждого не менее 5 символов.
   • добавлено поле "E-mail". Валидация: проверяется, является ли введенный текст электронной почтой.
2. Реализован блок ввода данных банковской карты с валидацией
   • реализован ввод номер карты. Валидация: кол-во введенных цифр должно быть ровно 16, допускается ввод только цифр.
   • реализована автоматическая смена логотипа платежной системы. Если номер карты начинает с 4, устанавливается логотип Visa, если 5 - MasterCard.
   • реализован блок ввода срока действия карты. Валидация: допускается ввод только цифр, месяц не может быть больше 12, длина поля должна быть равна 4.
   • реализован блок ввод CVV кода. Валидация: длина 3 символа, допускается ввод только цифр.
3. Реализована кнопка завершения заказа
   • при клике на кнопку submit/confirm проверяются все поля на валидность, если у поля есть ошибки валидации, то рядом с этим полем выводится сообщение с ошибкой
   • при успешном прохождении валидации всех полей и нажатии на кнопку, выводится сообщение, что заказ оформлен. Затем, спустя 5 секунд происходит редирект на главную страницу магазина. Корзина при этом очищается.

Страница с описанием товара

1. Реализованы блоки страницы
   • присутствуют "хлебные крошки", указывающие на путь товара относительно корня сайта, (STORE > LAPTOPS > APPLE > MACBOOK PRO)
   • реализован блок с фотографиями товара, которые можно увеличивать при клике/наведении. Фотографии не содержат дубликаты (dummyjson.com присылает одинаковые фотографии, но под разными id, фильтрация осуществлена по значению content-length Header response).
   • реализован блок с полными данными товара (название, категория, описание, цена и т.д.)
   • присутствует кнопка добавления товара в корзину. Состояние кнопки зависит от того, есть ли товар в корзине.
   • присутствует кнопка быстрой покупки товара. При клике, если товара нет в корзине, происходит автоматическое добавление в корзину и переход на страницу корзины, с уже открытым модальным окном. Если товар уже был в корзине, повторное добавление не требуется.
2. Страница открывается в новом окне по ссылке с id/name товара
   • страница конкретного товара имеет свой маршрут. Например, страница с товаром iPhone X открывается вне зависимости от того, посещались ли другие страницы приложения

Страница 404

1. Страница реализована
   • при переходе по несуществующему адресу открывается страница 404. Например, 'https://buffik.github.io/Online-Store/#/werwerswdfs' в случае если страницы с названием 'werwerswdfs' не существует.
2. Страница не реагирует на некорректные query-параметры
   • при появлении необрабатываемых query-параметров, страница не открывается. Например, 'https://buffik.github.io/Online-Store/#/?rgfg=dfoh'. '?rgfg=dfoh' некорректен, не направляет на страницу 404