Сайти, на яких представлені певні події, мають власні секрети юзабіліті. Серед порад для створення гарного сайту події є порада про так звані «що, де, коли». Згідно з нею, дата, час, місце та основна тематика події повинні бути чітко вказані на видному місці сайту.
Багато сайтів подій також містять розклади, адже складаються з ряду підподій (наприклад, лекцій в межах однієї конференції). Саме розклади подій, дата і час будуть сьогодні в центрі нашої уваги.
Подібні опції повинні працювати з максимальною зручністю для користувачів та редакторів. На щастя, для цих цілей, як і для інших, є корисні модулі. Великий вибір їх — одна з численних причин побудувати сайт події на Друпалі. У цьому пості ми покажемо, як новий модуль Smart Date у Drupal 8 допомагає будувати гнучні розклади.
Зручні розклади подій: які вони?
Тож давайте поговоримо, якими в ідеалі повинні бути можливості сайту щодо розкладів, дати і часу подій. Що цінують у них користувачі і редактори?
- Користувачі очікують, щоб було ясно, коли подія починається і як довго триває. їЇ розклад повинен бути чітким. Ця інформація має бути представлена в зручному форматі. Крім того, якщо на вашому сайті користувачі можуть додавати події, вони також очікують того самого, що й редактори (дивіться далі).
- Редактори розраховують, щоб можна було створювати і редагувати розклади, дату і час у пару кліків. Вони хочуть обирати бажаний формат і не прив’язуватися до дефолтних налаштувань сайту. Також вони очікують, щоб сайт «розумів» їх з одного кліка і робив частину роботи за них автоматично.
Модуль Smart Date для розкладів подій, дати і часу
Вищезгадані очікування легко втілює модуль Smart Date для Drupal 8. Він забезпечує інтуїтивно зрозумілий користувацький інтерфейс для точного керування датою і часом. Наприклад, ви можете:
- задавати тривалість події — і сайт автоматично додасть час завершення на основі часу старту
- задавати тривалість за замовчуванням, яка буду присвоюватись усім подіям (але в будь-який момент мати можливість її відредагувати)
- задавати кілька варіантів тривалості подій, щоб редактори швидко між ними обирали — і вони будуть відображатися при створенні події
- створювати події з тривалістю «весь день» або з нульовою тривалістю
- відображати усе в потрібних вам форматах згідно з будь-якими культурними та мовними вподобаннями
Творець модуля Мартін Андерсон-Клац (@mandclu) написав у блозі, що він прагнув додати Друпала такої ж легкості у використанні, яка притаманна відомим календарям від Google, Apple та Microsoft. Тож модуль втілює найкращі практики від цих рішень.
Створення розкладів подій за допомогою Drupal-модуля Smart Date
Увімкнення модуля і створення полів
Перш ніж перейти до створення розкладу події, нам потрібно встановити модуль Smart Date. Після встановлення і увімкнення модуля з’являється новий тип поля. На додачу до дефолтного “Date” тепер є “Smart Date Range”. Поле можна додавати до контент-типів або інших типів сутностей. У нашому випадку, це буде контент-тип “Event”.
Створення розкладу події
Наша конференція міститиме декілька лекцій. Є багато різних варіантів створення цього, тож давайте оберемо дуже простенький для швидкої демонстрації.
Припустимо, в нашій події є 3 лекції. Для кожної ми додамо поле з назвою, картинкою і, звісно, датою і часом “Smart date range” (з тривалістю 1 година за замовчуванням) у контент-тип “Event”. Можна змінити порядок полів у вкладці “Manage display”, а також показати або сховати їхні найменування.
Щоб у наших редакторів був готовий шаблон для створення і редагування розкладів подій, організовуємо поля на вкладці “Manage form display” так, щоб вони були погруповані навколо конкретної лекції. І ось як виглядатиме процес створення подій (з продовженням до лекції номер 3).
І ось як розклад події виглядатиме на сайті.
Створення лейауту розкладу події
Наш розклад подій міг би мати кращу будову. Для цього використаємо вбудований в Drupal 8 модуль Layout Builder. А саме:
- увімкнемо модуль
- поставимо галочку на “Use Layout Builder” у вкладці “Manage Display” контент-типу
- клікнемо “Manage Layout”
- клікнемо “Add Section” і додамо 3 секції (для наших 3 лекцій) з трьома колонками для кожної (для назв, часу і картинок)
- всередині кожної секції “Add block”, знайдемо в списку у правому сайдбарі відповідні поля і перетягнемо їх у секції, одночасто форматуюччи і перейменовуючи за нашим бажанням
Наш розклад подій готовий. Але, звісно, це просто нарис, а на реальному проекті він виглядатиме інакше.
Кілька слів про форматування дати і часу
Ви могли поміттити, що ми використали різні варіанти для показу дати і часу лекції (в одному з них — лише час). Це досягається простим форматуванням.
Кожне поле “Smart date” на вкладці “Manage display” контент-типу має опцію вибору формату (Plain Text, Default і Custom). Якщо обрати формат “Default”, коліщатко навпроти нього дасть обрати між опціями: Compact, Date Only, Default, Time only. Це також доступно при форматуванні поля, якщо використовуєте Layout Builder.
Більш точне форматування кожного з форматів можливе у Configuration — Metadata — Regional and language. Для цього модуль використовує PHP-токени дати.
Створіть або оптимізуйте сайт події разом із нами!
Вищезгаданий приклад — лише дуже просте схематичне рішення для розкладу подій. Це виглядатиме інакше на вашому сайті, адже наша команда з веб-розробки створить його з урахуванням ваших побажань, додасть гарне оформлення згідно з особивостями дизайну. Тож якщо ви бажаєте:
- створити сайт події з розкладом
- додати розклад вашої події
- оптимізувати юзабіліті існуючого сайту за допомогою чудових модулів
Зверніться до нашої компанії з Drupal-розробки. І нехай розклади подій на вашому сайті стануть взірцем зручності!