Полноформатное ТЗ на интернет-магазин: типовой шаблон

Разработка сайтов и последующая техническая поддержка — наша основная специализация, поэтому нам часто предлагают просчитать стоимость проекта без технического задания или просят показать, как оно вообще должно выглядеть. Именно поэтому мы подготовили и выложили в открытый доступ типовой пример полноформатного ТЗ на создание интернет-магазина электроники и бытовой техники. На его основе клиенты могут составлять собственные технические задания для своих проектов.

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

1. Границы проекта

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

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

2. Термины, которые используются в документе

Чтобы заказчик и команда разработки читали документ одинаково, ТЗ начинается со словаря. Это не формальность: большинство споров на приёмке работ возникает именно из-за разного понимания слов «модуль», «раздел» или «панель».

Требования к SEO

Требования к SEO приводятся в отдельном документе — приложении к ТЗ. В тексте самого технического задания на него есть ссылки там, где SEO влияет на вёрстку и контент (например, SEO-области на главной странице и в каталоге).

3. Общий функционал

Раздел описывает механики, которые работают одинаково на любой странице сайта, — чтобы не повторять их в каждом следующем разделе ТЗ.

• Кроме штатной аутентификации (login-password), используется внешняя — через социальную сеть Facebook.
• Значения свойств и характеристик при их отсутствии у сущности не выводятся.
• Во всех областях, где используется таблично-ленточное представление товара, применяется стандартное каталожное представление товара, если не указано иное.
• «Заказать в 1 клик» — функция доступна для формирования заказа без ввода данных, нужных при оформлении по полной процедуре. Нужно ввести только телефон: в системе создаётся виртуальный пользователь, а текущий товар или содержимое корзины (в зависимости от места размещения функции) помещается в заказ. Если пользователь авторизован, телефон не запрашивается — сразу происходит оформление заказа и переход на Шаг №3 оформления, заказ сопоставляется с текущим пользователем.
• Города и пункты продажи (выдачи товаров) — в системе определяются два справочника: «города для вывоза и доставки товаров» и «справочник пунктов продажи/выдачи товаров» с привязкой к городу.
• Формы авторизации, регистрации и восстановления пароля. Все всплывающие формы ввода выполняются в едином стиле; для восстановления пароля используется EMAIL или PHONE пользователя.

4. Главная страница

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

Верхняя часть страницы

Область №1. В ней размещается:

• Верхний баннер (тип TOP_PAGE). Если баннеров этого типа в системе нет, вся область баннера не показывается.
• Переключение языков — осуществляется методом переброса пользователя на главную страницу сайта на выбранном языке.
• Механизм выбора текущего магазина: область содержит выпадающее окно, позволяющее выбрать магазин — двухэтапный выбор города, затем магазина. Структуризация магазинов по городам выполняется администратором сайта и обеспечивается механизмом обмена с внешней учётной системой. Есть возможность посмотреть расположение магазина на интерактивной карте.
• Вход в раздел пользователя (всплывающая форма авторизации). Если пользователь авторизован, вместо надписи «авторизация» отображается его ФИО.

Область №2. В ней размещается:

• Верхнее меню — содержит ссылки на общую информацию (оплата, доставка, гарантия, контакты). Меню можно изменить с помощью стандартных системных механизмов.
• Логотип компании. На всех страницах, кроме главной, клик по нему выполняет переход на главную страницу текущего языка.
• Система поиска. В поле ввода можно ввести полное или частичное название товара; после ввода четвёртого и последующих символов система начинает предлагать в виде dropbox товары по совпадению подстрок текущего ввода. Из предлагаемого списка можно перейти на карточку товара. Возможен вариант поиска, при котором в поле ввода печатается название товара и нажимается Enter — после чего на отдельной странице система выдаёт список товаров, соответствующих условию, с постраничным представлением (см. описание страницы «результаты поиска»). Для регулирования области поиска используется выпадающий список разделов первого уровня каталога. Под строкой поиска размещается подсказка из самых частых поисковых запросов через запятую: при клике на запрос он переносится в строку поиска. Подсказки для поиска меняются через включаемую область.

