Интернет-магазин

Пэт проект интернет-магазин на Vue.

Деплой

https://polite-beijinho-ecade0.netlify.app

Функционал

Каталог

• В карточках можно ставить и снимать лайки
• Реализованы табы по категориям товаров
• Товары можно добавлять в корзину
• Реализована пагинация по клику на кнопку Show more
• Лайки и содержимое корзины сохраняются в LocalStorage
• При загрузке страницы уходит запрос на сервер за каталогом товаров. Если после первого запроса возвращается ошибка, то приложение делает еще три дополнительных запроса на сервер с динамичным интервалом. Между запросами рендерится таймер обратного отсчета до следующего запроса:
  

Первый запрос --> Ошибка
Рендерится таймер на 3 секунды --> Второй запрос --> Ошибка
Рендерится таймер на 6 секунд --> Третий запрос --> Ошибка
Рендерится таймер на 9 секунд --> Четвертый запрос --> Ошибка

Если после третьего дополнительного запроса возвращается ошибка,
то рендерится сообщение о проблемах на сервере.

Попапы

• В попапе лайков можно: снять лайк или перейти на страницу товара
• В попапе корзины можно: удалить товар, изменить количество товара, перейти на страницу товара или на страницу оформления заказа

Карточка товара

• Можно добавить товар в корзину, поставить или снять лайк

Страница оформления заказа

• Можно удалить товар, изменить количество товара или перейти на страницу товара
• Можно выбрать вариант доставки Pickup или Delivery. Стоимость доставки у вариантов разная и учитывается в заказе
• При выборе варианта Delivery приложение определяет страну и город пользователя с использованием Geolocation API. Если пользователь подтверждает свое местоположение, то в форме оформления заказа в поле Delivery Region подставляется значение
• Набор полей в форме зависит от варианта доставки. Для варианта Pickup отсутствуют поля Delivery region и Delivery address
• Поля формы Full name и Phone обязательны для заполнения. Реализована валидация этих полей на минимальное количество символов. Ошибки подсвечиваются

Страница успешного оформления заказа

• При загрузке страницы запускается таймер обратного отсчета на несколько секунд, потом редирект на главную страницу

404 страница

• При переходе на несуществующий роут рендерится 404 страница с таймером обратного отсчета. По истечении заданного времени происходит редирект на главную страницу

Стек

• Vue 3 Composition API
• Vue Router
• Pinia
• API товаров: fakestoreapi.com
• API геокодера: BigDataCloud
• Адаптивная верстка

Установка

Для запуска на локальной машине необходимо:

1. Установить npm зависимости:
   

npm install

2. Запустить в режиме разработки:
   

npm run serve

Если все прошло успешно, проект будет запущен на http://localhost:8080