Вёрстка интернет магазина

Вёрстка интернет магазина по готовому дизайну:  https://www.figma.com/file/1q4zeaAAGBZtnbsuxEU6X7/Kelb-Bike?node-id=58%3A900

Техническое задание по разработке 

интернет магазина kelb.bike

Общая информация

Необходимо разработать современный сайт — интернет магазин по реализации продукции по велосипедной и смежной тематике.

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

В проекте должно присутствовать три роли: Оптовый покупатель; Розничный покупатель; Администратор; Основные отличие покупателей друг от друга в данных, которые пользователи должны ввести при регистрации или заказе и в ценовой политике на товары.

Необходимо реализовать мультиязичность и конвертацию цены в разные валюты по курсу указанному в админ панели.

Сайт должен быть адаптирован под моб. устройства.


Сайты примеры:

Страницы

Интерфейс пользователя

1. Главная страница
2. О нас
3. Правила доставки
4. Наш блог и страница статьи
5. Каталог(Категория продукт)
6. Страница товара
7. Корзина
8. Заказ
9. Личный кабинет пользователя(оптовый покупатель)
10. Личный кабинет пользователя(розничный покупатель)
11. Избранные товары
12. Связаться с нами
13. Регистрация и Авторизация
14. Страница 404

Интерфейс Администратора 

1. Общая статистика магазина
2. Редактирование статических страниц
3. Каталог (Категории, продукты)
4. Менеджмент (формы обратной связи, заказы, пользователи)
5. Блог
6. Настройки магазина
7. Email рассылки
8. Для разработчика

Описание структуры и страниц

Интерфейс пользователя

• Шапка сайта — должна в себя вмещать: Логотип, навигацию ( категории, блог, о нас, связаться с нами и т. д.), блок с контактной информацией (номера телефонов график работы), блок авторизованного пользователя, корзина, переключатель языков.

Логотип должен ввести на главную страницу.

В блоке навигации, при клике на категории, данные должны выводится в древовидной структуре в первоначально скрытом виде. Так, же, нужно расположить иконку живого поиска по сайту, при нажатие на которую, открывается поле ввода и скрываются остальные пункты навигации. Остальные пункты навигации должны быть просто ссылками на страницы.

Блок информации исходя из тематики дизайна.

Блок авторизованного пользователя должен быть кнопкой с иконкой и именем пользователя, при нажатие выпадает список из ссылок на: мой профиль, избранные товары, мои заказы, выйти из аккаунта. Если пользователь не авторизован, отображать иконку избранных товаров с соответствующей подписью.

Корзина, иконка с цифрой кол-во товара и выпадающим окном, в котором отображаются последние пять товаров из корзины, их название, превью, цена и количество. Под списком товаров должна находится ссылка „Смотреть все“ если количество товаров в корзине больше пяти, рядом, общая сумма корзины и кнопка оформить заказ.

• Подвал сайта — по центру логотип, ведущий на главную страницу. По левую сторону блок соц. Сетей и контактов (номера телефонов, график работ, email, Адреса торговых точек). По правой стороне, отображать блок навигации.

• Главная страница — В верхней части на всю свободную от шапки высоту экрана расположить анимированый слайдер. Каждый из баннеров может быть ссылкой и на нём может отображаться текст и заголовок.
  
  

След. за слайдером идет блок из нескольких категория высшего уровня, Такие как: Велосипеды, Самокаты, Комплектующие. С иконками в стиле дизайна.

Далее блок с описанием преимуществ покупки на этом сайте на фоне тематического фото.

Блок выгодные предложения, с 5 карточками товарами и кнопкой смотреть все.

Блок SEO текста

• О нас — Банер и текст.

• Доставка — Баннер и текст информация об правилах оплаты и доставки.

• Наш блог и страница статьи — страница блока состоит из сортировки по дате публикации и списка статьей. У каждой карточки статьи есть картинка(превью), заголовок, текст(превью), дата публикации. На странице самой статьи, те же данные что и в карточки, только уже в полном виде и кнопка лайка с количеством лайков. Так же, разместить кнопку подписки на новости блога.

• Каталог — должен содержать сайтбар с параметрами сортировки по цене, названию. Фильтр по цене, наличию. Название выбраной категории, хлебные крошки, список карточек товара. В конце отобразить слайдер просмотренные товары.

• Страница товара — Главное фото и доп., Название товара, кнопка положить в корзину и быстрый заказ, блок или плажка акции\подарки, кнопка добавить в избранное. Блок характеристик и описание. Далее, отобразить слайдер товаров «С этим товаром покупают». В конце продублировать кнопку быстрого заказа. Если товара нет в наличии, вывести кнопку «Сообщить о поступление».

• Корзина — Вся корзина и взаимодействие должны быть реализованы на Vue js. Должна иметь такой функционал: Очистить корзину, оформить заказ, Продолжить покупки, Мои заказы(Если пользователь авторизирован), удалить товар, увеличить/уменьшить количество товара, связаться с менеджером. Так, же, если пользователь был не авторизирован и положил товары в корзину, после авторизации, товары должны остаться в его корзине с персчётом цены для роли пользователя, если он оптовик.
  Нужно реализовать систему email оповещений о забытой корзине.
  
  
