Дизайн интернет магазина cms majento

Ниже ТЗ для разработки, на базе которой нужно разработать дизайн -

Главная

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

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

Логотип должен быть выполнен в виде анимации. Номер телефона должен привлекать внимание, наравне с иконкой он-лайн чата (способы связаться для консультации). Чуть сбоку, или ниже, выводить график работы (в какое время можно получить консультацию менеджера).  Социальные сети - ссылка на группу в инстаграме. Выбор языка - русский (по-умолчанию) и украинский.Иконка личного кабинета, визуально должно отображаться состояние, авторизованного и неавторизованного пользователя. Корзина, иконка с визуализацией количества товаров в корзине. 

Меню каталогаМеню должно быть вертикальным и содержать не более 14-16 основных категорий (так чтобы помещались на основном экране, проработать на уровне дизайна и управления). При наведении курсора на категорию выводить выпадающее окно справа с списком подкатегорий. Меню должно управляться из админ-панели, при создании меню указывается:

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

Каждый пункт меню можно отредактировать или удалить. 

ПоискПри вводе нескольких символов выводить выпадающее окно с возможными вариантами поиска. Поиск предоставить возможность совершать по названию товара, id, характеристике. При вводе поисковой фразы и нажатию ентера открывать страницу с поисковой выдачей. Страница поисковой выдачи должна содержать фильтр по категориям (горизонтальный, как и в категории) и в основной части карточки товаров, удовлетворяющим поисковой фразе. 

СлайдерУправляется из админ-панели, каждый слайд состоит:

• Название, он же Title, отображается при наведении курсора на изображение на сайте (рус и укр)
• изображение (рус и укр)
• тип ссылки (категория, промо-страница, ручная ссылка)
• собственно поле для указания сущности
• открывать в новой вкладке (чек бокс)

Все поля обязательны для заполнения. В админ-панели выводить список слайдов в виде таблицы с следующими колонками:

• id
• название
• ссылка
• сортировка (согласовать, или ручное управление или перетаскиванием)
• действие (отредактировать/удалить)

На главной странице изображения выводить в соответствии с заданной сортировкой, пролистывание автоматически (8-10 сек), зацикленное. 

Управление ГлавнойНа главной выводить блоки:

• Бренды
• Новинки
• Рекомендации

В админ-панели реализовать возможность управлять содержимым данных блоков.Для брендов:

• Название
• Изображение
• Ссылка

Для блоков Новинки и Рекомендации:

• товары
• ссылка

Товары необходима возможность выбирать по названию или id. Ссылка необходима для отображения кнопки “Посмотреть еще”.  На главной выводить в ограниченном количестве товары (в соответствии с дизайном). В случае если у админ-панели указано больше товаров чем возможно вывести, отображать их в рандомном порядке. при обновлении страницы.  

Интеграция с ИнстаграмомНа главной странице сайта выводить блок с последними 6-и публикациями в группе инстаграма. Для этого необходимо реализовать интеграцию с инстаграмом. 

ПодпискаБлок с возможностью указать:

• имя
• email

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

ФутерВ подвале выводить ссылки на разделы сайта,социальные сети и контакты. Ссылки на разделы выводить в виде 2-3 колонок (согласовать на этапе дизайна) и управляться должны из админ-панели. При создании указывается:

• Название раздела (рус и укр)
• ссылка на раздел (uri, без домена, ссылки будут на статические страницы)

Должна быть возможность отредактировать или удалить. 

Каталог

Управление деревом категорийНеобходима возможность управлять деревом категорий, каждая категория содержит:

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

Каждую категорию можно отредактировать или удалить. На сайте, при наведении курсора на изображение товара, оно должно меняться на следующее по сортировке. 

Управление атрибутами и значениямиРеализовать возможность создать для каждой категории набор атрибутов с значениями. При создании атрибута указывается:

• категория
• активный (чек-бокс)
• название (рус и укр)
• сортировка

