ТЗ на разработку сайта по продаже ковров - IQCarpet

Содержание

1. Описание проекта        3

2. Валидация        4

Имя  пользователя        4

Номер телефона        4

Email        4

Фото / лого магазина        5

3. Структура        5

4.  Главная        6

5. Каталог ковров        7

6. Карточка товара        9

7. Корзина        11

7.1. Оформление Заказа        12

8. Страница “О Проекте”        12

9 Контакты        13

10. Избранное        14

11. Текстовые страницы        14

12. Страница 404 ошибки        14

13. Уведомления на почту        15

Админку описываем более детально в следующем ТЗ        15

1. Описание проекта

  1. При разработке используются технологии
  1. любые стеки на усмотрение исполнителя, но по согласованию с заказчиком
  1. Домен - iqcarpet.com
  2. Язык сайта
  1. Основной - русский
  2. Дополнительный - английский, учесть, что потом будут дополнительные
  1. Страна - проект международного формата, поэтому используем библиотеку с кодами стран при вводе номера телефона
  2. Весь контент для сайта предоставляется заказчиком в электронном виде.
  3. После окончания работ Заказчик может самостоятельно вносить изменения (редактировать) содержимое сайта.
  4. По окончании работ Исполнитель обязуется предоставить полностью функционирующий сайт, исходные графические материалы по дизайну, все необходимые данные для доступа к системе управления сайтом (аккаунты, пароли и т.п.).

Дизайн

  1. Минимализм
  2. Дизайн современный, не восточный, без базаров, визирей, алладинов и т.д.
  3. Основной светлый фон, но можно некоторые блоки делать темным
  4. Весь акцент на ковры, ничего не должно от них отвлекать, например, интерьеры, фото людей и т.д.
  5. Нравится такой дизайн https://kover.ru 
  6. Нужно сделать логотип, изобразив IQCarpet (сохранение регистра букв)
  7. При дизайне плитки с коврами, страниц ковра сразу используйте фото реальных ковров отсюда:
  1. https://instagram.com/saeedcarpet12?utm_medium=copy_link
  2. https://instagram.com/isfahan_carpets?utm_medium=copy_link
  3. https://instagram.com/ahmad.carpet20?utm_medium=copy_link   

Требования к средствам просмотра Сайта

Сайт должен обеспечивать корректное отображение в 2x последних версиях, всех современных браузеров

  • Internet Explorer,
  •  Edge,
  •  Opera,
  •  Firefox,
  •  Chrome,
  • Safari.

ВАЖНО: В админке должны быть метаданные для каждого добавления:

Заголовок H1, Meta - title, Meta - description, Meta - keywords

Если есть картинка: Имя файла, Alt картинки, Title картинки

Адаптивность.

Корректность отображение на всех устройствах без горизонтального скрола.

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

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

Возможность с мобильного устройства зарегистрироваться

Основная задача - создание агрегатора для 2 пользователей (покупатель и продавец) для общего взаимодействия и дальнейшего сотрудничества

2. Валидация

Имя  пользователя

  1. Только буквы, пробелы, точки и дефис.
  2. Текстовое поле, не предполагает цифр или специальных символов.
  3. Минимальное количество символов - 1.
  4. Максимальное количество символов - 30 нижний/верхний/смешанный регистр.
  5. Не должно быть пробела вначале ввода и более 1 пробела подряд.
  6. Не должно быть дефиса вначале ввода и более 1 дефиса подряд.

Номер телефона

  1. Поле должно содержать только цифры.
  2. Устанавливаем международный формат номера
  1. Выбор кода страны с учетом выбранной страны в браузере
  2. Если отключена геолокация - то оставляем возможность самостоятельно выбрать
  1. Количество символов в номере -10 символов
  2. Проверяем на правильность ввода

Email

  1. Поле Еmail должно содержать английские буквы верхнего и нижнего регистра (a–z, A–Z). Цифры от 0 до 9.
  2. Поле обязательно должно содержать символ «@» перед которым должен находится хотя бы один символ, домен первого уровня.
  3. Поле может содержать символы
  4. Поле должно содержать точку в доменной части.
  5. В доменной части допустимо 2-63 символа после точки, например .ru или .americanexpress.
  6. Максимальная длина поля - 320 символов.
  7. Поле не может содержать пробелы.

Фото / лого магазина

  1. Максимальный размер файла - 10 мб
  2. Допустимые форматы - png, jpeg

