Модуль тура — создайте свой собственный тур для пользовательской темы в Drupal 9

Опубликовано: 2021-09-28

Что может быть лучше экскурсии в незнакомом месте?

Пользовательский опыт постепенно становится центром внимания каждого бизнеса. Предложение опыта, который помогает указать вашему пользователю правильное направление посредством взаимодействия с пользовательским интерфейсом, может изменить правила игры для любого бизнеса. В этой статье мы собираемся изучить модуль Tour для Drupal 9. С модулем Tour вы можете не только совершить ознакомительный тур по существующему представлению, но и интегрировать модуль Tour в свою пользовательскую тему (которую мы подробно объясним позже).

Модуль тура

Модуль тура по Drupal 9

Вы захотите внедрить модуль Drupal 9 Tour, если хотите, чтобы ваш пользователь больше сосредоточился на определенных компонентах вашего сайта, которые легко остаются незамеченными. Это также здорово, когда вы хотите провести своего пользователя через управляемый рабочий процесс. Модуль Tour включен в ядро ​​Drupal, начиная с Drupal 8.

При включении модуль предлагает экскурсии по интерфейсу сайта с помощью всплывающих подсказок. Чтобы совершить тур, вы можете отредактировать существующий вид в

 /admin/structure/views

и нажмите на ссылку "? Тур" в правом верхнем углу панели администратора. Вы также можете посетить

 /admin/structure/views/view/frontpage?tour=1

для автоматического запуска тура Views.

Настройка просмотра

В Drupal 8 модуль Tour построен на плагине Joyride jQuery, который устарел в Drupal 9.2 с Shepherd.js.

У нас есть еще один способ добавить тур по модулям и интерфейсу администратора через файл YML. Здесь я добавляю тур в пользовательскую тему.

Что такое Shepherd.js?

Shepherd — это библиотека JavaScript, которая позволяет легко создавать экскурсии по вашему приложению или веб-сайту. Он использует Popper.js, еще одну библиотеку с открытым исходным кодом, для отображения диалогов для каждого «шага» тура.

Интеграция модуля Tour в пользовательскую тему

В Drupal 9 у нас есть несколько типов страниц контента для интеграции:

  1. Страница тур
  2. Узловой тур
  3. Посмотреть тур и т.д.

Давайте предположим, что у вас есть страница информационной панели, на которой есть несколько карточек для отображения со всеми графиками и значениями, как на изображении, показанном ниже. Здесь тур позволит легко провести пользователей по карточкам и показать некоторые детали.

Дизайн приборной панели

Кредиты изображений: Дизайн приборной панели

Создание библиотеки тура по приборной панели

Требования к туру:

Экскурсия необходима для следующих предметов/карт

  1. Фитнес-активность
  2. Новые курсы
  3. Создать новый
  4. Сегодня
  5. Активный участник
  6. Ежемесячный обзор
  7. Точки
  8. Оплатить сейчас (кнопка действия)

Теперь у нас есть в общей сложности 8 шагов. В этом примере я создам несколько шагов для начала, и тот же шаблон будет продолжен для остальных карточек.

Давайте начнем.

Шаг 1. Создайте библиотеку туров на THEME.libraries.yml.

Я создаю пользовательскую библиотеку для тура по информационной панели, чтобы мы могли включить ее на страницу/шаблон информационной панели. т.е. панель инструментов.html.twig

Библиотеки тем

THEME.libraries.yml

Шаг 2. Включите библиотеку обзоров панелей мониторинга на пользовательскую страницу панели мониторинга или в шаблон узла.

 {# In a Twig template we attach the library. #}
 {{ attach_library('THEME/dashboard-tour') }}​

Теперь мы включили зависимости тура в нашу тему.

Шаг 3: Начало работы с Shepherd.js

Для быстрого старта вы можете получить пример кода здесь https://shepherdjs.dev/

Инициализация пастыря

В Dashboard.js добавьте код инициализации, как показано ниже.

 const tour = new Shepherd.Tour({ defaultStepOptions: { cancelIcon: { enabled: true }, classes: 'shadow-md bg-purple-dark', scrollTo: { behavior: 'smooth', block: 'center' } }, useModalOverlay: true, });

приборная панель.js

Опция defaultStepOptions позволяет вам указать любую опцию, которая должна применяться ко всем шагам этого тура по умолчанию.

useModalOverlay — еще одна опция, которую вы можете добавить. Вы можете проверить больше вариантов тура здесь.

Создание вводных шагов

 tour.addStep({ id: 'introduction', text: 'Welcome to Our Dashboard', classes: 'example-step-extra-class', buttons: [ { classes: 'btn btn-primary', text: 'Next', action: tour.next } ] });​

приборная панель.js

Это всплывающее окно приветственного тура, поэтому мы не назначаем какой-либо целевой элемент (например, класс или идентификатор). Это появится в виде всплывающего приветственного сообщения в центре страницы.

У нас есть больше методов тура, которые мы углубимся на следующем шаге.

Создание второго шага - фитнес-активность

 tour.addStep( { id: 'activity', text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti.', attachTo: { element: '.class-activity', on: 'bottom' }, classes: 'example-step-extra-class', buttons: [ { action() { return this.back(); }, classes: 'btn btn-primary', text: 'Back' }, { action() { return this.next(); }, classes: 'btn btn-primary', text: 'Next' } ] });

Тур Предоставляет множество методов. Давайте пойдем немного дальше в некоторых основных ВАРИАНТАХ ШАГА

  • id: строка, используемая в качестве идентификатора шага. Если идентификатор не передан, он будет сгенерирован.
  • text: Текст в теле шага. Это может быть один из трех типов:

◦ Строка HTML
◦ объект HTMLElement
◦ Функция , которая будет выполняться при построении шага. Он должен вернуть один из двух вариантов выше.

  • title: Название шага. Он становится h3 в верхней части шага.
  • attachTo: элемент, к которому должен быть присоединен шаг на странице. Объект с элементами свойств и так далее.

◦ элемент: строка селектора элемента или элемент DOM.
◦ on: Дополнительное направление для размещения всплывающей подсказки относительно элемента.

  • Возможные строковые значения: 'auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end' ', 'право', 'право-начало', 'право-конец', 'лево', 'лево-начало', 'левый конец'
Прикрепить к

Если вы не укажете attachTo , элемент появится в середине экрана.

  • cancelIcon Параметры значка отмены

◦ включено Должна ли отображаться отмена «✕» в заголовке шага?
◦ label Метка, которую нужно добавить для aria-label .

  • классы: строка дополнительных классов для добавления к элементу содержимого шага.
  • Кнопки: массив кнопок для добавления к шагу. Они будут отображаться в нижнем колонтитуле под основным текстом. Каждая кнопка в массиве является объектом формата:

◦ текст: HTML-текст кнопки.
◦ классы: дополнительные классы для применения к <a> .
◦ действие: функция, выполняемая при нажатии кнопки. Он автоматически привязывается к туру , с которым связан шаг, поэтому такие вещи, как this.next , будут работать внутри действия.

Это Следующее

Создание третьего шага: новые курсы

Чтобы сделать эту статью короткой, я не добавляю сюда дальнейшие шаги. Мы можем выполнить описанные выше шаги, чтобы создать столько шагов, сколько требуется здесь. После создания всех шагов мы, наконец, начнем тур.

Чтобы начать тур, просто вызовите start в своем экземпляре Tour:

 tour.start();

Ваше здоровье!! Теперь мы добавили тур для приборной панели.

Примечание. Пройдите и следуйте всем доступным методам, событиям и параметрам, чтобы получить более интерактивный тур Shepherd.