Для каждого атрибута предоставить возможность указать возможные значения:

• название (рус и укр)
• сортировка

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

• id
• Название
• сортировка
• действие (просмотреть значения атрибутов, отредактировать, удалить)

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

ЛогистикаВ админ-панели необходимо разработать раздел по заведению и учету товаров. 

Склады.Отдельный раздел (условно), в котором задается название склада, город.

Прием товара.При получении нового товара необходимо создать Прием товара, при этом указывается:

• Склад
  • Категория (из списка категорий, обдумать дефолтную категорию на которую будут изначально присваиваться все товары)
  • Название (поиск по названию или id, если нет - указать вручную)
  • количество
  • штрих код (проработать логику сканирования, to do)

В одном документе возможно указать множество позиций товаров. 

В данном документе должна автоматически проставляться дата создания, ФИО сотрудника (кто создавал). Документу Приема присваивать уникальный идентификатор. Отдельный раздел, в котором можно просмотреть список документов Приема товаров, отфильтровать по:

• периоду создания
• ФИО сотрудника
• поиск по номеру документа Приема.

Остатки товараВ отдельном разделе предоставить возможность отфильтровать товары по:

• склад
• категория
• товар
• диапазон остатка (от и до)

В табличной части выводить:

• id товара
• название товара
• категория
• последний документ приемки
• остаток
• склад

ТоварУправление товарамиТовары, которые только были созданы при Приеме выводить в разделе Новые товары, с возможностью отфильтровать по Категории, периоду создания (документ Приема) или поиск по названию. Обработанные менеджером товары должны выводиться в разделе Карточки товаров, в котором также присутствует фильтр по Категории, поиск по названию, опубликована. Карточка товара содержит:

• Название (рус и укр)
• Категорию
• Опубликована (чек бокс)
• изображение (галерея, загрузка одного или множества изображений за раз и установка их порядка сортировки)
• Атрибуты (выводить перечень атрибутов категории товаров, с возможностью указать значение из списка или добавить новое)
• Цены
  • основная
  • старая
• Описание, рус и укр (текстовый редактор с возможностью добавлять изображения, видео)

Статусы товаровДля всех товаров, в зависимости от остатков товаров необходимо выводить статусы на карточке товара на сайте. Предоставить возможность настроить правила для всех товаров на сайте для следующих статусов:

• Есть в наличии  (кнопка Купить)
• Количество ограничено (кнопка Купить)
• Предзаказ (кнопка Предзаказ, механика такая же как и для купить)

Т.е. должна быть возможность указать условия вида,  для статуса Есть в наличии если больше 10 шт, для Количество ограничено меньше или равно 9, Предзаказ если 0 шт. 

УпаковкаНа карточке товара выводить блок Упаковка с несколькими возможными вариантами упаковки:

• Подарочная упаковка
• Упаковка Инкогнито.

Это будут товары, которые необходимо будет добавлять в корзину вместе с основным товаром. 

Cross товарыНа странице товара выводить блок с Cross товарами. Управление содержимым данного блока должно управляться из админ-панели следующим образом:

• выбираем категорию товаров
• указываем диапазон цен (например стоимость товара от 1000 грн до 500 грн)
• выбираем категорию товаров
• указываем диапазон цен.

таким образом создаем две группы взаимосвязанных товаров. При переходе на товар из одной выборке, рандомно, выводить 10-ть товаров из другой выборки (и обратно). 

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

• От кого (если пользователь авторизован, по-умолчанию подставлять ФИО с возможностью отредактировать)
• Комментарий
• Оценка в звездочках (1-5)

Отзывы сразу публиковать на сайте. В админ-панели в разделе Отзывы выводить список всех отзывов в табличной части:

• дата отзыва
• наименование товара
• количество звездочек
• первые 50 символов сообщения. При клике на которое выводить полный текст сообщение (поп-ап или в отдельной вкладке весь комментарий)
• имя пользователя (которое он указал в форме)