3. Структура

  1.  Хедер - Верхнее меню сайта включает отображение разделов:
  1. Каталог ковров (Главная)
  2. О проекте
  3. Контакты
  4. Переключатель языков (RUS и ENG)
  1. Русский по умолчанию
  1. Выбор валюты (USD, EUR, RUB)
  1. USD по умолчанию
  1. Избранное
  1. Храниться в кеше 30 дней
  1. Корзина
  1. Храниться в кеше 30 дней
  1. Футер - дублирование страниц хедера
  1. Дублирование страниц сайта
  2. Политика конфиденциальности
  3. Пользовательское соглашение
  4. Минимальный узкий футер, функционал такой https://www.templatemonsterpreview.com/demo/68326.html 

  1. Соц сети – Facebook, Instagram, VK, LinkedIn, Telegram

Рассмотрим каждый из разделов сайта более подробно

4.  Главная

Включает отображение следующих блоков:

  1. Главный баннер
  1. Включает кнопку перехода в каталог “Выбрать ковер”
  1. Карусель товаров “Новинки”
  1. По нажатию на кнопку “Смотреть все” переход на страницу с товарами с бейджем “Новинка” идентично со страницей каталога
  2. Каждая превью карточка включает отображение
  1. фото товара
  2. бейдж товара
  3. название товара
  4. цена товара
  1. Может быть, отображение цены в таких форматах
  1. Стандартная цена
  2. Акционная
  1. Перечеркнутая старая цена
  2. Новая цена со скидкой
  1. Карусель баннеров
  1. банеры все кликабельные по нажатию
  2. могут включать кнопку перехода
  1. Карусель товаров “Распродажа”
  1. По нажатию на кнопку “Смотреть все” переход на страницу с товарами с бейджем “Скидка” идентично со страницей каталога
  2. Каждая превью карточка отображается идентично как в предыдущей карусели
  1. Карусель баннеров
  1. банеры все кликабельные по нажатию
  2. могут включать кнопку перехода
  1. Страны
  1. каждая превью карточка страны включает отображение
  1. Название страны
  2. Флаг страны
  3. Картинка страны
  4. При нажатии на карточку переход на каталог, в котором в фильтре выбранная соответсвующая страна и отображаются в результатах поиска товары по данной стране
  1. Стиль
  1. Каждая превью карточка включает отображение:
  1. Картинка стиля
  2. Название стиля
  3. Краткое описание стиля
  4. Кнопка “Подробнее”
  1. При нажатии на кнопку переход на каталог, в котором в фильтре выбран соответсвующий стиль и отображаются в результатах поиска товары по данному стилю

5. Каталог ковров

Станица включает следующие блоки:

  1. Заголовок
  2. Поиск ковров
  1. Применяется мультипоиск - при вводе первых символов в поле отображаются подходящие варианты
  2. Поиск предназначен, на случаи поиска продавца по названию по названию ковра, характеристикам ковра
  1. Количество ковров на сайте
  1. Изначально отображается общее количество
  2. Вывод количества ковров с учетом выбранных фильтров
  1. Отображаются только ковры в наличии
  1. Фильтр
  2. Сортировки
  1. по умолчанию
  2. сначала новые,
  3. сначала дешевые,
  4. сначала дорогие
  1. Список карточек ковров

