Обработка незавершенных туров

Shepherd.js предоставляет гибкий механизм управления интерактивными турами, включая возможность обработки незавершенных туров. Незавершенный тур — это тур, который был запущен пользователем, но по каким-либо причинам не был завершен полностью (например, пользователь закрыл страницу, покинул приложение или пропустил шаги). Для корректной работы интерфейса важно учитывать такие ситуации, чтобы тур можно было возобновить, сохранить прогресс или корректно очистить состояние.

Хранение состояния текущего тура

Shepherd.js не хранит автоматически прогресс туров между сессиями. Чтобы управлять незавершенными турами, необходимо самостоятельно сохранять информацию о текущем шаге и идентификаторе тура. Обычно это делается через локальное хранилище браузера (localStorage) или через куки.

Пример сохранения состояния тура:

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.on('show', function() {
  localStorage.setItem('currentTourStep', tour.getCurrentStep().id);
});

tour.on('complete', function() {
  localStorage.removeItem('currentTourStep');
});

tour.on('cancel', function() {
  localStorage.removeItem('currentTourStep');
});

tour.start();

В этом примере при показе каждого шага в localStorage сохраняется идентификатор текущего шага. При завершении или отмене тура информация удаляется, предотвращая некорректное восстановление.

Восстановление незавершенного тура

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

Пример восстановления тура:

const savedStepId = localStorage.getItem('currentTourStep');

if (savedStepId) {
  tour.start(); // запускаем тур
  tour.show(savedStepId); // сразу показываем сохраненный шаг
} else {
  tour.start(); // если сохраненного шага нет, начинаем с начала
}

Метод tour.show(stepId) позволяет указать конкретный шаг, с которого должен продолжиться тур, что делает процесс восстановления простым и надежным.

Обработка отмены и выхода пользователя

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

  • cancel — срабатывает, когда пользователь явно закрывает тур через иконку отмены или кнопку.
  • complete — срабатывает при успешном завершении всех шагов тура.

Использование этих событий позволяет гарантировать очистку сохраненного состояния:

tour.on('cancel', () => {
  console.log('Тур был отменен пользователем');
  localStorage.removeItem('currentTourStep');
});

tour.on('complete', () => {
  console.log('Тур завершен полностью');
  localStorage.removeItem('currentTourStep');
});

Автоматическое завершение туров при закрытии страницы

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

window.addEventListener('beforeunload', () => {
  const currentStep = tour.getCurrentStep();
  if (currentStep) {
    localStorage.setItem('currentTourStep', currentStep.id);
  }
});

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

Советы по проектированию интерактивных туров

  1. Разбивка на короткие шаги: длинные шаги сложнее восстанавливать и тестировать.
  2. Явное управление сохранением состояния: полагаться на внутреннее состояние Shepherd.js для восстановления туров нельзя, лучше использовать localStorage или серверное API.
  3. Обновление шагов: при изменении шагов тура важно учитывать несовпадение сохраненного шага с текущей конфигурацией, например, проверяя наличие шага по id.
  4. Управление повторным запуском: если тур был завершен полностью, не следует восстанавливать его автоматически.

Пример интеграции с сервером

Для более сложных приложений можно сохранять прогресс тура на сервере через AJAX-запросы:

tour.on('show', function() {
  const stepId = tour.getCurrentStep().id;
  fetch('/api/save-tour', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ stepId })
  });
});

tour.on('complete', function() {
  fetch('/api/complete-tour', { method: 'POST' });
});

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

Резюме управления незавершенными турами

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

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

Оглавление