Предоставить возможность удалить комментарий (soft удаление)Необходима возможность отфильтровать все отзывы по:

• периоду
• Категории товаров
• Конкретному товару
• Количеству звездочек.

БлогСодержит статьи/новости, управляется из админ-панели и содержит:

• название (рус и укр)
• рубрика (обсудить)
• опубликовать (чек бокс)
• изображение (рус и укр)
• краткое описание (рус и укр)
• описание (рус и укр)

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

Статические страницыРаздел должен содержать список страниц, каждая страница состоит из:

• Названия (рус и укр)
• uri (создается из названия, можно отредактировать)
• Описание (текстовый редактор с возможностью добавить изображение, видео, iframe)

Предоставить возможность отредактировать или удалить. Необходим поиск по названию. 

Промо страницыПредоставить возможность создавать страницы с выборками товаров. Каждая страница содержит:

• название (рус и укр)
• uri (генерировать автоматически, предоставить возможность отредактировать)
• описание (рук и укр)
• список товаров (добавление по названию или id)
• seo текст

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

Авторизация/регистрацияПри регистрации пользователь заполняет поля:

• ФИО (все символы укр и рус, латиница запрещена, учесть символы -,’)
• номер телефона (в формате XXXYYYYYYY, валидация)
• емейл (валидация)
• пароль (не менее 6-и символов)
• повторение пароля

Рядом с полями для ввода выводить подсказки с требованиями к валидации. После регистрации авторизовывать пользователя на сайте. Авторизация возможна по номеру телефона или емейлу с указанием пароля.Реализовать возможность восстановления пароля по почте. В админ-панели предоставить возможность в отдельном разделе “Клиенты” просмотреть информацию по всем зарегистрированным пользователям с возможностью отфильтровать по периоду регистрации (описано ниже)

Личный кабинетВыводить разделы:

• Профиль
• Заказы

В профиле:

• ФИО (с возможностью редактировать)
• Номер телефона (запретить редактирование)
• Email (запретить редактирование)
• Смена пароля
  • Текущий пароль
  • Новый пароль
  • Подтверждение пароля

Заказы выводить в виде списка с данными:

• Номер заказа
• Способ доставки, адрес/отделение
• Способ оплаты
• Статус заказа
• Состав заказа
  • Название товара
  • количество
  • цена
  • Итого

В случае, если по заказу Ожидается оплата, выводить кнопку Оплатить, с соответствующим действием (например, переход на страницу Liqpay)

Пользователи

Роли в админ-панелиПредоставить возможность создать разные роли для доступа в админ-панель сайта путем указания какие разделы должны быть доступны. Для каждой существующей роли предоставить возможность указать (удалить) одного или нескольких пользователей (зарегистрированных на сайте) т.е. присвоить ему данную роль. 

Управление пользователямиВ админ-панели выводить список зарегистрированных пользователей. Табличная часть должна содержать все данные пользователя, указанные при регистрации. Необходима возможность фильтрации по Периоду регистрации, поиск по номеру телефона или email.  

Оформление заказа

Оформление заказаЕсли пользователь авторизован, автоматически подставлять его данные в форму. Если не авторизован, предоставить возможность авторизоваться или заполнить поля:

• ФИО *обязательно
• номер телефона *обязательно
• email * необязательно

правила валидации аналогичны как и при регистрации.Также при оформлении заказа обязательны для заполнения следующие поля:

• Город (с справочника Укрпочты)
• Способ доставки
  • отделение (для НП и Укрпочты)
  • выбор адреса (для курьерской от НП) и поле для указания номера дома/квартиры
• Способ оплаты
• Промо-код
• Комментарий к заказу (необязательно)

Возможные способы доставки:

• Новая Почта
• Укрпочта
• Курьером Новой почты

Возможные способы оплаты:

• Liqpay
• Apple pay
• Наложенный платеж

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

Обработка заказовВ админ-панели реализовать раздел Заказы. В данном разделе выводить список всех заказов в виде таблицы  с колонками:

• id заказа
• Дата создания заказа
• ФИО клиента
• Номер телефона клиента
• Состав заказа (список наименований)
• Общая стоимость заказа
• Статус заказа
• Действие (если за заказом не закреплен менеджер то “взять в работу”, если закреплен - “просмотреть”)

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

• Период создания заказа (от и до, по-умолчанию текущий день)
• Статус заказа
• Способ доставки
• Способ оплаты
• ФИО менеджера
• Поиск по номеру заказа

При переходе на страницу конкретного заказа выводить следующую информацию:

• id заказа
• Дата создания заказа
• ФИО клиента
• Номер телефона клиента
• email
• Состав заказа
  • id товара
  • Название
  • количество
  • цена
• Общая стоимость заказа
• Статус заказа текущий
  • детализация смены статусов и кто менял статус (ФИО менеджера или синхронизация статуса от НП/Укрпочты)
• ФИО менеджера, который занимается заказом (первоначально взял его в обработку)

Статусы заказа:

• При создании заказа по-умолчанию присваивать статус “В ожидании обработки”
• Когда заказ Берет в работу менеджер, данный заказ закрепляется за ним, и переходит в статус “Обрабатывается”
• Если заказ оплачен (захолдированы средства) с помощью Liqpay статус заказа устанавливать “Подтверждение оплаты”.  Если заказ с способом оплаты Liqpay, при этом возникла ошибка оплаты (нет холдирования средств по какой либо причине), выводить статус “Ожидает оплаты”. Если оплата  с помощью Apple Pay (деньги зачислены), выводить статус “Оплачено”. Если статус Подтверждение оплаты (т.е. деньги захолдированы) менеджер вручную может поменять статус на Оплачено (после того как вручную подтвердит холд в ЛК Liqpay)
• Если у заказа установлена оплата Наложенным платежем, или статус заказа Оплачен, выводить кнопку “Отправить заказ на доставку” (создание  заказа в НП или Укрпочте).
• Далее смена статусов происходит автоматически от службы доставки.

Аналитика по продажамДанный раздел должен предоставлять возможность анализировать:

• остатки товаров
• продажи товаров
• движение заказов по статусам

Первоначально давать возможность выбирать Тип отчета:

• Продажи товаров
• Движение товаров по статусам

Продажи товаров:

• Категория
• Конкретный товар (поиск по названию или id)
• Период (от и до)

Если выбрана категория, выводить в виде графика изменение остатков по категории в виде двух показателей - приход товара  и продажа товара. Также под графиком выводить общее количество поступлений товаров, сколько товаров в резерве (не доставлено клиентам) и продано (заказы уже доставлены, согласно конечным статусам от НП и Укрпочты). Если выбран конкретный товар, такая же статистика по нему.

Движение товара по статусам:

• Период (от и до)
• ФИО менеджера

Если менеджер не указан, выводить в виде уровневой диаграммы (горизонтальной), сколько времени в среднем заказы проводят в том или ином статусе. Если указан менеджер, только заказы данного менеджера. Под диаграммой выводить количество заказов принявших участие в построении диаграммы, количество заказов по статусам на данный момент. 

Интеграция с Новой почтойНеобходимо интегрировать синхронизацию следующих данных:

• городов
• отделений
• адресов для курьерской доставки
• выгрузка заказов в НП
• синхронизация статусов заказов

Интеграция с УкрпочтойНеобходимо интегрировать синхронизацию следующих данных:

• городов
• отделений
• выгрузка заказов
• синхронизация статусов заказов

Интеграция с LiqpayПри выборе оплаты liqpay и подтверждении заказа клиенту выводить сразу страницу оплаты  liqpay. При успешной оплате холдировать денежные средства на счету клиента. Возврат или снятие будет производиться через личный кабинет Liqpay (зона роста, реализовать в дальнейшем в админ-панели).

