ТЗ на разработку сайта по продаже ковров - 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. Описание проекта
- При разработке используются технологии
- любые стеки на усмотрение исполнителя, но по согласованию с заказчиком
- Домен - iqcarpet.com
- Язык сайта
- Основной - русский
- Дополнительный - английский, учесть, что потом будут дополнительные
- Страна - проект международного формата, поэтому используем библиотеку с кодами стран при вводе номера телефона
- Весь контент для сайта предоставляется заказчиком в электронном виде.
- После окончания работ Заказчик может самостоятельно вносить изменения (редактировать) содержимое сайта.
- По окончании работ Исполнитель обязуется предоставить полностью функционирующий сайт, исходные графические материалы по дизайну, все необходимые данные для доступа к системе управления сайтом (аккаунты, пароли и т.п.).
Дизайн
- Минимализм
- Дизайн современный, не восточный, без базаров, визирей, алладинов и т.д.
- Основной светлый фон, но можно некоторые блоки делать темным
- Весь акцент на ковры, ничего не должно от них отвлекать, например, интерьеры, фото людей и т.д.
- Нравится такой дизайн https://kover.ru
- Нужно сделать логотип, изобразив IQCarpet (сохранение регистра букв)
- При дизайне плитки с коврами, страниц ковра сразу используйте фото реальных ковров отсюда:
- https://instagram.com/saeedcarpet12?utm_medium=copy_link
- https://instagram.com/isfahan_carpets?utm_medium=copy_link
- 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.
- Максимальное количество символов - 30 нижний/верхний/смешанный регистр.
- Не должно быть пробела вначале ввода и более 1 пробела подряд.
- Не должно быть дефиса вначале ввода и более 1 дефиса подряд.
Номер телефона
- Поле должно содержать только цифры.
- Устанавливаем международный формат номера
- Выбор кода страны с учетом выбранной страны в браузере
- Если отключена геолокация - то оставляем возможность самостоятельно выбрать
- Количество символов в номере -10 символов
- Проверяем на правильность ввода
Email
- Поле Еmail должно содержать английские буквы верхнего и нижнего регистра (a–z, A–Z). Цифры от 0 до 9.
- Поле обязательно должно содержать символ «@» перед которым должен находится хотя бы один символ, домен первого уровня.
- Поле может содержать символы
- Поле должно содержать точку в доменной части.
- В доменной части допустимо 2-63 символа после точки, например .ru или .americanexpress.
- Максимальная длина поля - 320 символов.
- Поле не может содержать пробелы.
Фото / лого магазина
- Максимальный размер файла - 10 мб
- Допустимые форматы - png, jpeg
3. Структура
- Хедер - Верхнее меню сайта включает отображение разделов:
- Каталог ковров (Главная)
- О проекте
- Контакты
- Переключатель языков (RUS и ENG)
- Русский по умолчанию
- Выбор валюты (USD, EUR, RUB)
- USD по умолчанию
- Избранное
- Храниться в кеше 30 дней
- Корзина
- Храниться в кеше 30 дней
- Футер - дублирование страниц хедера
- Дублирование страниц сайта
- Политика конфиденциальности
- Пользовательское соглашение
- Минимальный узкий футер, функционал такой https://www.templatemonsterpreview.com/demo/68326.html
- Соц сети – Facebook, Instagram, VK, LinkedIn, Telegram
Рассмотрим каждый из разделов сайта более подробно
4. Главная
Включает отображение следующих блоков:
- Главный баннер
- Включает кнопку перехода в каталог “Выбрать ковер”
- Карусель товаров “Новинки”
- По нажатию на кнопку “Смотреть все” переход на страницу с товарами с бейджем “Новинка” идентично со страницей каталога
- Каждая превью карточка включает отображение
- фото товара
- бейдж товара
- название товара
- цена товара
- Может быть, отображение цены в таких форматах
- Стандартная цена
- Акционная
- Перечеркнутая старая цена
- Новая цена со скидкой
- Карусель баннеров
- банеры все кликабельные по нажатию
- могут включать кнопку перехода
- Карусель товаров “Распродажа”
- По нажатию на кнопку “Смотреть все” переход на страницу с товарами с бейджем “Скидка” идентично со страницей каталога
- Каждая превью карточка отображается идентично как в предыдущей карусели
- Карусель баннеров
- банеры все кликабельные по нажатию
- могут включать кнопку перехода
- Страны
- каждая превью карточка страны включает отображение
- Название страны
- Флаг страны
- Картинка страны
- При нажатии на карточку переход на каталог, в котором в фильтре выбранная соответсвующая страна и отображаются в результатах поиска товары по данной стране
- Стиль
- Каждая превью карточка включает отображение:
- Картинка стиля
- Название стиля
- Краткое описание стиля
- Кнопка “Подробнее”
- При нажатии на кнопку переход на каталог, в котором в фильтре выбран соответсвующий стиль и отображаются в результатах поиска товары по данному стилю
5. Каталог ковров
Станица включает следующие блоки:
- Заголовок
- Поиск ковров
- Применяется мультипоиск - при вводе первых символов в поле отображаются подходящие варианты
- Поиск предназначен, на случаи поиска продавца по названию по названию ковра, характеристикам ковра
- Количество ковров на сайте
- Изначально отображается общее количество
- Вывод количества ковров с учетом выбранных фильтров
- Отображаются только ковры в наличии
- Фильтр
- Сортировки
- по умолчанию
- сначала новые,
- сначала дешевые,
- сначала дорогие
- Список карточек ковров
Фильтр отображает следующие поля:
- Стиль - чекбокс
- Восточный,
- современный,
- дизайнерский,
- винтажный
- может быть выбраны сразу несколько вариантов
- Узор - чекбокс
- Графический,
- однотипный,
- флора,
- абстрактный,
- этнический
- может быть выбраны сразу несколько вариантов
- Материал - чекбокс
- шерсть,
- шелк,
- джут
- может быть выбраны сразу несколько вариантов
- Размер
- Длина
- Ширина
- Возможностью прописать от и до
- Ползунок с возможностью выбора диапазона см
- Допустимая погрешность - можно выбрать сколько см допустимо + - (
- Выбор из сегмента селектора от 1 до 50 см
- По умолчанию выставлено значение минимальное и максимальное от поставщиков
- Форма - чекбокс
- Прямоугольный,
- квадратный,
- круглый,
- овальный
- может быть выбраны сразу несколько вариантов
- Цвет - чекбокс
- зеленый,
- красный,
- бежевый,
- мультиколор,
- светлый,
- темный
- может быть выбраны сразу несколько вариантов
- Стоимость - чекбокс - зависит от выбранной валюты на сайте
- до 40000 руб, (или до 500 долларов/евро)
- от 40000 до 120000, (или от 500 до 1500 долларов/евро)
- от 120000 до 180000, (или от 1500 до 2500 долларов/евро)
- от 180000 и больше (или от 2500 долларов/евро)
- указать точную цену:
- Возможностью прописать от и до
- Ползунок с возможностью выбора диапазона цен
- По умолчанию выставлено значение за минимальную цену и максимальную от поставщиков
- поля указания цены и выбора через ползунок - связаны между собой
- Страна производства - чекбокс
- Иран,
- Турция,
- Индия
- может быть выбраны сразу несколько вариантов
- Продавец
- Список названий продавцов, которых можно выбрать
- может быть выбраны сразу несколько вариантов
- Кнопка “Поиск” - производит поиск ковров по выбранным параметрам
ВАЖНО: все фильтры создаются через админку. Каждый фильтр - как справочник и его можно дополнять, редактировать, удалять, вкл/выкл
Все примененные фильтры отображаются в отдельном блоке в линию
Есть возможность удалить фильтр или “Сбросить фильтры” - производит сброс фильтров под начальные настройки
Список превью карточек ковров
Используем технологию Lazy loading - при скроле подгружает автоматически контент, как в фейсбуке.
Каждая превью карточка отображает:
- Фото ковра
- Название ковра
- Бейдж ковра
- Новинка
- Применяется для товаров добавленные по умолчанию за последние 14 дней
- Настройка бейджа производится через админку
- Скидка
- Автоматически применяется в случае применения Старой цены и новой цены
- Цена - может отображаться
- Стандартная цена
- Акционная цена
- Отображение старой цены и новой цены
- Старая цена перечеркнута
- Кнопка “Добавить в избранное”
- Кнопка “Добавить в корзину”
- при добавлении в корзину товара - должно смениться отображение кнопки на “В корзине”
При нажатии на превью - карточку - переход на страницу карточки товара
6. Карточка товара
Страница продавца включает отображение информации:
- Данные товара
- Карусель товаров “Похожие ковры”
- Ковры, которые максимально идентичны по характеристикам
- Карусель товаров “Просмотренные товары”
- Отображаются превью карточки товара, которые смотрел данный пользователь на сайте до этого
Данные товара отображают информацию:
- Фото
- Основное фото
- Карусель дополнительных фото под основным
- Может включать так же видео
- Кнопка “Добавить в избранное”
- Бейдж ковра
- Новинка
- Применяется для товаров добавленные по умолчанию за последние 14 дней
- Настройка бейджа производится через админку
- Скидка
- Автоматически применяется в случае применения Старой цены и новой цены
- Название ковра
- Продавец
- Артикул
- Автоматически формируется на стороне бек енд
- Город и страну нахождения ковра
- Страна производства
- Характеристики ковров, которые изготовляет компания
- Все характеристики добавляются через справочки админки
- Могут быть следующими:
- Стиль
- Восточный,
- современный,
- дизайнерский,
- винтажный
- может быть выбраны сразу несколько вариантов
- Узор
- Графический,
- однотипный,
- флора,
- абстрактный,
- этнический
- может быть выбраны сразу несколько вариантов
- Материал
- шерсть,
- шелк,
- джут
- может быть выбраны сразу несколько вариантов
- Размер
- Длина
- Ширина
- Форма - чекбокс
- Прямоугольный,
- квадратный,
- круглый,
- овальный
- может быть выбраны сразу несколько вариантов - так как производитель может делать в разных формах
- Цвет
- зеленый,
- красный,
- бежевый,
- мультиколор,
- светлый,
- темный
- может быть выбраны сразу несколько вариантов
- Стоимость
- Цена - может отображаться
- Стандартная цена
- Акционная цена
- Отображение старой цены и новой цены
- Старая цена перечеркнута
- При указании данной цены - автоматически прикрепляется бейдж “Скидка”
- Валюта отображается в зависимости от той что выбрана в хедере
- Кнопка “Добавить в корзину”
- при добавлении в корзину товара - должно смениться отображение кнопки на “В корзине”
- Отправляет ковер в корзину
7. Корзина
В корзину добавляются все желаемые ковры
Корзина отображает данные
- Список добавленных ковров
- При нажатии на карточку - можно перейти на страницу ковра
- Превью карточки ковров включают отображение
- Фото
- Название
- Цена
- может быть 2 цены, перечеркнутая и новая - учесть в дизайне
- Количество мы не выбираем - нет таких кнопок - так как каждый ковер - уникальный, повторы не возможны
- Кнопка “Удалить” удаляет из корзины товар
- Общая сумма заказа
- Кнопка “Оформить”
- открывает экран оформления заказа
7.1. Оформление Заказа
На экране оформления отображается форма с полями:
- ФИО покупателя
- Номер телефона покупателя
- Почта покупателя
- Адрес доставки
- Способ доставки обсуждается напрямую с заказчиком
- Комментарий
- Кнопка “Отправить”
- Все поля кроме комментария обязательные
- После отправки вывести окно успешной отправки заказа
- Данный заказ автоматически приходит письмом покупателю со всеми данными по заказу
- Автоматически заказ дублируется на почты указанные в админке со всеми данными по заказу
- В Админке появляется новый заказ
8. Страница “О Проекте”
Информацию проработать не только текстово, но с применением иконок, графики - чтоб это не было полотном текста
Контент данной страницы будет следующим:
- Заголовок
IQCarpet - Маркетплейс ковров ручной работы
- Преимущества ковров
- Иконка
- Текст
Ковры ручные vs машинные
мягкие и приятные на ощупь
экологически чистые
поглощают влагу, но при этом остаются сухими, что делает их идеальным естественным осушителем
сопротивляются сжатию и не мнутся
обладают грязеотталкивающим свойствами
хорошо сохраняют цвет
обладают большей долговечностью
- Блок призыва к действию
- Текст
- Кнопка “Перейти в каталог”
Решение IQCarpet - купить ковер прямо у производителя
- Как это работает
Как это работает:
1. Покупатель выбирает ковер и отправляет заявку, в которой указаны детали покупки и место доставки;
2. Мы проверяем наличие ковра у продавца, уточняем стоимость доставки и иных дополнительных платежей;
3. Мы заключаем с покупателем договор, принимаем оплату от покупателя и производим оплату продавцу;
4. Продавец отправляет напрямую ковер покупателю транспортной компанией или по почте.
- Плюсы для покупателя
Плюсы для покупателя:
- Стоимость ковра ниже на 50-60%, так как убирается длинная цепочка посредников;
- Гарантия подлинности, потому что ковёр с иранской фабрики не может быть китайской подделкой;
- Возможность найти ковер по уникальным или очень редким фильтрам прямо на складах у производителей.
9 Контакты
Данная страница включает отображение формы обратной связи с полями
- Имя
- Email
- Телефон
- Комментарий или сообщение
- Кнопка “Прикрепить” - возможность прикрепить несколько файлов фото
- Капча - reCAPTCHA
- Кнопка “Отправить”
- Все поля обязательны заполнению кроме прикрепления файла
10. Избранное
Раздел избранное создан для пользователя, чтоб сохранять понравившиеся товары
Данные в Избранном хранятся в кеше 30 дней
Попадая в данный раздел - отображается список товаров в избранном.
Каждый товар включает отображение:
- Название товара
- Фото
- бейджи
- Цена за товар
- может быть 2 цены, перечеркнутая и новая - учесть в дизайне
- Кнопка “В избранном”
- если нажать на кнопку еще раз, автоматически снимается отметка у товара
- Кнопка “В корзину”
При нажатии на товар открывается страница открытого товара - описание доступно выше в разделах
11. Текстовые страницы
Текстовые страницы на сайте:
- Политика конфиденциальности
- Пользовательское соглашение
Каждая текстовая страница включает:
- Заголовок
- Текст страницы
- В админке добавить текстарий с форматированием
- Поля наполняются с админки
12. Страница 404 ошибки
Данная страница появляется на сайте, в случае если произошел сбой на сервере
Нужно учесть критерии для данной страницы:
- Должна содержать кнопку “На главную”
- В дизайне отрисовать под фирменный стиль проекта
13. Уведомления на почту
Уведомления могут отправляться на почту по таким действиям:
Нам на указанные почты в админке
- При получении нового заказа
Покупателям
- При отправке заказа
- При изменении статуса заказа
- На каждый статус заказа
- Новый
- В работе
- В пути
- Доставлен
- Отменен
Админку описываем более детально в следующем ТЗ
Касательно админки. Надо, чтобы админка стала неким прообразом CRM, т.е. через нее мы могли внести / корректировать / удалять / искать не только характеристики ковра, но и самого продавца (его название, телефон, сайт, ссылки на соцсети, какой-то комментарий). И связь продавца и принадлежащих ему ковров.