- Главная страница
- Каталог
- Карточка товара
- Избранное
- Корзина
- Оформление заказа
- 404 страница
- Ну и всевозможные модалки и попапы
- Модалка авторизации
- Карусели - реализованные с помощью библиотеки swiper.js
- Табы - реализованные с помощью js
- Аккордеоны - реализованные с помощью js (в мобильной версии)
- У каждой карточки товара своя страница с индивидуальными заполненными данными
- Пагинация из 3-ёх страниц и 26-ти товаров
- Добавление (удаление) товара в корзину/избранное - реализованное с помощью localStorage
- Фильтр товаров (просто разметка) - в мобилке фильтр реализован через попап
- Слайдер цены - реализованный с помощью библиотеки nouislider.js
- Аккордеоны (в виде кнопки - "Показать ещё") - реализованные с помощью js
- Изменение раскладки товаров - только в десктопе
- Модалка - "Сообщить о поступлении товара"
- Хлебные крошки
- Сортировка товаров - в мобилке реализован через попап
- Популярные товары - просто отрисовываем товары, как есть.
- Сначала дешевле
- Сначала дорроже
- Высокий рейтинг
- Модалка (карточка товара => характеристики) - "Сообщить о неточности"
- Реализовано проставление рейтинга товара с помощью jquery библиотеки - RateYo!
- Так же из карточки товара доступно добавление товара в избранное и его удаление оттуда
- Карта - реализована с помощью Яндекс карт
- Поиск введенного пользователем адреса - реализован с помощью Яндекс геокодера
- Автоматическое увеличение высоты поля с комментариями при наборе текста - реализовано с помощью js
Шаблон предназначен для начала работы над проектом с использованием препроцессора Sass и сборщика проектов Gulp. Все исходные файлы размещаются в папке src, результат будет сохраняться в папку build:
.
├─ /build # Каталог сборки проекта (cоздаётся автоматически)
│ ├─ /css # Папка со стилями
| ├─ /fonts # Папка с шрифтами. При использовании скрипта gulp ttfToWoff, шрифты автоматически переносятся в эту папку в форматах woff, woff2
│ ├─ /img # Папка с изображениями
│ ├─ /js # Папка с скриптами
│ └─ index.html # Файл с html кодом
├─ /gulp # Папка с функциями (задачами) для сборщика проектов Gulp на JS
| ├─ /config # Папка с общими значениями, функциями, плагинами...
| | ├─ path.js # Пути к файлам
| | └─ plugins.js # Часто используемые плагины
| └─ /tasks # Задачи (функции для сборщика Gulp)
| ├─ clean.js # Полное удаление проекта
| ├─ fonts.js # Работа с шрифтами
| ├─ html.js # Работа с разметкой
| ├─ images.js # Работа с изображениями
| ├─ script.js # Работа со скриптами
| ├─ server.js # Запуск локального сервера
| └─ styles.js # Работа со стилями
├─ /src # Каталог для размещения исходных файлов проекта
│ ├─ /fonts # Шрифты
│ ├─ /img # Изображения
│ ├─ /js # Скрипты
│ │ └─ script.js
│ └─ /styles # Стили
| ├─ /blocks # Папка с файлами стилей
│ ├─ /global # Папка для общих стилей
| | ├─ variables.scss # Файл для переменных
| | └─ fonts.scss # Файл куда будут компилироваться шрифты при использовании скрипта - gulp fontsStyle
| └─ style.scss # Файл для подключения файлов со стилями
├─ gulpfile.js # Задачи для сборщик проектов Gulp на JS
├─ .editorconfig # Файл конфигурации настроек редактора
├─ .gitignore # Файл исключений Git
├─ README.md # Документация проекта
├─ package-lock.json # lock-файл npm
└─ package.json # Cписок пакетов, необходимых для проекта с нужными версиями