Разработка сайтов и последующая техническая поддержка — наша основная специализация, поэтому нас часто просят посчитать стоимость проекта без технического задания или просто показать, как оно должно выглядеть. Именно поэтому мы подготовили и выложили в открытый доступ типовой пример полноформатного ТЗ на создание интернет-магазина электроники и бытовой техники — чтобы на его основе клиенты могли составлять собственные задания для своих проектов. Это вторая часть: детальная страница товара, сравнение, корзина, оформление заказа, статусы, личный раздел покупателя и формат обмена данными.
4.5. Детальная страница товара
Макет страницы «Детальная страница товара» см. «макеты страниц» — «Детальная страница товара». Левое товарное меню не предусмотрено: его роль выполняет расширенная цепочка навигации.
Область №1 — основная область просмотра медиа
В этой области появляется то, что выбрано в «ленте выбора медиа», — изображение товара или видео. Когда вариантов просмотра много, видео помечается отдельным знаком. Если у товара есть маркетинговые признаки, все они выводятся в «основной области просмотра медиа».
Под «лентой выбора медиа» размещается блок «список разделов информации о товаре» для навигации: как только пользователь выбирает раздел, контент в области №2 перематывается к выбранному разделу.
Область №2 — основная информация о товаре
Если для товара задана сущность «цветовые варианты», выводится соответствующий блок; все цветовые варианты можно просмотреть на отдельной странице.
- Блок «социальные сети».
- Если для товара активна акция, информация о ней выводится в виде условий акции (могут содержать HTML) и счётчика обратного отсчёта до её завершения.
- Индикатор наличия товара.
- Цена товара — предусмотрена акционная форма подачи «старая цена : новая цена».
- «Узнать о снижении цены» — всплывающее окно, в котором пользователь определяет процент, при котором отправлять уведомление, и e-mail для уведомления.
- Кнопка «Купить» — появляется всплывающее окно с содержимым корзины, см. «Всплывающая корзина».
- Ссылка «к сравнению» — добавляет товар в список сравнения. Если товар уже в сравнении, ссылка меняется на «в сравнении» и после клика ведёт на страницу сравнения; рядом — значок удаления из сравнения.
- Ссылка «в избранное» — добавляет товар в список желаний. Если товар уже в «списке желаний», ссылка меняется на «уже в списке» плюс значок удаления из «списка желаний». Клик на «уже в списке» ведёт на «страницу желаний».
- «Рассчитать кредит» — выбор условий кредитования и оформление товара в кредит; будет реализовываться на втором этапе, когда условия будут известны.
- Кнопка «Заказать в один клик» — пользователю предлагают ввести номер телефона, после чего в системе формируется заказ с виртуальным пользователем (если текущий не был авторизован).
Информационный блок об условиях покупки
Блок единый для всех товаров в каталоге, его содержимое — HTML. Для отдельных групп или товаров в перспективе предусматривается индивидуальная реализация этого блока. В блоке есть возможность посмотреть остатки этого товара на складах и в магазинах выбранного города.
«Купить комплектом» и «С этим товаром мы рекомендуем»
Для товара могут действовать условия продажи комплектом. Если цена комплекта меньше суммарной цены входящих в него товаров, выводится информация об экономии. Если комплектов для товара несколько — применяется перелистывание для выбора.
Комплекты как объекты формируются вручную на сайте. Если товар №2 идёт в комплекте с товаром №1, то обратное с теми же условиями акции тоже справедливо (транзитивность). Чтобы определить комплект, нужно задать:
- Список товаров, участвующих в комплекте, — не более двух.
- Цену каждого товара при покупке комплектом или конечную стоимость комплекта.
- Дату начала и окончания действия комплекта.
Если комплектов для товара нет, вместо этого блока показывается «С этим товаром мы рекомендуем» — список рекомендованных товаров из разных категорий. Поскольку товаров может быть много, доступен фильтр для отбора рекомендованных товаров по категории. Рекомендованные товары формируются на сайте в виде отдельных объектов сущности «рекомендация». В объект «рекомендация» помещаются ссылки на товары, которые могут покупаться или рекомендоваться к совместной покупке. Для товаров, входящих в множество, соблюдается правило транзитивности. Для каждого товара может быть задано несколько ссылок на объекты «рекомендации» — в таком случае множества товаров объединяются.
Лента «Информационные материалы»
Выводятся только те блоки, в которых есть информация.
Описание товара
Если объём материала большой, показываются первые 10 строк, нижняя часть «размывается» и выводится ссылка «Ещё» с возможностью развернуть весь материал. Описание — это HTML-материал, который может содержать любое наполнение, поддерживаемое этим форматом.
Характеристики товара в сравнении с похожими
В таблицу попадают товары из того же раздела: текущий товар выводится на втором месте, слева от него — товар с более низкой ценой, справа — несколько товаров с более высокой. Сначала показываются только характеристики, определённые как фильтрующие для текущего раздела, плюс те, что отличаются для выбранных товаров; остальные раскрываются по ссылке «Больше характеристик». Из таблицы характеристик товар можно купить.
Отзывы о товаре
Выводятся первые 3 отзыва, сортировка по дате по убыванию, все отзывы разворачиваются ссылкой «Показать больше отзывов». Если отзывов много, появляется постраничная навигация. Могут применяться иерархические отзывы. Кнопка «Оставить отзыв» показывает форму: имя, оценка товара от 1 до 5, текст отзыва; для авторизованного пользователя известные поля заполняются автоматически. Полезность отзыва можно оценить — нужна авторизация. Отзывы выводятся после премодерации.
Серия и модификации товара
Если товар входит в объект «серия», выводится описание серии и все входящие в неё товары. Если товаров много, они выводятся таблицей построчно с функцией «Показать больше». Предусмотрена ссылка для просмотра всех товаров серии на отдельной странице.
«Покупатели, просматривавшие этот товар, также интересуются»
Лента товаров, подгружаемых при скролле по требованию. Представление товара — стандартное каталожное.
«Похожие модели»
Лента товаров, подгружаемых при скролле по требованию. Список формируется из специального свойства товара; если оно не задано — из товаров того же бренда текущего раздела каталога. Представление товара — стандартное каталожное.
Отдельно выводится блок «Вы недавно смотрели». Нижний блок «footer» — содержимое и функционал совпадают с описанными в разделе «главная страница».
Поведение областей при скролле
- Синхронное движение. При скролле вниз область «1» и область детального описания товара «2» синхронно поднимаются до тех пор, пока за пределами окна браузера не скроется верхняя часть «3». То есть обе области движутся вверх, пока в видимой части окна браузера есть «шапка сайта».
- Фиксация области «1». После того как область «шапка сайта» «3» скрылась за верхней границей окна браузера, область «1» прекращает движение вверх. Область «2» продолжает движение. Если в области «2» кнопка «Купить» выходит из окна видимости, кнопка «Купить» вместе с ценой появляются под областью №1.
- Замораживание. Область «1» останавливается (замораживается) до тех пор, пока в видимой области браузера не появится нижняя лента «похожие модели».
- Обратный скролл. Если пользователь начнёт скроллить вверх, область «1» начнёт движение вниз после того, как её верхняя часть сравняется с верхней частью области «2».
- Размораживание. Когда в видимой области браузера появится нижняя лента «похожие модели», область «1» продолжит движение вверх синхронно с областью «2».
4.6. Страница «Сравнение товаров»
См. «макеты страниц» — «Сравнение товаров».
Страницу сравнения товаров можно вызвать из любого места, где предусмотрена соответствующая ссылка. Сравниваться могут товары из одной категории. Если для сравнения отобраны товары из разных категорий, предлагается сравнивать их тоже по категориям.
- Добавить товар в таблицу сравнения.
- Показать только отличия в характеристиках или показать все характеристики.
- Удалить товар поштучно.
- Удалить все товары из сравнения.
В зоне №1 показываются изображения товаров, названия, цены и маркетинговые признаки. Зона №2 используется для отображения характеристик товаров. Отличающиеся характеристики выделяются цветом.
4.7. Корзина
См. «макеты страниц» — «Корзина». В корзине возможно изменение количества товаров, удаление и дополнение из предложенных списков товаров — не выходя в каталог. Доступны две формы представления: всплывающая корзина и полная корзина.
Всплывающая корзина
После нажатия кнопки «Купить» на любой странице, где есть возможность купить товар (каталог товаров, детальная страница товара и т. п.), пользователю показывается «всплывающая корзина». Визуализация ссылки «Продолжить покупки» — это стандарт де-факто: она должна быть на порядок менее заметным элементом управления, чем «Оформить заказ».
В корзине отображаются:
- Товары и комплекты, отобранные для покупок.
- Отдельно выделяются «Акционные предложения» — комплекты: такие товары нельзя удалить поодиночке, удаление происходит только целым комплектом.
- Ссылка «перейти к оформлению» — пользователь попадает на «Шаг №1» оформления заказа.
- Функция «Купить в 1 клик».
- «Продолжить покупки» — ссылка возвращает пользователя на предыдущее место.
Полная корзина
Содержит те же области, что и «всплывающая корзина», и дополняется областями «купить комплектом» и «с этим товаром мы рекомендуем». Товары, купленные из этих областей, автоматически дополняют текущую корзину. Подробное описание формирования и правил работы блоков «купить комплектом» и «с этим товаром мы рекомендуем» приведено в разделе «детальная страница товара».
4.8. Оформление заказа
Формирование заказа состоит из трёх этапов, текущий этап отображается в заголовке. Если пользователь авторизован, шаг №1 не показывается — оформление начинается с шага №2.
- Шаг №1. Идентификация покупателя. Шапка и «footer» страницы заменяются на «минимальные». Доступна функция «заказать в 1 клик». Неавторизованному покупателю предоставляется возможность ввести телефон и выбрать, является ли он новым покупателем или действующим. PHONE или EMAIL используется как идентификатор пользователя в системе: проверяется наличие пользователя по введённому идентификатору, при наличии предлагается процедура восстановления пароля. Возможно подключение внешнего SMS-шлюза, напоминания пароля и внешняя авторизация, если в профиле внешней системы (Facebook и т. п.) доступны для чтения PHONE или EMAIL.
- Шаг №2. Доставка, оплата, данные. Выбор города из списка с функцией автоопределения. Оформление заказа осуществляется только для физических лиц; в перспективе возможно добавление функционала для юридических лиц. При оформлении доступно использование имеющихся профилей и формирование новых, если введены изменённые данные.
- Шаг №3. Подтверждение. Отображается информация по оформленному заказу и его товарный состав. Выводится информация по акционному предложению любого товара по цене «Увеличение среднего чека после покупки»: если этот товар выбран, он добавляется к только что сформированному заказу. Также показывается блок «Хиты продаж».
Для соблюдения юридических норм при регистрации пользователь должен установить признак (checkbox) «С регистрацией согласен…», текст должен быть оформлен в виде включаемой области. Содержимое корзины показывается в изначально свёрнутом виде: редактировать корзину на этом шаге невозможно, но возможен возврат на страницу «Корзина» для редактирования.
Способы доставки
- Самовывоз — требуется ввод уточняющей информации по точке вывоза товара.
- Доставка курьером — требуется ввод уточняющей информации по адресу и времени доставки.
- Доставка почтовой службой — требуется ввод уточняющей информации по адресу доставки, проводится расчёт стоимости.
Возможно использование маркетинговых инструментов: рассчитать стоимость доставки, бесплатная доставка, если стоимость заказа от XXX, и другие.
Способы оплаты
Способ оплаты зависит от выбранного ранее способа доставки. Варианты оплаты:
- Наличные при получении.
- Банковский перевод — формируется счёт по заданному шаблону.
- VISA в режиме онлайн — подключение внешнего шлюза; после успешной оплаты заказ сразу после оформления переходит в статус «Оплачен».
- Внешний шлюз для электронных денег — после успешной оплаты заказ сразу после оформления переходит в статус «Оплачен».
Пользователю предлагается ввести персональные данные для использования в персонализированных инструментах (ФИО, EMAIL и т. п.) и оставить комментарии к заказу. Состав заказа показывается полностью плюс стоимость доставки; есть функция перехода на страницу редактирования состава заказа. Кнопка «Подтвердить заказ» формирует новый заказ в статусе «Новый», создаёт или обновляет профиль доставки для пользователя.
4.9. Бизнес-процессы и статусы заказов
- Новые заявки. Только что поступившие заказы получают статус «Новый»; заказы «в один клик» — тоже «Новый». На единую почту для всех продавцов приходит e-mail-уведомление о новом заказе согласно шаблону.
- Принятие в работу. После принятия заявки в работу менеджер обязан перевести её в статус «обрабатывается».
- Откладывание. Если обработка заявки откладывается по каким-то причинам — недозвон, уточнение остатков, уточнение комплектации — такие заявки переводятся в статус «отложено».
- Дежурство на входящих. Операторы принимают заявки, сменяя друг друга каждый час. Это время называется «дежурство на входящих».
- Операционная работа. Время, свободное от «дежурства на входящих», называется «время операционной работы».
- Неподтверждённые заявки. Неподтверждённые заявки, ожидающие какого-либо решения, называются «обрабатывается».
- Правило дежурства. В свой час «дежурства на входящих» оператор обзванивает клиентов ТОЛЬКО по только что поступающим заявкам и не имеет права проводить операции со статусами «обрабатывается».
- Приоритеты операционной работы. Во время «операционной работы» оператор обрабатывает заявки в статусе «обрабатывается». В приоритете: свои заявки текущего дня, заявки других операторов текущего дня, все заявки «обрабатывается» прошлого дня.
- Срок обработки. Заявки в статусе «обрабатывается» должны быть обработаны в течение 2 дней или переведены в статус «Отказ» с описанием причины.
Список статусов заказов
| Статус | Подстатусы и условия | Обмен с учётной системой |
|---|---|---|
| Новый | — | — |
| Обрабатывается | Звонить; Недозвон | — |
| Отложено | Звонить; Недозвон | — |
| Подтверждённый | Подтверждение оплаты, если безналичный расчёт | Передаётся в учётную систему |
| Оплаченный | — | Передаётся в учётную систему |
| Комплектуется | Ожидание товара; Комплектация | Поступает из учётной системы |
| Отправленный | — | Поступает из учётной системы |
| Отказ | С описанием причины | — |
Формат данных, передаваемых между сайтом и учётной системой, описан в разделе «Обмен с учётной системой».
4.10. Раздел пользователя и информационные страницы
Личные данные
См. «макеты страниц» — Личный раздел «Данные покупателя». Возможность изменить личные данные; неизменяемые идентификационные данные — PHONE или EMAIL. Пользователь может указать дополнительные варианты связи (EMAIL, PHONE) и отметить предпочтительный. Доступны профили пользователя с возможностью изменять и создавать новые. Статистическая информация: общее количество заказов, общая сумма заказов. Маркетинговые инструменты: персональная накопительная и другие скидки, правила начисления и использования скидок, необходимые суммы покупок для получения новых маркетинговых преимуществ. Отдельно — «Данные о подписке» и «Вы недавно смотрели».
История заказов
См. «макеты страниц» — Личный раздел «История заказов». Таблица заказов со статистической информацией: количество заказов, товаров, сумма, кнопка для запроса скидки. Колонки: дата, номер заказа, сумма, статус заказа. Каждый заказ можно развернуть для детального просмотра его состава и другой информации. Внизу — «Вы недавно смотрели».
Список желаний
См. «макеты страниц» — Личный раздел «Список желаний». Товары, отобранные пользователем, в стандартном каталожном представлении с возможностью удаления из списка желаний. Используется постраничная навигация. Внизу — «Вы недавно смотрели».
Лист ожидания
См. «макеты страниц» — Личный раздел «Лист ожидания». Товары, отобранные пользователем функциями «сообщить о снижении цены на ХХ%» и «сообщить о поступлении», в стандартном каталожном представлении с возможностью удаления из списков. Используется постраничная навигация. Внизу — «Вы недавно смотрели».
Расположение наших магазинов
Страница содержит интерактивную карту для отображения магазинов сети. Магазин можно выбрать на карте и получить информацию о его адресе, времени работы, контактах и фотографиях. Информацию можно фильтровать, указав город и тип магазина. Данные могут быть представлены в виде карты и в виде списка.
Результаты поиска
Страница содержит поле для ввода поискового запроса. В результате выдаются результаты поиска, а если данных много — в постраничном виде. Внешний вид результата: заголовок найденного материала, краткое описание, размещение в структуре сайта.
Информационные страницы, карта сайта и 404
Эти страницы выполняются в макете «Стандартная информационная страница». В рабочей области могут размещаться «статические данные», введённые через редактор статических страниц, или динамические данные, сформированные из элементов информационных блоков методом выборки нужных данных. Если нужно отобразить большое количество динамических данных, может использоваться постраничная навигация, количество элементов на странице задаётся административно.
- Страница «О магазине».
- Условия доставки.
- Условия оплаты.
- Помощь.
- Страница информационных обзоров — постраничная навигация плюс детальная страница обзора.
- Страница выборки товаров по заданным маркетинговым признакам.
- Контакты.
Карта сайта выполняется в виде развёрнутой структуры сайта: статические страницы и каталог товаров до последнего уровня вложенности. Страница «404» содержит причину ошибки, ссылку на главную страницу и на страницу карты сайта.
5. Условия переноса проекта на новую платформу
Поскольку проект уже существует и проводится его перенос на новую платформу, необходимо выполнить следующие правила.
Обязательно проставить постраничные 301-редиректы с текущих URL страниц на соответствующие URL новой CMS. Это является обязательным условием для переноса.Раздел 5 ТЗ — «Условия переноса проекта»
- 301-редиректы. Под «всеми URL» подразумевается перенос действительно всех URL, включая страницы товаров, фильтров, статей и т. д. Крайне желательно сохранить «старые» URL при переезде — это позволит максимально быстро перенести сайт с минимальными потерями трафика.
- Особенности новой платформы. При переносе следует учесть особенности новой CMS. Не должны появляться дубликаты текстов на сайте, дубликаты страниц, метаданных и т. д.
- robots.txt. В файле robots.txt также нужно учесть особенности новой CMS. Должны быть закрыты от индексации страницы сортировок товаров, админпанели, корзины, страницы поиска по сайту, а также страницы авторизации пользователей (регистрация, восстановление пароля и т. д.).
- XML-карта сайта. Нужна возможность сохранения XML-карты с автоматическим добавлением (динамической генерацией) новых страниц при появлении новых URL. При этом карта сайта должна содержать уже новые URL страниц (при условии изменения URL).
- Карта сайта для изображений. Необходимо оформить карту сайта для картинок с учётом новых URL после переноса.
- Единый формат URL. Страницы категорий, комплектов, новостей, статей должны быть статическими и приведёнными к одному виду — в конце со слешем или без него. После переездов это иногда сбивается.
- Изображения на своём домене. Все картинки должны размещаться на сервере домена. При этом для них должны быть прописаны title и alt.
- Проверка внутренних ссылок. При изменении URL обязательно проверить на новой платформе, чтобы не было ссылок на старые страницы. Они могут быть где-то в статьях, новостях, на карточках товаров и т. д. — такие ссылки нужно заменить на новые URL.
6. Формат XML-файлов для обмена товарами
Раздел описывает модель хранения данных, структуру файла import.xml и структуру файла offers.xml.
6.1. Структурирование остатков товаров по магазинам
В системе для определения конкретного магазина используются два уровня структуризации: город и магазин (определяется адресом). Каждый товар при поступлении данных об остатках должен содержать информацию: общее количество по всей сети магазинов и остатки в конкретном магазине.
6.2. Модель хранения данных
Все товары при такой модели хранятся и учитываются отдельными позициями. Никакой логической связи между товарами и их уточняющими SKU не предусматривается. Например:
- iPhone 6s Plus 16Gb Красный
- iPhone 6s Plus 16Gb Белый
- iPhone 6s Plus 16Gb Золотой
Это всё разные товары, которые учитываются отдельными позициями и в карточке товара никак логически не связаны друг с другом.
6.3. Структура файла import.xml
Пример выгрузки содержится в прикреплённом файле import.xml. Классификатор содержит основную управляющую информацию.
Группы — древовидная структура групп товаров выгружается в том виде, в котором она есть в учётной системе. Правила обработки:
- Собственная структура. На сайте будет собственная структура разделов.
- Новые группы. Если в выгрузке будут появляться новые группы, сайт будет складывать их в корень разделов в неактивном виде — до тех пор, пока для группы не будут прописаны индивидуальные свойства для фильтрации, группа не будет корректно размещена в дереве групп на сайте и не будет активирована.
- Исчезнувшие группы. Если в выгрузке будет не хватать какой-то группы, ранее бывшей на сайте, такая группа должна деактивироваться на сайте.
- Глубина дерева. Глубину дерева ограничиваем тремя уровнями.
Акции — для передачи акций (когда второй товар идёт в подарок) и комплектов (когда товары продаются по цене, меньшей суммы их цен по отдельности). Передаются: ИД акции; наименование — название, под которым акция будет показана; логика — пока не используем, по умолчанию ставим «ИЛИ»; дата начала — с какого числа действует акция; дата окончания — до какого числа действует акция; товары — список товаров, которые идут в подарок с тем товаром, у которого есть ссылка на акцию.
Свойства — описательная часть дерева для перечня свойств товаров. Каталог содержит товары, их описание, привязку к группам, характеристики и свойства; признак «СодержитТолькоИзменения» обозначает полную или частичную выгрузку (требует обсуждения).
| Узел товара | Назначение |
|---|---|
| Ид | Идентификатор товара |
| ШтрихКод | Штрих-код позиции |
| Артикул | Артикул позиции |
| Наименование | Название товара |
| ЗначенияРеквизитов | Значения реквизитов позиции |
| ВидНоменклатуры | Товары собственные или приобретённые |
| ТипНоменклатуры | Товар или услуга (не будет использоваться) |
| Полное наименование | Альтернативное название; может использоваться для показа в карточке или для SEO |
| СтавкиНалогов | Ставки налогов |
| Группы | Привязка товара к группам, может быть множественной |
| Описание | Полное описание товара |
| Картинка | Изображение для PREVIEW |
| ЗначенияСвойств | Поддерево со значениями свойств товара: Ид — ссылка на свойство, ЗначениеСвойства — может быть множественным, Значение — дополнительное описание |
| Характеристики товара | Таблица «наименование — значение» характеристик товара |
Группы характеристик можно объединять: для этого в узле наименования должен содержаться символ «#», а в узле значения — название группы. Например, в выгрузке последовательно идут строка-разделитель «#» с названием группы «Операционная система», далее сами характеристики этой группы — «Операционная система: Android», «ПО для восстановления ОС: на FLASH». Затем снова «#» с названием «Процессор» и его характеристики: «Производитель процессора», «Тип процессора: Snapdragon S4 Pro», «Тактовая частота процессора, ГГц: 1,5», «Интегрированное графическое ядро». Далее — «#» с названием «Оперативная память» и так же по всем группам.
6.4. Структура файла offers.xml
Пример выгрузки содержится в прикреплённом файле offers.xml.
- Классификатор — содержит информацию для связывания предложений по ИД с каталогом товаров.
- ПакетПредложений — основная информация о ценах и остатках.
- ТипыЦен — описывает все типы цен, выгружаемые на сайт: Ид, Наименование (тип цены), Валюта, Налог.
- Предложения — товарные предложения (цена, остатки): Ид, ШтрихКод, Артикул, Наименование.
- Цены — может быть несколько, например розничная, акционная, дилерская и т. д.: ИдТипаЦены, ЦенаЗаЕдиницу, Валюта, Единица.
- Количество — количество на остатках.
