Пропуск шагов

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

Условное пропускание шагов

Каждый шаг в Shepherd.js определяется объектом с ключевыми параметрами: id, text, attachTo, buttons и другими. Для управления пропуском шагов можно использовать опцию when или программно контролировать навигацию через события before-show и show.

Пример условного пропуска:

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

tour.addStep({
  id: 'step-1',
  text: 'Первый шаг',
  buttons: [
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});

tour.addStep({
  id: 'step-2',
  text: 'Второй шаг (может быть пропущен)',
  when: {
    show: () => {
      if (!userHasCompletedAction) {
        tour.next(); // автоматический переход к следующему шагу
      }
    }
  },
  buttons: [
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});

tour.addStep({
  id: 'step-3',
  text: 'Третий шаг после возможного пропуска',
  buttons: [
    {
      text: 'Завершить',
      action: tour.complete
    }
  ]
});

tour.start();

В данном примере шаг с id: 'step-2' автоматически пропускается, если условие !userHasCompletedAction выполняется. Это позволяет динамически управлять логикой тура.

Программное управление шагами

Shepherd.js предоставляет методы next(), back(), show() и cancel(), которые позволяют гибко контролировать последовательность шагов. Для пропуска можно вызвать next() сразу после проверки условий:

tour.on('show', function(step) {
  if (step.id === 'step-2' && shouldSkipStepTwo) {
    tour.next(); // пропуск текущего шага
  }
});

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

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

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

if (userIsAdmin) {
  tour.addStep({
    id: 'admin-step',
    text: 'Шаг для администратора',
    buttons: [
      { text: 'Далее', action: tour.next }
    ]
  });
}

Шаги, которые не добавлены в тур, автоматически не будут показаны, что по сути является пропуском.

Использование advanceOn

С помощью параметра advanceOn можно автоматически переходить к следующему шагу при наступлении определённого события, что удобно для пропуска шагов, если пользователь выполняет нужное действие вне тура:

tour.addStep({
  id: 'step-optional',
  text: 'Шаг можно пропустить',
  advanceOn: {
    selector: '.action-button',
    event: 'click'
  },
  buttons: [
    { text: 'Пропустить', action: tour.next }
  ]
});

advanceOn позволяет автоматически срабатывать на пользовательские действия и пропускать шаг без ручного клика на кнопки тура.

Обработка последовательности с ветвлением

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

const steps = [
  { id: 'step-1', text: 'Шаг 1' },
  { id: 'step-2', text: 'Шаг 2', condition: () => userHasCompletedAction },
  { id: 'step-3', text: 'Шаг 3' }
];

steps.forEach(step => {
  if (!step.condition || step.condition()) {
    tour.addStep({
      id: step.id,
      text: step.text,
      buttons: [{ text: 'Далее', action: tour.next }]
    });
  }
});

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

Применение в реальных сценариях

  • Пропуск обучающих шагов для пользователей, которые уже выполнили действия ранее.
  • Динамическое формирование тура в зависимости от прав пользователя (например, админ видит дополнительные шаги).
  • Автоматическое продвижение через шаги при выполнении внешних событий, без вмешательства пользователя.
  • Создание адаптивных туров для SPA, где элементы страницы загружаются асинхронно.

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

Оглавление