Интеграция с Apple PayПредоставить возможность оплачивать с помощью Apple Pay при выборе данного способа оплаты. Т.е. после подтверждения клиентом заказа вызывать приложение с подтверждением оплаты. 

Чат-он-лайнИнтегрировать на сайт виджет он-лайн чата с возможностью отправки сообщений в телеграмм. Предпочтений конкретных нет, необходимо рассмотреть варианты. 

Триггерные рассылки смс и emailНеобходима будет интеграция с внешними системами для отправки уведомлений клиентам. (infobip, esputnik)В данном разделе необходима возможность:

• Создать шаблоны для sms
• Создать шаблоны для email
• Выборки для рассылки
• Создать триггер

Шаблон sms состоит из:

• Названия (для внутренней идентификации)
• текст уведомления (ограничения по количеству символов)

Шаблон email состоит из:

• Заголовок письма
• Текст (текстовый редактор с возможностью добавлять изображения, html)

Создание выборки пользователей:

• Название (для внутренней идентификации)
• Тип - Подписчики/Пользователи/Покупатели (селект)
• Период (когда подписались/зарегистрировались/совершали покупку)
• если выбран тип Покупатели, предоставлять возможность выбрать Категорию товаров

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

• Название  (для внутренней идентификации)
• Шаблон (sms/email)
• Выборка
• Дату и время запуска.

Хлебные крошкиНа всех страницах, кроме главной, выводить хлебные крошки. Они должны быть кликабельны и переводить на выбранную страницу. 

SEOНеобходима возможность управлять meta данными для страниц сайта. Разработать функционал, с помощью которого, можно создать шаблон для сущностей сайта (Главная, Категория, страница Товара, Промо-страницы, Статические страницы, Чек-аут, Личный кабинет), а также указав настройки SEO для каждой отдельной страницы. Поля для управления:

• title
• h1
• description
• Keywords
• Seo текст
• og:title
• og:image
• og:description

МультиязычностьНа данный момент будет два языка сайта, русский и украинский. Все сущности (категории, товары, промо-страницы и т.д.) должна быть возможность перевести. Помимо контента, управляемого с админ-панели, должна быть возможность в отдельном разделе переводить названия кнопок, заголовки и т.д. Разработать функционал с помощью которого в админ-панели будет возможность указать украинский перевод

Страница 18+При первом входе на сайт необходимо по умолчанию выводить страницу с вопросом “Вам есть 18 лет?” и кнопками “Да” и “Нет”. Если пользователь выбирает “Да”, отображать контент страницы, по которой он перешел. Если выбрал “Нет” выводить сообщение “Извините, сайт содержит контент запрещенный к ознакомлению лицам младше 18 лет” 

Промо-кодыПредоставить возможность создавать промо-коды в виде набора букв и цифр и настраивать для них условия использования следующим образом:

• Основное устройство:
  • Категория товаров
  • Конкретный товар
  • условия скидки: фиксированная сумма или процент от стоимости
• Дополнительный товар:
  • Категория товаров
  • Конкретный товар
  • условия скидки:  фиксированная сумма или процент от стоимости
• Период действия (от и до) с датой и временем

При использовании данного кода на странице чек-аута применять промокод в соответствии с указанными условиями и пересчитывать корзину/добавлять дополнительные товары. Применение промокода возможность только на один товар (основной) и один раз. В админ-панели выводить информацию о промокодах в следующем виде:

• Дата создания
• Условия для основного товара (категория/товар/условия скидки)
• Условия для дополнительного товара (категория/товар/условия скидки)
• период действия
• статус активен (Да/Нет)
• количество раз использования

Необходима возможность отфильтровать по активности.

Поп-ап окнаНеобходима возможность создавать поп-ап окна, указывая:

• html верстку
• период активности
• Условия отображения:
  • На каких страницах выводить (Главная, Категории, Товар и т.д.)
  • Через какое время отображать

Выводить поп-ап по заданным условиям на сайте.