Область №3 — главное товарное меню. Первый уровень формируется по главным разделам каталога. При выборе раздела остальные подразделы разворачиваются в выпадающее меню. Выпадающее меню содержит развёрнутую структуру выбранного раздела, «маркетинговое предложение» или фоновый рисунок — вывод именно в такой последовательности. Маркетинговых предложений для одного раздела может быть несколько. При выборе маркетингового предложения происходит переход в карточку товара или на страницу с акцией.

Область №4 — область главного баннера. Формируется из типов баннеров MAIN_PAGE. Перелистывание баннеров осуществляется по таймеру и вручную. Над баннерами размещается классификация показываемых баннеров: топ акций, новинки, специальные комплекты. Если баннеров какого-то класса нет, соответствующий тип в классификаторе не показывается. Под главным баннером размещается строка с маркетинговыми отличиями: условия гарантии, условия скидки и т. п. Элементы состоят из картинки, названия маркетингового отличия и пояснительного текста. Блок можно изменять через инструменты «включаемой области».

Область №5 — «топ продаж». Лента состоит из товаров с маркетинговым признаком «топ продаж»; в ленту попадают товары, имеющие приоритет по полю SORT, а также ненулевые остатки. Все товары отображаются согласно «Стандартному представлению товара в каталоге», дополнительно для каждого товара отображается его раздел. Перелистывание товаров в блоке не предусмотрено. Есть возможность посмотреть все товары с признаком «топ продаж» (ссылка «Все») на отдельной странице с постраничной навигацией; для представления всех таких товаров используется макет «Стандартная информационная страница».

Область №6 — «предложение недели». Блок состоит из товаров с маркетинговым признаком «акция»; в блок попадают товары с приоритетом по полю SORT и ненулевыми остатками. Все товары отображаются согласно «Стандартному представлению товара в каталоге». Перелистывание товаров отсутствует. В верхней части блока показывается счётчик обратного отсчёта времени акции для товара с ближайшей датой завершения.

Средняя часть страницы

Область №1 — «информационная вставка». Состоит из трёх блоков в последовательности: баннер + обзор + баннер. В блоках могут размещаться:

• Рекламные баннеры (тип MIDDLE_MAIN_PAGE) — состоят из изображений, текста и элементов управления.
• Элемент раздела «Обзоры» — обзор товара, товарной серии и т. п.; состоит из изображений, текста, элементов управления, а также ссылок «подробно» и «все обзоры». Для выбора обзора на главную используется признак в обзоре «показывать на главной», для ранжирования — значение поля SORT. Для представления всех обзоров используется макет «Стандартная информационная страница».

При отсутствии нужного количества элементов одного из типов требуемое место замещается другим типом.

Область №2 — «новинки». Лента состоит из товаров с маркетинговым признаком «новинки»; в ленту попадают товары с приоритетом по полю SORT и ненулевыми остатками. Все товары отображаются согласно «Стандартному представлению товара в каталоге», дополнительно для каждого товара отображается его раздел. Перелистывание товаров отсутствует. Есть возможность посмотреть все товары с соответствующим признаком (ссылка «Все») на отдельной странице с постраничной навигацией; используется макет «Стандартная информационная страница».

Область №3 — «скоро в продаже». Лента состоит из товаров с маркетинговым признаком «скоро в продаже»; в ленту попадают товары с приоритетом по полю SORT. Все товары отображаются согласно «Стандартному представлению товара в каталоге», за исключением кнопки «Купить», плюс для каждого товара отображается его раздел. Вместо «купить» отображается кнопка «сообщить о поступлении»: при её выборе запрашивается номер телефона или EMAIL, если пользователь не авторизован, а когда товар появится на складе, пользователю отправляется уведомление. Перелистывание товаров отсутствует. Есть возможность посмотреть все товары с признаком «скоро в продаже» (ссылка «Все») на отдельной странице с постраничной навигацией. Если товаров не хватает, чтобы заполнить полную строку шириной с экран, область не показывается.

Нижняя часть страницы

Область №1 — лента «Вы недавно смотрели». Лента состоит из товаров, которые текущий пользователь просматривал во время просмотра сайта; сортировка товаров — по времени просмотра, по убыванию. Перелистывание товаров в блоке осуществляется методом «подгрузки по запросу». Если для текущего пользователя не хватает данных, нехватка товаров в ленте дополняется товарами с маркетинговым признаком «топ продаж». Все товары отображаются согласно «Стандартному представлению товара в каталоге».