Фильтр отображает следующие поля:

  1. Стиль  - чекбокс
  1. Восточный,
  2. современный,
  3. дизайнерский,
  4. винтажный
  5. может быть выбраны сразу несколько вариантов
  1. Узор  - чекбокс
  1. Графический,
  2. однотипный,
  3. флора,
  4. абстрактный,
  5. этнический
  6. может быть выбраны сразу несколько вариантов
  1. Материал - чекбокс
  1. шерсть,
  2. шелк,         
  3. джут
  4. может быть выбраны сразу несколько вариантов
  1. Размер
  1. Длина
  2. Ширина
  3. Возможностью прописать от и до
  4. Ползунок с возможностью выбора диапазона см
  5. Допустимая погрешность - можно выбрать сколько см допустимо + - (
  1. Выбор из сегмента селектора от 1 до 50 см
  1. По умолчанию выставлено значение минимальное и максимальное от поставщиков
  1. Форма  - чекбокс
  1. Прямоугольный,
  2. квадратный,
  3. круглый,
  4. овальный
  5. может быть выбраны сразу несколько вариантов
  1. Цвет  - чекбокс
  1. зеленый,
  2. красный,
  3. бежевый,
  4. мультиколор,
  5. светлый,
  6. темный
  7. может быть выбраны сразу несколько вариантов
  1. Стоимость  - чекбокс  - зависит от выбранной валюты на сайте
  1. до 40000 руб, (или до 500 долларов/евро)
  2. от 40000 до 120000, (или от 500 до 1500 долларов/евро)
  3. от 120000 до 180000, (или от 1500 до 2500 долларов/евро)
  4. от 180000  и больше (или от  2500 долларов/евро)
  5. указать точную цену:
  1. Возможностью прописать от и до
  2. Ползунок с возможностью выбора диапазона цен
  3. По умолчанию выставлено значение за минимальную цену и максимальную от поставщиков
  4. поля указания цены и выбора через ползунок  - связаны между собой
  1. Страна производства  - чекбокс
  1. Иран,
  2. Турция,
  3. Индия
  4. может быть выбраны сразу несколько вариантов
  1. Продавец
  1. Список названий продавцов, которых можно выбрать
  2. может быть выбраны сразу несколько вариантов
  1. Кнопка “Поиск” - производит поиск ковров по выбранным параметрам

ВАЖНО: все фильтры создаются через админку. Каждый фильтр - как справочник и его можно дополнять, редактировать, удалять, вкл/выкл

Все примененные фильтры отображаются в отдельном блоке в линию

Есть возможность удалить фильтр или “Сбросить фильтры” - производит сброс фильтров под начальные настройки

Список превью карточек ковров

Используем технологию Lazy loading - при скроле подгружает автоматически контент, как в фейсбуке.

Каждая превью карточка отображает:

  1. Фото ковра
  2. Название ковра
  3. Бейдж ковра
  1. Новинка
  1. Применяется для товаров добавленные по умолчанию за последние 14 дней
  2. Настройка бейджа производится через админку
  1. Скидка
  1. Автоматически применяется в случае применения Старой цены и новой цены
  1. Цена - может отображаться
  1. Стандартная цена
  2. Акционная цена
  1. Отображение старой цены и новой цены
  2. Старая цена перечеркнута
  1. Кнопка “Добавить в избранное”
  2. Кнопка “Добавить в корзину”
  1. при добавлении в корзину товара - должно смениться отображение кнопки на “В корзине”

При нажатии на превью - карточку - переход на страницу карточки товара

6. Карточка товара

Страница продавца включает отображение информации:

  1. Данные товара
  2. Карусель товаров “Похожие ковры”
  1. Ковры, которые максимально идентичны по характеристикам
  1. Карусель товаров “Просмотренные товары”
  1. Отображаются превью карточки товара, которые смотрел данный пользователь на сайте до этого

Данные товара отображают информацию:

  1. Фото
  1. Основное фото
  2. Карусель дополнительных фото под основным
  3. Может включать так же видео
  1. Кнопка “Добавить в избранное”
  2. Бейдж ковра
  1. Новинка
  1. Применяется для товаров добавленные по умолчанию за последние 14 дней
  2. Настройка бейджа производится через админку
  1. Скидка
  1. Автоматически применяется в случае применения Старой цены и новой цены
  1. Название ковра
  2. Продавец
  3. Артикул
  1. Автоматически формируется на стороне бек енд
  1. Город и страну нахождения ковра
  2. Страна производства
  3. Характеристики ковров, которые изготовляет компания
  1. Все характеристики добавляются через справочки админки
  2. Могут быть следующими:
  1. Стиль  
  1. Восточный,
  2. современный,
  3. дизайнерский,
  4. винтажный
  5. может быть выбраны сразу несколько вариантов
  1. Узор
  1. Графический,
  2. однотипный,
  3. флора,
  4. абстрактный,
  5. этнический
  6. может быть выбраны сразу несколько вариантов
  1. Материал
  1. шерсть,
  2. шелк,         
  3. джут
  4. может быть выбраны сразу несколько вариантов
  1. Размер
  1. Длина
  2. Ширина
  1. Форма  - чекбокс
  1. Прямоугольный,
  2. квадратный,
  3. круглый,
  4. овальный
  5. может быть выбраны сразу несколько вариантов - так как производитель может делать в разных формах
  1. Цвет  
  1. зеленый,
  2. красный,
  3. бежевый,
  4. мультиколор,
  5. светлый,
  6. темный
  7. может быть выбраны сразу несколько вариантов
  1. Стоимость
  1. Цена - может отображаться
  1. Стандартная цена
  2. Акционная цена
  1. Отображение старой цены и новой цены
  2. Старая цена перечеркнута
  3. При указании данной цены - автоматически прикрепляется бейдж “Скидка”
  1. Валюта отображается в зависимости от той что выбрана в  хедере
  1. Кнопка “Добавить в корзину”
  1. при добавлении в корзину товара - должно смениться отображение кнопки на “В корзине”
  2. Отправляет ковер в корзину

7. Корзина

В корзину добавляются все желаемые ковры

Корзина отображает данные

  1. Список добавленных ковров
  1. При нажатии на карточку - можно перейти на страницу ковра
  2. Превью карточки ковров включают отображение
  1. Фото
  2. Название
  3. Цена
  1. может быть 2 цены, перечеркнутая и новая - учесть в дизайне
  1. Количество мы не выбираем - нет таких кнопок - так как каждый ковер - уникальный, повторы не возможны
  2. Кнопка “Удалить” удаляет из корзины товар
  1. Общая сумма заказа
  2. Кнопка “Оформить”
  1. открывает экран оформления заказа

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

На экране оформления отображается форма с полями:

  1. ФИО покупателя
  2. Номер телефона покупателя  
  3. Почта покупателя  
  4. Адрес доставки
  1. Способ доставки обсуждается напрямую с заказчиком
  1. Комментарий
  2. Кнопка “Отправить”
  1. Все поля кроме комментария обязательные
  2. После отправки вывести окно успешной отправки заказа
  3. Данный заказ автоматически приходит письмом покупателю со всеми данными по заказу
  4. Автоматически заказ дублируется на почты указанные в админке со всеми данными по заказу
  5. В Админке появляется новый заказ

 8. Страница “О Проекте”

Информацию проработать не только текстово, но с применением иконок, графики - чтоб это не было полотном текста

Контент данной страницы будет следующим:

  1. Заголовок

IQCarpet - Маркетплейс ковров ручной работы

  1. Преимущества ковров
  1. Иконка
  2. Текст

Ковры ручные vs машинные

мягкие и приятные на ощупь

экологически чистые

поглощают влагу, но  при этом остаются сухими, что делает их идеальным естественным осушителем

сопротивляются сжатию и не мнутся

обладают грязеотталкивающим свойствами

хорошо сохраняют цвет

обладают большей долговечностью

  1. Блок призыва к действию
  1. Текст
  2. Кнопка “Перейти в каталог”

Решение IQCarpet - купить ковер прямо у производителя

  1. Как это работает

Как это работает:

1. Покупатель выбирает ковер и отправляет заявку, в которой указаны детали покупки и место доставки;

2. Мы проверяем наличие ковра у продавца, уточняем стоимость доставки и иных дополнительных платежей;

3. Мы заключаем с покупателем договор, принимаем оплату от покупателя и производим оплату продавцу;

4. Продавец отправляет напрямую ковер покупателю транспортной компанией или по почте.

  1. Плюсы для покупателя

Плюсы для покупателя:

- Стоимость ковра ниже на 50-60%, так как убирается длинная цепочка посредников;

- Гарантия подлинности, потому что ковёр с иранской фабрики не может быть китайской подделкой;

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

9 Контакты

Данная страница включает отображение формы обратной связи с полями

  1. Имя
  2. Email
  3. Телефон
  4. Комментарий или сообщение
  5. Кнопка “Прикрепить” - возможность прикрепить несколько файлов фото
  6. Капча - reCAPTCHA
  7. Кнопка “Отправить”
  8. Все поля обязательны заполнению кроме прикрепления файла

10. Избранное

Раздел избранное создан для пользователя, чтоб сохранять понравившиеся товары

Данные в Избранном хранятся в кеше 30 дней

Попадая в данный раздел - отображается список товаров в избранном.
Каждый товар включает отображение:

  1. Название товара
  2. Фото
  3. бейджи
  4. Цена за товар
  1. может быть 2 цены, перечеркнутая и новая - учесть в дизайне
  1. Кнопка “В избранном”
  1. если нажать на кнопку еще раз, автоматически снимается отметка у товара
  1. Кнопка  “В корзину”

При нажатии на товар  открывается страница открытого товара - описание доступно выше в разделах

11. Текстовые страницы

Текстовые страницы на сайте:

  1. Политика конфиденциальности
  2. Пользовательское соглашение

Каждая текстовая страница включает:

  1. Заголовок
  2. Текст страницы
  1. В админке добавить текстарий с форматированием
  1. Поля наполняются с админки

12. Страница 404 ошибки

 Данная страница появляется на сайте, в случае если произошел сбой на сервере

Нужно учесть критерии для данной страницы:

  1. Должна содержать кнопку “На главную”
  2. В дизайне отрисовать под фирменный стиль проекта

13. Уведомления на почту

Уведомления могут отправляться на почту по таким действиям:

Нам на указанные почты в админке

  1. При получении нового заказа

Покупателям

  1. При отправке заказа
  2. При изменении статуса заказа
  1. На каждый статус заказа
  1. Новый
  2. В работе
  3. В пути
  4. Доставлен
  5. Отменен

Админку описываем более детально в следующем ТЗ

Касательно админки. Надо, чтобы админка стала неким прообразом CRM, т.е. через нее мы могли внести / корректировать / удалять / искать не только характеристики ковра, но и самого продавца  (его название, телефон, сайт, ссылки на соцсети, какой-то комментарий). И связь продавца и принадлежащих ему ковров.