Кнопка Complete

Кнопка Complete в библиотеке Shepherd.js завершает выполнение текущего тура. В отличие от кнопки перехода к следующему шагу (Next), она не просто перемещает пользователя дальше, а инициирует финализацию всей последовательности шагов с последующим вызовом соответствующих обработчиков.

Внутренне действие кнопки Complete связано с методом tour.complete(), который:

  • закрывает текущий шаг
  • завершает тур
  • вызывает события завершения (complete)

Базовое использование

Кнопка Complete добавляется в конфигурацию шага через массив buttons:

const tour = new Shepherd.Tour();

tour.addStep({
  title: 'Финальный шаг',
  text: 'Тур завершён',
  buttons: [
    {
      text: 'Завершить',
      action: tour.complete
    }
  ]
});

В данном примере:

  • text определяет текст кнопки
  • action указывает на метод завершения тура

Отличие от Next и Cancel

Next

  • вызывает tour.next()
  • переводит к следующему шагу
  • не завершает тур

Cancel

  • вызывает tour.cancel()
  • прерывает тур
  • инициирует событие cancel

Complete

  • вызывает tour.complete()
  • корректно завершает тур
  • инициирует событие complete

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

Добавление нескольких кнопок

Часто кнопка Complete используется вместе с другими действиями:

tour.addStep({
  title: 'Финал',
  text: 'Вы можете завершить или вернуться назад',
  buttons: [
    {
      text: 'Назад',
      action: tour.back
    },
    {
      text: 'Завершить',
      action: tour.complete
    }
  ]
});

Это позволяет пользователю:

  • вернуться к предыдущему шагу
  • завершить тур

Кастомная логика перед завершением

Кнопка Complete может выполнять дополнительные действия перед завершением:

tour.addStep({
  title: 'Финальный шаг',
  buttons: [
    {
      text: 'Завершить',
      action: function () {
        console.log('Тур завершён');
        tour.complete();
      }
    }
  ]
});

В этом случае:

  • сначала выполняется пользовательская логика
  • затем вызывается завершение тура

Работа с событиями complete

Shepherd предоставляет механизм подписки на события:

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

Событие complete срабатывает:

  • при нажатии кнопки Complete
  • при программном вызове tour.complete()

Это удобно для:

  • сохранения состояния (например, “тур пройден”)
  • аналитики
  • перехода к другим частям интерфейса

Программное завершение тура

Кнопка Complete — не единственный способ завершения тура. Возможен программный вызов:

tour.complete();

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

  • пользователь выполнил нужное действие вне тура
  • требуется завершение по событию (например, клик вне области)

Условное завершение

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

tour.addStep({
  buttons: [
    {
      text: 'Завершить',
      action: function () {
        if (userHasCompletedTask()) {
          tour.complete();
        } else {
          alert('Задача не выполнена');
        }
      }
    }
  ]
});

Такая логика позволяет:

  • контролировать поведение пользователя
  • предотвращать преждевременное завершение

Стилизация кнопки Complete

Shepherd позволяет задавать CSS-классы:

{
  text: 'Завершить',
  action: tour.complete,
  classes: 'shepherd-button-primary'
}

Или собственные классы:

{
  text: 'Готово',
  action: tour.complete,
  classes: 'my-complete-button'
}

Это дает возможность:

  • визуально выделить кнопку
  • подчеркнуть финальность действия

UX-практики использования

Кнопка Complete обычно:

  • размещается справа
  • визуально выделяется как основное действие
  • содержит понятный текст: “Готово”, “Завершить”, “Начать работу”

Не рекомендуется:

  • использовать Complete на промежуточных шагах без необходимости
  • дублировать с Cancel без различия поведения

Поведение после завершения

После вызова complete():

  • удаляются все элементы тура из DOM
  • снимаются обработчики событий
  • интерфейс возвращается в исходное состояние

Дополнительно можно:

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

Частые ошибки

1. Потеря контекста this

action: tour.complete

В некоторых случаях может потребоваться явная привязка:

action: () => tour.complete()

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

3. Отсутствие обработки события complete Без этого невозможно отследить завершение тура.

Расширенные сценарии

Комбинация с localStorage:

tour.on('complete', () => {
  localStorage.setItem('tourCompleted', 'true');
});

Автоматическое скрытие в будущем:

if (!localStorage.getItem('tourCompleted')) {
  tour.start();
}

Интеграция с аналитикой:

tour.on('complete', () => {
  analytics.track('Tour Completed');
});

Итоговая роль кнопки

Кнопка Complete выполняет ключевую функцию:

  • завершает пользовательский сценарий
  • сигнализирует об окончании обучения или онбординга
  • служит точкой интеграции с внешней логикой приложения

Её корректное использование напрямую влияет на восприятие завершённости интерфейсного процесса и качество пользовательского опыта.

Оглавление