Розробка сайтів і подальша технічна підтримка — наша основна спеціалізація, тому нас часто просять порахувати вартість проєкту без технічного завдання або просто показати, як воно має виглядати. Саме тому ми підготували й виклали у відкритий доступ типовий приклад повноформатного ТЗ на створення інтернет-магазину електроніки та побутової техніки — щоб на його основі клієнти могли складати власні завдання для своїх проєктів. Це друга частина: детальна сторінка товару, порівняння, кошик, оформлення замовлення, статуси, особистий розділ покупця та формат обміну даними.
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.
- Класифікатор — містить інформацію для зв'язування пропозицій за ІД із каталогом товарів.
- ПакетПредложений — основна інформація про ціни й залишки.
- ТипыЦен — описує всі типи цін, що вивантажуються на сайт: Ид, Наименование (тип ціни), Валюта, Налог.
- Предложения — товарні пропозиції (ціна, залишки): Ид, ШтрихКод, Артикул, Наименование.
- Цены — може бути кілька, наприклад роздрібна, акційна, дилерська тощо: ИдТипаЦены, ЦенаЗаЕдиницу, Валюта, Единица.
- Количество — кількість на залишках.
