Туры с ветвлением

Shepherd.js предоставляет гибкий механизм создания интерактивных туров по интерфейсу, включая возможность ветвления — выбора разных маршрутов в зависимости от действий пользователя. Ветвление позволяет создавать динамические сценарии, где следующий шаг определяется контекстом или выбором пользователя.

Создание базового тура

Тур в Shepherd.js создается через объект Shepherd.Tour. Основные параметры:

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: 'shepherd-theme-arrows',
    scrollTo: true
  }
});

Каждый шаг добавляется с помощью метода addStep, где указываются заголовок, текст, элементы интерфейса для прикрепления и кнопки навигации.

tour.addStep({
  id: 'step-1',
  text: 'Это первый шаг',
  attachTo: {
    element: '#start-button',
    on: 'bottom'
  },
  buttons: [
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});

Организация ветвления

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

tour.addStep({
  id: 'step-choice',
  text: 'Выберите вариант:',
  attachTo: { element: '#choice-container', on: 'top' },
  buttons: [
    {
      text: 'Вариант A',
      action: () => tour.show('step-a')
    },
    {
      text: 'Вариант B',
      action: () => tour.show('step-b')
    }
  ]
});

tour.addStep({
  id: 'step-a',
  text: 'Вы выбрали вариант A',
  attachTo: { element: '#feature-a', on: 'right' },
  buttons: [{ text: 'Далее', action: tour.next }]
});

tour.addStep({
  id: 'step-b',
  text: 'Вы выбрали вариант B',
  attachTo: { element: '#feature-b', on: 'left' },
  buttons: [{ text: 'Далее', action: tour.next }]
});

В этом примере шаг step-choice служит точкой ветвления. В зависимости от нажатой кнопки тур направляется либо на step-a, либо на step-b.

Управление сложными ветвлениями

Для более сложных сценариев можно использовать промежуточные функции и условия:

tour.addStep({
  id: 'step-decision',
  text: 'Хотите продолжить с настройками или пропустить?',
  attachTo: { element: '#settings-toggle', on: 'bottom' },
  buttons: [
    {
      text: 'Настройки',
      action: () => {
        if (userHasPreferences) {
          tour.show('step-custom');
        } else {
          tour.show('step-default');
        }
      }
    },
    {
      text: 'Пропустить',
      action: () => tour.show('step-end')
    }
  ]
});

Использование условий позволяет динамически определять следующий шаг, обеспечивая гибкость и индивидуализацию тура.

Работа с событиями для ветвления

Shepherd.js поддерживает события на уровне тура и отдельных шагов. Это позволяет реагировать на пользовательские действия без жесткой привязки к кнопкам:

tour.on('complete', () => {
  console.log('Тур завершен');
});

tour.on('show', (step) => {
  if (step.id === 'step-a' && someCondition) {
    tour.show('step-c');
  }
});

События show и complete дают возможность программно изменять маршрут тура, создавая условные переходы между шагами.

Совмещение ветвлений и функций обратного вызова

Для сложных интерактивных приложений можно комбинировать ветвление с колбэками на кнопках:

tour.addStep({
  id: 'step-final',
  text: 'Вы достигли финала',
  attachTo: { element: '#finish', on: 'top' },
  buttons: [
    {
      text: 'Сохранить выбор',
      action: () => {
        saveUserChoice();
        tour.complete();
      }
    },
    {
      text: 'Отмена',
      action: tour.cancel
    }
  ]
});

Это позволяет выполнять любые действия перед переходом на следующий шаг или завершением тура.

Рекомендации по проектированию ветвящихся туров

  • Идентификаторы шагов: использовать уникальные id, чтобы исключить коллизии при ветвлении.
  • Прозрачность маршрутов: документировать возможные пути тура для удобного сопровождения.
  • Минимизация повторов: общие шаги для разных ветвей можно создавать отдельно и показывать повторно через tour.show().
  • События и обратные вызовы: использовать их для динамических решений, когда следующий шаг зависит от состояния приложения.
  • Тестирование ветвлений: проверять все варианты сценариев, чтобы пользовательский опыт оставался гладким.

Интеграция с данными пользователя

Ветвящиеся туры особенно полезны при работе с персонализированным контентом:

if (userRole === 'admin') {
  tour.show('step-admin-dashboard');
} else {
  tour.show('step-user-dashboard');
}

Это позволяет направлять пользователя к шагам, релевантным его роли или предпочтениям, делая интерфейс интерактивным и адаптивным.

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

Оглавление