Необходимо сверстать макет страницы интернет-магазина:
https://www.figma.com/file/6LxPDEsauEGanhR2nDW68X/Banki.shop?node-id=0%3A1
###Технические требования:
- при выполнении тестового задания использовать VueJS (без использования Vue CLI)
- можно использовать Bootstrap, jQuery
- верстка должна максимально соответствовать предоставленному макету и ui-киту, адаптивная. Желательно PixelPerfect.
- результат должен корректно отображаться во всех популярных браузерах, включая IE 11 версии
- при работе над заданием обязательно использование средств автоматизации (webpack или gulp). Конфигурация должна корректно работать на 16 версии Node.js
###Требования к приложению - реализовать следущий функционал:
-
Строка поиска При ввода текста в строке поиска должен происходить поиск по названиям позиций. Лишние карточки должны исчезать/скрываться.
-
Кнопка "купить" При нажатии на кнопку:
- она должна менять состояние, на 2 сек, на "обрабатывается"
- после "обрабатывается" переходить в состояние "в корзине" Отображение состояний визуально оформить, напр. "preloader icon", "purchase icon", "checked icon", и т.п. Дизайн/стиль продумать самостоятельно.
-
Сохранение состояния позиций После перезагрузки страницы, состояния позиций (в корзине он или нет) должно сохраняться.
-
Подробное описание позиции При клике на название/изображение товара должна открывается модальное окно с карточкой товара. В карточке должны быть:
- краткое описание позиции
- цена
- слайдер, содержащий 2-4 изображения