Strategy для навигации

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

Типы стратегий

В Shepherd.js стратегия задается через объект defaultStepOptions и методы класса Tour. Основные типы стратегии включают:

  1. Стандартная последовательная навигация В этом случае шаги тура выполняются линейно: пользователь всегда переходит к следующему шагу через кнопку «Next» или автоматически по завершении текущего шага. Настройка выглядит так:
const tour = new Shepherd.Tour({
  defaultStepOptions: {
    scrollTo: true,
    cancelIcon: {
      enabled: true
    }
  }
});

tour.addStep({
  id: 'step-1',
  text: 'Приветствие пользователя',
  attachTo: { element: '#welcome', on: 'bottom' },
  buttons: [
    { text: 'Далее', action: tour.next }
  ]
});
  1. Условная навигация Позволяет определить переходы в зависимости от состояния приложения или действий пользователя. Используется метод beforeShowPromise или кастомная логика кнопок:
tour.addStep({
  id: 'step-conditional',
  text: 'Выбор дальнейшего пути',
  attachTo: { element: '#menu', on: 'right' },
  buttons: [
    { 
      text: 'Продолжить путь A', 
      action: () => {
        if (userChoice === 'A') {
          tour.show('step-a');
        } else {
          tour.show('step-b');
        }
      } 
    }
  ]
});
  1. Асинхронная стратегия загрузки шагов Шаг может отображаться только после выполнения асинхронной операции, например, запроса данных с сервера. В beforeShowPromise возвращается промис:
tour.addStep({
  id: 'step-async',
  text: 'Загрузка данных...',
  attachTo: { element: '#data', on: 'top' },
  beforeShowPromise: () => fetch('/api/data')
    .then(response => response.json())
    .then(data => {
      document.querySelector('#data').textContent = data.message;
    })
});

Настройка переходов между шагами

Навигация между шагами может быть более тонкой:

  • Переход по событиям: можно привязать шаг к событию на элементе, например, клику по кнопке или завершению формы.
  • Пропуск шагов: шаги могут динамически добавляться или удаляться из тура в зависимости от состояния приложения.
  • Возврат к предыдущему шагу: метод tour.back() позволяет пользователю перемещаться назад, при этом стратегия может ограничивать количество возвратов.
buttons: [
  { text: 'Назад', action: tour.back },
  { text: 'Вперед', action: tour.next }
]

Управление видимостью и фокусом

Стратегия навигации тесно связана с управлением фокусом на DOM-элементы:

  • scrollTo: автоматически прокручивает страницу к элементу.
  • modalOverlay: блокирует взаимодействие с остальной частью интерфейса.
  • highlightClass: подсветка элементов, к которым привязан шаг.

Пример настройки фокуса на активный элемент:

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    scrollTo: { beh * avior: 'smooth', block: 'center' },
    highlightClass: 'highlight-step'
  }
});

Динамическое добавление шагов

Стратегия может включать динамическое формирование тура в зависимости от состояния приложения:

if (userHasFeatureX) {
  tour.addStep({
    id: 'feature-x-step',
    text: 'Объяснение функции X',
    attachTo: { element: '#feature-x', on: 'bottom' },
    buttons: [{ text: 'Далее', action: tour.next }]
  });
}

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

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

Можно создавать стратегии, которые реагируют на пользовательские данные или поведение:

  • Проверка завершения предыдущих шагов.
  • Переход к определенному шагу при определенном состоянии приложения.
  • Использование локального хранилища для запоминания пройденных шагов и выбора стратегии при повторном входе.
if (localStorage.getItem('tourCompleted')) {
  tour.start(false); // пропустить часть шагов
} else {
  tour.start();
}

Итоговая структура стратегии

Стратегия навигации в Shepherd.js формируется через комбинацию:

  • Настроек defaultStepOptions
  • Методов tour.next(), tour.back(), tour.show(stepId)
  • Асинхронных или условных функций beforeShowPromise
  • Динамического добавления и удаления шагов

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

Оглавление