Добавление шагов на лету

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

Создание тура и базовой структуры

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

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    cancelIcon: {
      enabled: true
    },
    classes: 'shepherd-theme-arrows',
    scrollTo: { beh * avior: 'smooth', block: 'center' }
  }
});

defaultStepOptions задает параметры, которые применяются ко всем шагам по умолчанию.
cancelIcon позволяет пользователю закрывать шаги.
classes определяет визуальную тему.
scrollTo отвечает за плавную прокрутку к целевому элементу.

Добавление шагов после инициализации тура

Шаги можно добавлять после создания экземпляра тура с помощью метода addStep:

tour.addStep({
  id: 'dynamic-step-1',
  text: 'Этот шаг добавлен динамически',
  attachTo: {
    element: '.dynamic-element',
    on: 'bottom'
  },
  buttons: [
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});

id уникально идентифицирует шаг.
attachTo указывает на элемент и позицию шага относительно него.
buttons определяет кнопки навигации для шага.

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

Использование условий для добавления шагов

Иногда шаги должны отображаться только при определенных условиях:

if (document.querySelector('.feature-available')) {
  tour.addStep({
    id: 'feature-step',
    text: 'Этот шаг показывается только если доступна функция',
    attachTo: { element: '.feature-available', on: 'right' },
    buttons: [
      { text: 'Закрыть', action: tour.cancel }
    ]
  });
}

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

Асинхронное добавление шагов

Если контент загружается динамически (например, через fetch или API), шаги можно создавать после получения данных:

fetch('/api/getTourSteps')
  .then(response => response.json())
  .then(steps => {
    steps.forEach(step => {
      tour.addStep({
        id: step.id,
        text: step.text,
        attachTo: { element: step.selector, on: step.position },
        buttons: [
          { text: 'Далее', action: tour.next }
        ]
      });
    });
  });

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

Вставка шагов между существующими шагами

Shepherd.js поддерживает метод steps для работы с массивом шагов. Чтобы вставить новый шаг между существующими, используется массив:

const newStep = {
  id: 'inserted-step',
  text: 'Этот шаг вставлен между другими',
  attachTo: { element: '.insert-here', on: 'top' },
  buttons: [{ text: 'Далее', action: tour.next }]
};

tour.steps.splice(1, 0, newStep);

splice(1, 0, newStep) вставляет шаг на вторую позицию (индекс 1).
После изменения массива шагов последовательность тура автоматически обновляется при следующем вызове tour.start().

Обновление существующих шагов

Помимо добавления, Shepherd.js позволяет модифицировать уже добавленные шаги:

const step = tour.getById('dynamic-step-1');
if (step) {
  step.updateStepOptions({
    text: 'Текст шага обновлен динамически',
    buttons: [
      { text: 'Назад', action: tour.back },
      { text: 'Далее', action: tour.next }
    ]
  });
}

Метод updateStepOptions позволяет изменить текст, кнопки, позицию и другие параметры.
Это полезно для ситуаций, когда шаги зависят от действий пользователя.

Автоматическая навигация после динамического добавления

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

tour.addStep({
  id: 'next-step',
  text: 'Следующий динамический шаг',
  attachTo: { element: '.next-element', on: 'bottom' },
  buttons: [{ text: 'Закрыть', action: tour.next }]
});

tour.show('next-step');

tour.show(id) позволяет открыть конкретный шаг без необходимости перезапуска всего тура.