Переключение языков

Для начала необходимо создать экземпляр тура с помощью Shepherd.Tour. Важным моментом при работе с несколькими языками является структурирование текста шагов так, чтобы можно было динамически подставлять нужный язык. Обычно используют объект с ключами-языками:

const texts = {
  en: {
    step1: {
      title: "Welcome",
      text: "This is the first step of the tour."
    },
    step2: {
      title: "Features",
      text: "Here you can see all the features."
    }
  },
  ru: {
    step1: {
      title: "Добро пожаловать",
      text: "Это первый шаг тура."
    },
    step2: {
      title: "Функции",
      text: "Здесь вы можете увидеть все функции."
    }
  }
};

Экземпляр тура создается стандартным образом:

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    scrollTo: true,
    cancelIcon: {
      enabled: true
    },
    classes: 'shepherd-theme-arrows'
  }
});

Добавление шагов с динамическим текстом

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

function addSteps(language) {
  tour.addStep({
    id: 'step1',
    text: texts[language].step1.text,
    title: texts[language].step1.title,
    attachTo: { element: '#feature1', on: 'bottom' },
    buttons: [
      {
        text: language === 'ru' ? 'Далее' : 'Next',
        action: tour.next
      }
    ]
  });

  tour.addStep({
    id: 'step2',
    text: texts[language].step2.text,
    title: texts[language].step2.title,
    attachTo: { element: '#feature2', on: 'top' },
    buttons: [
      {
        text: language === 'ru' ? 'Назад' : 'Back',
        action: tour.back
      },
      {
        text: language === 'ru' ? 'Закончить' : 'Finish',
        action: tour.complete
      }
    ]
  });
}

Переключение языка на лету

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

function switchLanguage(language) {
  tour.steps.forEach(step => tour.removeStep(step.id));
  addSteps(language);
  tour.start();
}

При этом tour.start() можно вызывать с tour.currentStep, чтобы возобновить тур с текущего шага, если нужно сохранять позицию пользователя.

Использование кнопок для смены языка

Можно создать глобальные кнопки, которые будут переключать язык:

document.querySelector('#btn-en').addEventListener('click', () => switchLanguage('en'));
document.querySelector('#btn-ru').addEventListener('click', () => switchLanguage('ru'));

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

Динамическая локализация кнопок

Кнопки можно делать динамическими через объект, аналогичный texts, чтобы каждая кнопка имела локализованный текст:

const buttonsText = {
  en: { next: 'Next', back: 'Back', finish: 'Finish' },
  ru: { next: 'Далее', back: 'Назад', finish: 'Закончить' }
};

function getButtons(language, step) {
  const btns = [];
  if (step > 0) {
    btns.push({ text: buttonsText[language].back, action: tour.back });
  }
  if (step < tour.steps.length - 1) {
    btns.push({ text: buttonsText[language].next, action: tour.next });
  } else {
    btns.push({ text: buttonsText[language].finish, action: tour.complete });
  }
  return btns;
}

Интеграция с локализационными библиотеками

Shepherd.js легко интегрируется с любыми библиотеками локализации, такими как i18next или Vue I18n. Вместо хранения текстов локально, можно получать их через функции перевода:

tour.addStep({
  id: 'step1',
  text: i18next.t('tour.step1.text'),
  title: i18next.t('tour.step1.title'),
  attachTo: { element: '#feature1', on: 'bottom' },
  buttons: [
    { text: i18next.t('tour.buttons.next'), action: tour.next }
  ]
});

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

Сохранение выбранного языка

Для удобства пользователя язык можно хранить в localStorage или cookies и при загрузке страницы автоматически подставлять его:

const userLang = localStorage.getItem('userLang') || 'en';
addSteps(userLang);
tour.start();

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

function switchLanguage(language) {
  localStorage.setItem('userLang', language);
  tour.steps.forEach(step => tour.removeStep(step.id));
  addSteps(language);
  tour.start();
}

Настройка внешнего вида под локализацию

Некоторые языки требуют изменения положения кнопок или размера тултипов. Shepherd.js позволяет использовать CSS-классы для каждого шага:

tour.addStep({
  id: 'step1',
  text: texts[userLang].step1.text,
  title: texts[userLang].step1.title,
  classes: userLang === 'ru' ? 'shepherd-theme-arrows ru-font' : 'shepherd-theme-arrows en-font',
  attachTo: { element: '#feature1', on: 'bottom' }
});

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

Оглавление