• Заказ — Весь заказ и взаимодействие должны быть реализованы на Vue js . Заказ должен быть максимально прост, обязательные поля для заказа - это имя и моб. номер. Остальные поля: способ и адрес доставки, способ оплаты (Для авторизированного покупателя, нужно дать выбор, брать данные из профиля или заполнить вручную.), Фамилия, примечания к заказу и email. Если пользователь авторизирован, подставить все имеющиеся данные из профиля.
  Информация о заказе должна отсылаться на почту как админу так пользователю.

• Личный кабинет пользователя - должен содержать такие вкладки: Мой профиль, Мои заказы, Избранные товары, Моя Корзина, Информация для заказа.
  Данные которые пользователь может указать: ФИО, Дата рождения, Номер телефона, Название организации(если оптовый пользователь), Номер телефона моего менеджера(если оптовый пользователь), Имя моего менеджера(если оптовый пользователь), Город.
  Информация для заказа: Дать возможность выбрать тип оплаты (нал или безнал) и указать платёжные данные, адрес доставки.

Для оптовых покупателей добавить экспорт прайса в разных форматах.

• Избранные товары — возможность добавить товар в избрание, должна быть как у авторизированного так и нет пользователя.
  Если не авторизированный пользователь добавил товар в избранное, а потом залогинился, аналогичная ситуация с корзиной. Сама страница имеет вид схожий с каталогом.

• Связаться с нами — обычная форма с именем, моб тел, email и доп поле с информацией, гугл каптча.

• Регистрация и авторизация — При регистрации пользователь должен указать email, пароль и повторить пароль, решить гугл капчу и выбрать роль( оптовый или розничный). Так же, дать возможность регистрации и авторизации через Google или Facebook. При регистрации через обычную форму, требовать активировать аккаунт через почту.
  Авторизация должна быть или с помощью внешних ресурсов или через email и пароль. Так же, должна быть кнопка «Забыл пароль».

Интерфейс Администратора 

• Общая статистика магазина — отображать статистику пользователей, сколько всего пользователей, сколько новых за неделю, к этим пунктам отображать процентное соотношение оптовых и розничных покупателей. Так же, отображать общее количество посетителей за неделю\месяц\полгода. Отображать количество новых заказов, обработанных заказов за сегодня\вчера\недель\месяц с процентом розничных заказов\оптовых.

Отображать количество брошенных корзин за сегодня\вчера\недель\месяц.

Отображать количество товаров, которых нет в наличие с ссылкой на эти товары. Отображать топ пять самых популярных по просмотрам товаров.
Отображать топ пять самых популярных по продажам товаров.

Отображать количество ошибок на сайте..

Данные должны отображаться в виде числовых значений и графиков.

• Редактирование статических страниц — Дать возможность редактировать слайдер на главной, менять баннера, текст, ссылки.
  Дать возможность редактировать SEO на всех статических страницах. Дать возможность редактировать картинки, текст и заголовок на страницах О нас, Оплата и доставка.

• Каталог — Создание и редактирование категорий. Категории должны иметь возможность быть как родительскими так и дочерними. У категории есть, заглавие, описание, статус(вкл\выкл). SEO данные. Товар — Создание и редактирование товаров. Товар может принадлежать к нескольким категориям. У товара есть такие поля:

Название, Артикул, цена розничная, цена оптовая, характеристика(Блок состоит из названия и значения, при вводе характеристики, должны подставляться существующие характеристики, если такой нет, то нужно её добавить), количество, фото, доп фото, описание(редактор), статус(вкл\выкл), скидки,

подарки(подарком можно указать товары или текст), SEO поля, сопутствующие товары.

• Менеджмент — Раздел со списком запросов на обратную связь с указателем Обработан\В процессе\ В работе

Раздел Заказы, должна быть возможность фильтровать на оптовые\розница, по дате, по статусу (выполнен, в процессе, откланен). У каждого заказа должен быть статус и уникальных хеш индитификатор. При клике на заказ, можно увидеть всю информацию о заказе, пользователе.

Раздел пользователи, список пользователь с возможностью посмотреть всю информацию о пользователе, его корзине, заказах. Добавить возможность выкл\вкл учётной записи. На странице должны быть фильтры по имени, почте, номеру телефона, опт\розница, дата регистрации, дню рождения.

• Блог — стандартный, общепринятый блог. Создать, просмотреть, редактировать статью. Поля: заглавие, описание, картинка, SEO поля, вкл\выкл.

• Настройки магазина — дать возможность изменить Email s для оповещения о заказах и обратной связи. Дать возможность указать курсы валют, если не указанно, использовать АПИ минфина. Дать возможность создать админа и управлять существующими. Дать возможность почистить кэш.

• Email рассылки — создание, редактирование и удаление рассылок, возможность добавить товар в письмо.
  Редактирование всех статических Email рассылок.

• Для разработчика — дать возможность включить режим поддержки, то есть, отключить возможность регистрации и покупки, вывести всем пользователям соответствующие уведомление.
  Сделать вкладку с списком ошибок сайта.

Общая информация о данных в админке и пользовательской части

На каждой странице где присутствуют создание, просмотр, редактирование, удаление должна присутствовать: пагинация, групповые действия, сортировка, фильтр и валидацию.

Все списки в пользовательской части должны иметь по страничную разбивку.

Все данные что отправляет не авторезированный пользователь, должны быть с под гугл каптчи.

Все данные должны проходить валидацию.

Все данные и текста должны быть мултиязычны.

Валюта меняется в зависимости от языка или если валюту выбрать в ручную.

Большинство данных от пользователя, должны отправляться без перезагрузки страницы.