Область №2 — блок «Полезные обзоры». В блок попадают элементы раздела «Обзоры» — обзор товара, товарной серии и т. п.; состоит из изображений, текста, элементов управления и ссылки «подробно». Для вывода обзора на главную используется ранжирование по значению поля SORT. Для представления всех обзоров используется ссылка «Все» — переход на страницу «Обзоры».

Область №3 — SEO-область. Заполняется по правилам в приложении «SEO» или текст редактируется напрямую.

5. Страница «Каталог товаров»

Макет страницы «Каталог товаров» описан отдельно — см. «макеты страниц» — «Каталог товаров». Сам раздел ТЗ начинается не с вёрстки, а со справочников, от которых зависит всё остальное: маркетинговых признаков, типов цен, скидок и купонов.

Маркетинговые признаки и типы цен

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

• Новинки
• Бестселлеры
• ТОП-продаж
• «Скоро в продаже»
• Распродажа −30% и т. п.
• Каждый признак может быть представлен с дополнительным изображением

Типы цен, которые используются в системе (количество цен может меняться):

• Основная цена
• Цена по акции №1 … цена по акции №n и т. п.
• Кредитная цена
• Кредитный платёж
• Комплектная цена — по комплектам подход другой: выделяется сущность «комплект», в которой задаётся цена для товара именно в этом комплекте. Так сделано потому, что в разных комплектах товар может быть с разной ценой.

В системе для товара может быть назначено несколько типов цен. В качестве продажной цены для товара выводится та, для которой введены разрешения на продажу и которая является оптимальной (наименьшей) для текущего пользователя. Для представления цен «старая» и «новая» может использоваться отдельный шаблон представления, который согласуется под каждую акцию. Должен задаваться вид представления разницы цен: % скидки или сумма экономии.

Скидки

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

Купоны (промокоды)

Купон — это разновидность скидки. Его отличие в том, что купон является уникальной последовательностью символов, сгенерированной случайно. Право на получение скидки по купону имеет покупатель, которому эта уникальная последовательность символов была каким-то способом сообщена. Купоны логически привязываются к скидкам: при активации купона соответствующая скидка применяется к заказу.

• Купон на одну позицию заказа.
• Купон на один заказ.
• Многоразовый купон.

Верхняя часть страницы каталога

Левое товарное меню, как на главной странице, на страницах каталога не предусмотрено. Его роль выполняет расширенная цепочка навигации.

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

Область №2 — фильтр по товарам. Фильтр формируется для каждого раздела — последнего уровня иерархии, в котором размещаются товары с одинаковыми характеристиками. Принципы работы фильтра:

• В фильтре должны показываться только характеристики, определённые для этой группы товаров.
• Для каждого значения характеристики в цифрах указывается, какое количество товара будет отобрано, если включить в фильтре это значение.
• Через метаданные для каждой характеристики может быть индивидуально задан тип отображения: множественный выбор; слайдер числовых значений без дискретизации; переключатель «да/нет».
• Для каждой характеристики может быть задан индивидуальный шаблон отображения — например, с пиктограммами или картинками возле каждого значения.
• Если для характеристики нет значений у текущих товаров, эта характеристика в фильтре не показывается.
• Если значение какой-то характеристики отсутствует у текущих товаров, это значение не показывается в вариантах выбора.
• В отдельный блок выделяется фильтр по маркетинговым признакам.
• В верхней части фильтра, при выбранных параметрах фильтрации (фильтр включён), отображается блок с выбранными параметрами; параметры можно исключить из фильтра по одному или все одновременно. В этом же блоке может отображаться количество отобранных фильтром товаров.
• Отдельно реализуется возможность фильтрации по тегам — внекаталожный тип группировки товаров.

Область №3 — область отображения товаров. Для сортировки используются предварительно установленные параметры: цена, популярность, новинки. Здесь же в перспективе можно размещать варианты представления товаров: список, таблица, таблица с предварительным просмотром, прайс-лист.

Стандартное представление товара в каталоге

Стандартное представление товара в каталоге состоит из двух состояний — «обычного» и «при наведении курсора».

Подробнее об элементах состояния «при наведении курсора»:

• Кнопка «Купить» — после добавления появляется всплывающее окно с содержимым корзины (см. «Всплывающая корзина»).
• Ссылка «к сравнению» — добавляет товар в список сравнения. Если товар уже в сравнении, ссылка меняется на «в сравнении» и по клику ведёт на страницу сравнения; рядом появляется значок удаления из сравнения.
• Ссылка «в избранное» — добавляет товар в список желаний. Если товар уже в «списке желаний», ссылка меняется на «уже в списке» плюс значок удаления из «списка желаний». Клик по «уже в списке» ведёт на «страницу желаний».
• Теги — внекаталожные группировки для альтернативной каталогизации. Не кликабельны.
• Кнопка «Заказать в один клик» — при выборе этой кнопки предлагается ввести номер телефона; после ввода в системе формируется заказ с виртуальным пользователем (если текущий не был авторизован).

Отдельно в документе зафиксировано: должна ли кнопка «Купить» быть видимой уже в обычном представлении — вопрос дискуссионный, и его решают, опираясь на статистику покупок из каталога.

Постраничная навигация и рекламные вставки

При отображении таблицы товаров в каталоге применяется постраничная навигация и «догрузка товаров по требованию». Количество догружаемых товаров задаётся административно. Постраничная навигация работает совместно с «догрузкой».

«Рекламная вставка» в таблице при показе каталога формируется из типов баннеров CATALOG_CUT. Баннеры для показа в середине страницы выбираются по правилу «случайный в соответствии с весом». В каталоге баннер показывается только на первой странице.

Механика видимости областей при вертикальном скролле

Это тот случай, когда текстовое описание в ТЗ экономит недели переделок: поведение «липкого» фильтра описано пошагово, а не словом «как у всех».

1. Скролл вниз. Контент области фильтра «1» и области товаров «2» синхронно поднимается до тех пор, пока за пределами окна браузера не скроется верхняя часть «3». То есть обе области движутся вверх синхронно, пока в видимой части окна браузера есть «шапка сайта».
2. Шапка скрылась. После того как область «шапка сайта» «3» скрылась за верхней границей окна браузера, область «1» прекращает движение вверх. Область «2» продолжает движение вверх — то есть область «1» останавливается (замораживается).
3. Появилась нижняя лента. Когда в видимой области браузера появится нижняя лента «Вы недавно смотрели», область «1» продолжит движение вверх синхронно с областью «2» — то есть «размораживается».
4. Обратный скролл вверх. Если пользователь начнёт скролл в обратном направлении, область «1» начнёт движение вниз после того, как её верхняя часть сравняется с верхней частью области «2».

Нижняя часть страницы каталога

• Область №1 — лента «Полезные обзоры»: выводит обзоры товаров, относящиеся к текущему разделу.
• Область №2 — лента «Вы недавно смотрели»: содержимое и функционал совпадают с описанным в разделе «главная страница». Лента размещается на всю ширину экрана.
• Область №3 — SEO-текст: размещается после ленты «Вы недавно смотрели», формируется по шаблону для каждого раздела или может задаваться для каждого раздела индивидуально.
• Нижний блок «footer» — содержимое и функционал совпадают с описанным в разделе «главная страница».

6. Всплывающая корзина

Макет описан отдельно — см. «макеты страниц» — «Корзина». После нажатия на кнопку «Купить» на любой странице, где есть возможность купить товар (каталог товаров, детальная страница товара и т. п.), пользователю показывается «всплывающая корзина».

В корзине отображаются:

• Товары и комплекты, отобранные для покупок.
• Специально выделяются «акционные предложения» — комплекты: такие товары нельзя удалить по отдельности, удаление происходит полностью всего комплекта.
• Ссылка «перейти к оформлению» — пользователь попадает на «Шаг №1» оформления заказа.
• «Купить в 1 клик» — пользователь вводит номер телефона, после чего в системе формируется заказ с виртуальным пользователем (если текущий не был авторизован).
• «Продолжить покупки» — ссылка возвращает пользователя на предыдущее место.

Подробное описание формирования и правил работы этого функционала приведено в разделе «детальная страница товара».

7. Как пользоваться этим шаблоном

Приведённый документ — рабочий каркас, а не текст для галочки. Если составить ТЗ на его основе, большинство вопросов, которые обычно возникают на этапе приёмки, снимаются ещё до старта разработки: все участники одинаково понимают термины, знают нумерацию областей, видят правила работы фильтра, скидок и купонов.