OctopussyO / bag-shop-test

Cтраница вывода списка товаров с возможностью сортировки товаров, добавления/удаления товаров в корзине.

Home Page:https://test-bag-shop.herokuapp.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Bag Shop

Иллюстрация к проекту

Cтраница вывода списка товаров с возможностью сортировки товаров, добавления/удаления товаров в корзине.

Ознакомиться с приложением можно по ссылке.

Функциональность

  1. Первая страница проекта представляет из себя список товаров первой категории из имеющихся и выбранной первой категорией в списке (данные должны быть получены и отрисованы на сервере).
  2. Переключение между категориями, при этом список товаров обновляется в соответствии с выбранной категорией.
  3. Добавление в корзину и удаление из нее любого из представленных товаров, посредством нажатия соответствующего триггера на карточке товара, при этом иконка меняет свое состояния в зависимости от наличия данного товара в корзине.
  4. Открытие корзины в модальной панели по клику соответствующего триггера в шапке сайта.
  5. Просмотр пустой корзины.
  6. Просмотр корзины с товарами.
  7. Удаление из корзины товаров из списка по клику соответствующего триггера на карточке товара в корзине.
  8. Отправка заявки на исполнение заказа с валидацией и масками для соответствующих полей.
  9. Отображение блока удачной отправки заявки.
  10. Удаление товаров из корзины после удачной отправки заявки.
  • Каждая категория реализована в отдельный странице посредствам Nested Routes.
  • Содержимое корзины будет сохраняться, даже если пользователь закроет вкладку и снова зайдет на сайт.

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

JavaScript Vue.js Vuex Nuxt.js Axios SCSS CSS HTML Netlify

Инструкция по разрёртыванию проекта:

# клонирование репозитория
$ git clone https://github.com/OctopussyO/news-explorer-frontend.git

# установка зависимостей
$ npm install

# запуск приложения в режиме разработчика
$ npm run start

# сборка проекта
$ npm run build

Планы по доработке проекта:

  1. Сверстать страницу ошибки.
  2. Добавить возможность поставить "звёздочку" товару.
  3. Добавить попапы с подтверждением при удалении товара из корзины.
  4. Доработать компонент формы (валидация, рефакторинг).
  5. Выделить компонент поля ввода с маской.
  6. Сделать адаптивную версию для мобильных устройств.

About

Cтраница вывода списка товаров с возможностью сортировки товаров, добавления/удаления товаров в корзине.

https://test-bag-shop.herokuapp.com/


Languages

Language:Vue 75.8%Language:JavaScript 14.4%Language:SCSS 9.9%