Зручні розклади подій з модулем Smart Date в Drupal 8

16.12.2019
Зручні розклади подій з модулем Smart Date в Drupal 8
Автор:

Сайти, на яких представлені певні події, мають власні секрети юзабіліті. Серед порад для створення гарного сайту події є порада про так звані «що, де, коли». Згідно з нею, дата, час, місце та основна тематика події повинні бути чітко вказані на видному місці сайту.Event website example — DrupalCon

Багато сайтів подій також містять розклади, адже складаються з ряду підподій (наприклад, лекцій в межах однієї конференції). Саме розклади подій, дата і час будуть сьогодні в центрі нашої уваги.

Event schedule example — DrupalCon

Подібні опції повинні працювати з максимальною зручністю для користувачів та редакторів. На щастя, для цих цілей, як і для інших, є корисні модулі. Великий вибір їх — одна з численних причин побудувати сайт події на Друпалі. У цьому пості ми покажемо, як новий модуль Smart Date у Drupal 8 допомагає будувати гнучні розклади.

Зручні розклади подій: які вони?

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

  • Користувачі очікують, щоб було ясно, коли подія починається і як довго триває. їЇ розклад повинен бути чітким. Ця інформація має бути представлена в зручному форматі. Крім того, якщо на вашому сайті користувачі можуть додавати події, вони також очікують того самого, що й редактори (дивіться далі).
  • Редактори розраховують, щоб можна було створювати і редагувати розклади, дату і час у пару кліків. Вони хочуть обирати бажаний формат і не прив’язуватися до дефолтних налаштувань сайту. Також вони очікують, щоб сайт «розумів» їх з одного кліка і робив частину роботи за них автоматично.

Модуль Smart Date для розкладів подій, дати і часу

Вищезгадані очікування легко втілює модуль Smart Date для Drupal 8. Він забезпечує інтуїтивно зрозумілий користувацький інтерфейс для точного керування датою і часом. Наприклад, ви можете:

  • задавати тривалість події — і сайт автоматично додасть час завершення на основі часу старту
  • задавати тривалість за замовчуванням, яка буду присвоюватись усім подіям (але в будь-який момент мати можливість її відредагувати)
  • задавати кілька варіантів тривалості подій, щоб редактори швидко між ними обирали — і вони будуть відображатися при створенні події

Event date and time with Smart Date module in Drupal 8

  • створювати події з тривалістю «весь день» або з нульовою тривалістю
  • відображати усе в потрібних вам форматах згідно з будь-якими культурними та мовними вподобаннями

Various date and time formats with the Smart Date module in Drupal 8

Творець модуля Мартін Андерсон-Клац (@mandclu) написав у блозі, що він прагнув додати Друпала такої ж легкості у використанні, яка притаманна відомим календарям від Google, Apple та Microsoft. Тож модуль втілює найкращі практики від цих рішень.

Створення розкладів подій за допомогою Drupal-модуля Smart Date

Увімкнення модуля і створення полів

Перш ніж перейти до створення розкладу події, нам потрібно встановити модуль Smart Date. Після встановлення і увімкнення модуля з’являється новий тип поля. На додачу до дефолтного “Date” тепер є “Smart Date Range”. Поле можна додавати до контент-типів або інших типів сутностей. У нашому випадку, це буде контент-тип “Event”.

Enabling the Smart Date module in Drupal 8

Adding a smart date field with the Smart Date module in Drupal 8

Створення розкладу події

Наша конференція міститиме декілька лекцій. Є багато різних варіантів створення цього, тож давайте оберемо дуже простенький для швидкої демонстрації.

Припустимо, в нашій події є 3 лекції. Для кожної ми додамо поле з назвою, картинкою і, звісно, датою і часом “Smart date range” (з тривалістю 1 година за замовчуванням) у контент-тип “Event”. Можна змінити порядок полів у вкладці “Manage display”, а також показати або сховати їхні найменування.

Creating an event schedule in Drupal 8

Щоб у наших редакторів був готовий шаблон для створення і редагування розкладів подій, організовуємо поля на вкладці “Manage form display” так, щоб вони були погруповані навколо конкретної лекції. І ось як виглядатиме процес створення подій (з продовженням до лекції номер 3).

Admin template for adding event schedules with the Smart Date module in Drupal 8

І ось як розклад події виглядатиме на сайті.

Event schedule in Drupal 8

Створення лейауту розкладу події

Наш розклад подій міг би мати кращу будову. Для цього використаємо вбудований в Drupal 8 модуль Layout Builder. А саме:

  • увімкнемо модуль
  • поставимо галочку на “Use Layout Builder” у вкладці “Manage Display” контент-типу
  • клікнемо “Manage Layout”
  • клікнемо “Add Section” і додамо 3 секції (для наших 3 лекцій) з трьома колонками для кожної (для назв, часу і картинок)
  • всередині кожної секції “Add block”, знайдемо в списку у правому сайдбарі відповідні поля і перетягнемо їх у секції, одночасто форматуюччи і перейменовуючи за нашим бажанням

Creating an event schedule with Drupal 8's Layout Builder

Наш розклад подій готовий. Але, звісно, це просто нарис, а на реальному проекті він виглядатиме інакше.

Event schedule built with Drupal 8's Layout Builder

Кілька слів про форматування дати і часу

Ви могли поміттити, що ми використали різні варіанти для показу дати і часу лекції (в одному з них — лише час). Це досягається простим форматуванням.

Кожне поле “Smart date” на вкладці “Manage display” контент-типу має опцію вибору формату (Plain Text, Default і Custom). Якщо обрати формат “Default”, коліщатко навпроти нього дасть обрати між опціями: Compact, Date Only, Default, Time only. Це також доступно при форматуванні поля, якщо використовуєте Layout Builder.

Більш точне форматування кожного з форматів можливе у Configuration — Metadata — Regional and language. Для цього модуль використовує PHP-токени дати.

Date and time formatting with the Smart Date module in Drupal 8

Створіть або оптимізуйте сайт події разом із нами!

Вищезгаданий приклад — лише дуже просте схематичне рішення для розкладу подій. Це виглядатиме інакше на вашому сайті, адже наша команда з веб-розробки створить його з урахуванням ваших побажань, додасть гарне оформлення згідно з особивостями дизайну. Тож якщо ви бажаєте:

  • створити сайт події з розкладом
  • додати розклад вашої події
  • оптимізувати юзабіліті існуючого сайту за допомогою чудових модулів

Зверніться до нашої компанії з Drupal-розробки. І нехай розклади подій на вашому сайті стануть взірцем зручності!

Голосів: 1 Рейтинг: 5

Також по темі

1

Сьогодні ми розповімо, як підвищити юзабіліті кошика за допомогою одного чудового модуля. Він входить в добірку...

3

Зробимо невеликий огляд того, як будуються профілі користувачів у Drupal 8. Почнемо з основ і перейдемо до цікавих можливостей з модулями Media Library і Layout Builder.

4

Якщо ви хочете, щоб відвідувачі осіли на вашому сайті і зареєструвалися, вам обов'язково потрібен спеціальний інструмент, щоб полегшити і прискорити процес реєстрації та входу. На щастя, у Drupal...

5

Систематизувати процеси модерації контенту — необхідність для багатьох сайтів. З Drupal 8 цього легко досягти. Тож запрошуємо поглянути, як налаштовуються процеси модерації контенту в Drupal...

Subscribe to our blog updates