Инициализация объекта Tour

Объект Tour является центральной сущностью Shepherd.js, управляющей последовательностью шагов, их поведением и визуальным отображением. Для создания экземпляра Tour используется конструктор Shepherd.Tour, которому передается объект с настройками.

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

Основные параметры конструктора

  1. defaultStepOptions – объект, содержащий общие настройки для всех шагов. Позволяет избежать дублирования кода при создании нескольких шагов. Основные опции внутри:

    • classes – CSS-классы, применяемые ко всем шагам. Например, shepherd-theme-arrows или кастомные классы для стилизации.

    • scrollTo – автоматически прокручивает страницу к элементу, к которому привязан шаг (true или объект с настройками).

    • cancelIcon – настройка кнопки закрытия шага:

      cancelIcon: {
  enabled: true, // отображать крестик
  label: 'Закрыть', // текст подсказки
}

    • attachTo – параметры привязки шага к элементу:

      attachTo: {
  element: '.my-button', // селектор элемента
  on: 'bottom' // сторона, на которой появляется шаг
}

    • buttons – массив кнопок для шага с их действиями (text, action, classes).

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

  3. tourName – опциональное название тура. Может использоваться для идентификации при хранении состояния или локальном сохранении прогресса пользователя.

Методы объекта Tour

После создания экземпляра Tour доступен набор методов для управления и взаимодействия с туром:

  • addStep(stepOptions) – добавляет шаг к туру. Параметр stepOptions содержит конфигурацию конкретного шага:

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

  • start() – запускает тур с первого шага.

  • next() / back() – переход к следующему или предыдущему шагу.

  • cancel() – завершает тур и скрывает все шаги.

  • complete() – помечает тур как завершенный, срабатывают события complete.

  • getCurrentStep() – возвращает текущий шаг для получения его состояния или вызова методов шага.

События объекта Tour

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

  • show – срабатывает при отображении шага.
  • hide – при скрытии шага.
  • complete – после завершения тура.
  • cancel – при отмене тура.
  • active / inactive – для отслеживания активности тура.

Пример подписки на событие:

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

Практические рекомендации

  • Использовать defaultStepOptions для единообразного внешнего вида всех шагов.
  • Определять attachTo для каждого шага, чтобы подсказка правильно позиционировалась.
  • Подключать useModalOverlay при необходимости фокусировки пользователя на текущем шаге.
  • Создавать отдельные методы для управления шагами через tour.next(), чтобы упрощать навигацию внутри событий кнопок.

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

Оглавление