Розробка сайтів і подальша технічна підтримка — наша основна спеціалізація, тому нам часто пропонують прорахувати вартість проєкту без технічного завдання або просять показати, як воно взагалі має виглядати. Саме тому ми підготували й виклали у відкритий доступ типовий приклад повноформатного ТЗ на створення інтернет-магазину електроніки та побутової техніки. На його основі клієнти можуть складати власні технічні завдання для своїх проєктів.
Ми розробили й виклали у відкритий доступ типовий приклад повноформатного ТЗ на створення інтернет-магазину, щоб на його основі наші клієнти могли створювати власні технічні завдання за своїми проєктами.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 — область відображення товарів. Для сортування використовуються попередньо встановлені параметри: ціна, популярність, новинки. Тут же в перспективі можна розміщувати варіанти представлення товарів: список, таблиця, таблиця з попереднім переглядом, прайс-лист.
Стандартне представлення товару в каталозі
Стандартне представлення товару в каталозі складається з двох станів — «звичайного» та «при наведенні курсора».
Стан «звичайний»
Назва товару — у дизайні необхідно врахувати наявність довгих і коротких назв. Фотографія товару — розміри зображення визначаються дизайном. Маркетингова ознака — якщо товар має кілька встановлених ознак, виводиться одна, виходячи з пріоритетів у списку «Маркетингові ознаки, що використовуються». Поточна ціна. Бренд — логотип бренду; якщо не визначений, не виводиться, розмір зображення визначається дизайном.
Стан «при наведенні курсора»
До наявного у «звичайному» стані додаються: артикул товару; можливість гортати зображення товару (бічні стрілки каруселі, зображення підвантажуються через AJAX); кнопка «Купити»; посилання «до порівняння» та «в обране»; теги; кнопка «Замовити в один клік»; короткий опис моделі (окреме поле в картці товару).
Докладніше про елементи стану «при наведенні курсора»:
- Кнопка «Купити» — після додавання з’являється спливаюче вікно з вмістом кошика (див. «Спливаючий кошик»).
- Посилання «до порівняння» — додає товар до списку порівняння. Якщо товар уже в порівнянні, посилання змінюється на «у порівнянні» й по кліку веде на сторінку порівняння; поруч з’являється значок видалення з порівняння.
- Посилання «в обране» — додає товар до списку бажань. Якщо товар уже у «списку бажань», посилання змінюється на «вже у списку» плюс значок видалення зі «списку бажань». Клік по «вже у списку» веде на «сторінку бажань».
- Теги — позакаталожні групування для альтернативної каталогізації. Не клікабельні.
- Кнопка «Замовити в один клік» — під час вибору цієї кнопки пропонується ввести номер телефону; після введення в системі формується замовлення з віртуальним користувачем (якщо поточний не був авторизований).
Окремо в документі зафіксовано: чи має кнопка «Купити» бути видимою вже у звичайному представленні — питання дискусійне, і його вирішують, спираючись на статистику покупок із каталогу.
Посторінкова навігація та рекламні вставки
Під час відображення таблиці товарів у каталозі застосовується посторінкова навігація й «дозавантаження товарів на вимогу». Кількість товарів, які дозавантажуються, задається адміністративно. Посторінкова навігація працює спільно з «дозавантаженням».
«Рекламна вставка» в таблиці під час показу каталогу формується з типів банерів CATALOG_CUT. Банери для показу в середині сторінки обираються за правилом «випадковий відповідно до ваги». У каталозі банер показується лише на першій сторінці.
| Тип банера | Де показується |
|---|---|
| TOP_PAGE | Верхній банер головної сторінки. Якщо банерів цього типу немає, уся область не показується. |
| MAIN_PAGE | Головний банер головної сторінки з гортанням за таймером і вручну. |
| MIDDLE_MAIN_PAGE | Рекламні банери в «інформаційній вставці» середньої частини головної сторінки. |
| CATALOG_CUT | «Рекламна вставка» в таблиці товарів каталогу, лише на першій сторінці. |
Механіка видимості областей під час вертикального скролу
Це той випадок, коли текстовий опис у ТЗ економить тижні переробок: поведінка «липкого» фільтра описана покроково, а не словом «як у всіх».
- Скрол униз. Контент області фільтра «1» та області товарів «2» синхронно піднімається доти, доки за межами вікна браузера не сховається верхня частина «3». Тобто обидві області рухаються вгору синхронно, доки у видимій частині вікна браузера є «шапка сайту».
- Шапка сховалася. Після того як область «шапка сайту» «3» сховалася за верхньою межею вікна браузера, область «1» припиняє рух угору. Область «2» продовжує рух угору — тобто область «1» зупиняється (заморожується).
- З’явилася нижня стрічка. Коли у видимій області браузера з’явиться нижня стрічка «Ви нещодавно дивилися», область «1» продовжить рух угору синхронно з областю «2» — тобто «розморожується».
- Зворотний скрол угору. Якщо користувач почне скрол у зворотному напрямку, область «1» почне рух униз після того, як її верхня частина зрівняється з верхньою частиною області «2».
Нижня частина сторінки каталогу
- Область №1 — стрічка «Корисні огляди»: виводить огляди товарів, що стосуються поточного розділу.
- Область №2 — стрічка «Ви нещодавно дивилися»: вміст і функціонал збігаються з описаним у розділі «головна сторінка». Стрічка розміщується на всю ширину екрана.
- Область №3 — SEO-текст: розміщується після стрічки «Ви нещодавно дивилися», формується за шаблоном для кожного розділу або може задаватися для кожного розділу індивідуально.
- Нижній блок «footer» — вміст і функціонал збігаються з описаним у розділі «головна сторінка».
6. Спливаючий кошик
Макет описаний окремо — див. «макети сторінок» — «Кошик». Після натискання на кнопку «Купити» на будь-якій сторінці, де є можливість купити товар (каталог товарів, детальна сторінка товару тощо), користувачеві показується «спливаючий кошик».
У кошику відображаються:
- Товари та комплекти, відібрані для покупок.
- Спеціально виділяються «акційні пропозиції» — комплекти: такі товари не можна видалити окремо, видалення відбувається повністю всього комплекту.
- Посилання «перейти до оформлення» — користувач потрапляє на «Крок №1» оформлення замовлення.
- «Купити в 1 клік» — користувач вводить номер телефону, після чого в системі формується замовлення з віртуальним користувачем (якщо поточний не був авторизований).
- «Продовжити покупки» — посилання повертає користувача на попереднє місце.
Докладний опис формування та правил роботи цього функціоналу наведено в розділі «детальна сторінка товару».
7. Як користуватися цим шаблоном
Наведений документ — робочий каркас, а не текст для галочки. Якщо скласти ТЗ на його основі, більшість питань, які зазвичай виникають на етапі приймання, знімаються ще до старту розробки: усі учасники однаково розуміють терміни, знають нумерацію областей, бачать правила роботи фільтра, знижок і купонів.
