Идентификатор шага

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

Назначение `id`

id используется для:

Уникальной идентификации шага Каждый шаг должен иметь уникальный id в пределах одного тура. Это необходимо для того, чтобы API Shepherd.js мог точно ссылаться на конкретный шаг, особенно когда тур содержит десятки шагов.
Навигации между шагами Методы тура, такие как next(), back() или show(), могут оперировать по id, позволяя показывать или переключаться на нужный шаг без жесткой привязки к порядковому номеру.
Динамического управления шагами Позволяет добавлять, удалять или модифицировать шаги после инициализации тура, используя методы getById(id) и remove(id).

Синтаксис и использование

При создании шага в Shepherd.js идентификатор задается через свойство id в объекте конфигурации шага:

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

tour.addStep({
  id: 'intro-step', // уникальный идентификатор
  text: 'Это первый шаг тура',
  attachTo: {
    element: '#start-button',
    on: 'bottom'
  },
  buttons: [
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});

В этом примере id равен 'intro-step'. Этот идентификатор позволяет ссылаться на шаг напрямую через API:

const step = tour.getById('intro-step');
step.show();

Правила выбора идентификатора

Уникальность — каждый шаг должен иметь уникальный id в рамках одного тура. Использование одинаковых идентификаторов приведет к ошибкам при вызове методов, работающих с конкретным шагом.
Читаемость — рекомендуется использовать осмысленные строки, отражающие назначение шага, например 'form-step', 'confirmation-step'.
Структурированность — при сложных турах с большим количеством шагов удобно использовать префиксы, например: 'signup-step-1', 'signup-step-2'.

Доступ к шагу по идентификатору

Shepherd.js предоставляет метод getById(id), возвращающий объект шага. Примеры операций:

// Показать шаг по идентификатору
tour.getById('intro-step').show();

// Скрыть шаг
tour.getById('intro-step').hide();

// Удалить шаг из тура
tour.removeStep('intro-step');

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

Идентификатор и события

Многие события тура можно связывать с конкретным шагом через его id. Например, можно отслеживать показ определенного шага:

tour.on('show', (event) => {
  if (event.step.id === 'intro-step') {
    console.log('Показан первый шаг');
  }
});

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

Идентификатор и управление порядком

Хотя шаги в Shepherd.js обычно следуют порядку добавления, id позволяет обходить этот порядок:

// Перейти сразу к шагу с конкретным идентификатором
tour.show('confirmation-step');

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