Методы next и back

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

Метод next

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

Синтаксис:

tour.next();

Пример использования:

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    scrollTo: true,
  }
});

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

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

tour.start();

В этом примере кнопка «Далее» на каждом шаге вызывает метод next, обеспечивая переход к следующему шагу.

Особенности метода next:

  • Если текущий шаг является последним, метод завершает тур и вызывает событие complete.
  • Можно использовать next как часть пользовательской функции, что позволяет добавлять логику перед переходом, например, проверку заполненности формы:
buttons: [
  {
    text: 'Далее',
    action() {
      if (validateForm()) {
        tour.next();
      } else {
        alert('Заполните все поля');
      }
    }
  }
]

Метод back

Метод back выполняет обратное действие — возвращает пользователя на предыдущий шаг. Он незаменим в сценариях, где требуется возможность пересмотреть или изменить предыдущую информацию.

Синтаксис:

tour.back();

Пример использования:

tour.addStep({
  id: 'step-2',
  text: 'Это второй шаг',
  buttons: [
    {
      text: 'Назад',
      action: tour.back
    },
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});

Особенности метода back:

  • Если текущий шаг является первым, метод не вызывает ошибки, но предыдущего шага нет.
  • Метод удобно использовать вместе с условными переходами, например, если нужно вернуться на шаг при неправильном выборе:
buttons: [
  {
    text: 'Назад',
    action() {
      if (shouldGoBack()) {
        tour.back();
      }
    }
  }
]

Сценарии комбинированного использования

  1. Линейный тур с кнопками «Далее» и «Назад»

    Каждый шаг имеет два действия: next для продвижения и back для возврата:

    tour.addStep({
  id: 'step-3',
  text: 'Третий шаг',
  buttons: [
    { text: 'Назад', action: tour.back },
    { text: 'Далее', action: tour.next }
  ]
});

  2. Автоматический переход через шаги

    Можно автоматически продвигать пользователя через шаги с задержкой:

    tour.addStep({
  id: 'auto-step',
  text: 'Этот шаг пропустится через 3 секунды',
  when: {
    show() {
      setTimeout(() => tour.next(), 3000);
    }
  }
});

  3. Условный возврат на предыдущий шаг

    В сложных интерактивных формах метод back используется для корректировки введённых данных:

    buttons: [
  {
    text: 'Проверить и вернуться',
    action() {
      if (!isValidData()) {
        tour.back();
      }
    }
  }
]

Взаимодействие с событиями тура

Методы next и back интегрируются с системой событий Shepherd.js:

  • show — срабатывает при отображении шага
  • hide — при скрытии шага
  • complete — при завершении тура

Пример подписки на события при использовании next и back:

tour.on('show', (step) => console.log(`Показан шаг: ${step.id}`));
tour.on('complete', () => console.log('Тур завершён'));

Это позволяет отслеживать динамику передвижения пользователя по шагам и реагировать на неё.

Рекомендации по использованию

  • Использовать методы next и back через объект тура, а не через прямые ссылки на шаги.
  • Для более сложных маршрутов можно комбинировать next и back с пользовательскими функциями, проверками условий и событиями.
  • Обеспечивать корректное завершение тура, проверяя, что next на последнем шаге вызывает complete, а back на первом шаге не ломает логику.

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

Оглавление