online-store

[MOONcitizenX]

1. Task: https://github.com/rolling-scopes-school/tasks/tree/master/tasks/online-store-team

2.

3. Deploy: https://mkoroleva5-online-store.netlify.app/

4. 07.01.2023 / 10.01.2023

5. My score 300 / 300:

Страница товаров с фильтрами

1. Реализована фильтрация продуктов +40

• присутствуют два блока фильтров, по категории и брэнду/названию, где реализован список с возможностью выбрать конкретную категорию/брэнд. +5 за каждый блок +10
• присутствуют два блока фильтров с ползунками (dual-slider), по диапазонам цены и наличию на складе. Вы можете заменить наличие на складе на другое свойство товара выбранной Вами тематики. +5 за каждый блок +10
• изменение любых фильтров должно добавлять в query-параметры соответствующие данные, для того, чтобы при перезагрузке страницы восстанавливалось текущее состояние страницы с примененными фильтрами +10
• при применении любого фильтра, должны динамически пересчитываться все фильтры и меняться состояние элементов в них. Например, при выборе определенной категории товара, в других фильтрах должно пересчитываться количество найденных товаров с указанием сколько найдено при такой конфигурации фильтров, а также сколько доступно без учета текущего поиска. В случае с dual-slider должен меняться их состояние-диапазон. (см. демо) +10

2. Реализована сортировка продуктов +20
   • присутствует возможность сортировки продуктов минимум по 2 критериям, например по цене и рейтингу (от наименьшего к большему и наоборот) +10
   • данные сортировки (если применялась) должны быть добавлены в query-параметр адресной строки. При копировании ссылки и открытии в новом окне/перезагрузке страницы, сортировка должна применяться к найденным продуктам +5
   • при открытии в новом окне ссылки, которая содержит query-параметр сортировки, блок сортировки должен менять состояние, которое указывает, какая сортировка выбрана +5
3. Реализован текстовый поиск по всем данным продуктов +15
   • присутствует input для поиска-фильтрации продуктов по любым данным. Например, поиск должен работать по всем полям продукта (название, описание, цена, кол-во на складе и т.д.) за исключением не информативных полей (id, url картинки и тд.) +5
   • работает одновременно с другими фильтрами +5
   • добавляется в query-параметры и при перезагрузке страницы восстанавливается состояние текущего поиска. Input также восстанавливает состояние и содержит поисковый текст +5
4. Реализовано переключение вида найденных продуктов +10
   • реализована возможность переключения вида найденных товаров. Например списком / блоком карточек и т.д. Не менее двух вариантов. +5
   • добавляется в query-параметры. При перезагрузке страницы восстанавливается состояние текущего вида. Выбранный режим вида выделяется +5
5. Реализован роутинг с query-параметрами +10
   • все примененные фильтра, сортировка, вид отображения продуктов, текстовый поиск содержаться в query-параметрах и при перезагрузке страницы восстанавливают её состояние +10
6. Реализованы кнопки сброса и копирования поиска +10
   • реализована кнопка сброса всех фильтров +3
   • реализована кнопка копирования в буфер памяти текущего поиска, то есть адресную строку +4
   • кнопка копирования текущего поиска меняет состояние при копировании (как Вы это реализуете - решать Вам, можете сделать как в демо) +3
7. Реализован блок кол-ва найденных товаров +5
   • после применение фильтров отображается кол-во найденных товаров +3
   • в случае, если товаров не нашлось, информация об этом дополнительно выводится в блоке товаров +2.
8. Поведение карточек найденных товаров +10
   • карточка товара содержит кнопку добавления в корзину. Состояние кнопки меняется при добавлении/удалении, а также восстанавливается если товар был добавлен на других страницах +5
   • при клике на товар должен происходить переход на страницу с описанием товара +5

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

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

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

1. Реализован блок ввода персональной информации с валидацией +20

• добавлено поле "Имя и Фамилия". Валидация: содержит не менее двух слов, длина каждого не менее 3 символов +5
• добавлено поле "Номер телефона". Валидация: должно начинаться с '+', содержать только цифры и быть не короче 9 символов +5
• добавлено поле "Адрес доставки". Валидация: содержит не менее трех слов, длина каждого не менее 5 символов +5
• добавлено поле "E-mail". Валидация: проверяется, является ли введенный текст электронной почтой +5

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

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

1. Реализованы блоки страницы +30
   • присутствуют "хлебные крошки", указывающие на путь товара относительно корня сайта, например STORE > LAPTOPS > APPLE > MACBOOK PRO +5
   • реализован блок с фотографиями товара, которые можно увеличивать при клике/наведении. Фотографии не должны содержать дубликаты/повторы +10
   • реализован блок с полными данными товара (название, категория, описание, цена и т.д.) +5
   • присутствует кнопка добавления товара в корзину. Состояние кнопки зависит от того, есть ли товар в корзине. Например, товар мог быть добавлен в корзину на текущей странице или странице товаров и соответственно текст кнопки должен это отображать +5
   • присутствует кнопка быстрой покупки товара. При клике, если товара нет в корзине, происходит автоматическое добавление в корзину и переход на страницу корзины, с уже открытым модальным окном. Если товар уже был в корзине, повторное добавление не требуется +5
2. Страница открывается в новом окне по ссылке с id/name товара +10
   • страница конкретного товара имеет свой маршрут. Например, страница с товаром MacBook Pro открывается вне зависимости от того, посещались ли другие страницы приложения +10

Header

1. Header содержит корзину товаров +10
   • присутствует корзина с количеством выбранных товаров +5
   • количество выбранных товаров динамически изменяется при добавлении/удалении товара на всех страницах (корзина, карточка товара, поиск товаров). А также включает кол-во одного вида товара, который может быть добавлен больше 1шт на странице корзины +5
2. Header содержит общую сумму покупок +10
   • присутствует корзина с суммой выбранных товаров +5
   • сумма выбранных товаров динамически изменяется при добавлении/удалении товара на всех страницах (корзина, карточка товара, поиск товаров). А также включает кол-во одного вида товара, который может быть добавлен больше 1шт на странице корзины +5

Страница 404

1. Страница существует +6
   • при переходе по несуществующему адресу открывается страница 404. Например, 'https://your-deploy.com/gfdgd' в случе если страницы с названием 'gfdgd' не существует +6
2. Страница не реагирует на некорректные query-параметры +4
   • при появлении необрабатываемых(в вашем коде) query-параметров, страница не открывается. Например, 'https://your-deploy.com/?rgfg=dfoh'. Если в вашем случае параметр '?rgfg=dfoh' некорректен, то он не должен направлять на страницу 404 +4