Проверка установки

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

Подключение Shepherd.js

Существует два основных способа подключения библиотеки: через CDN и через пакетный менеджер npm/yarn.

Через CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/shepherd.js/dist/css/shepherd.css">
<script src="https://cdn.jsdelivr.net/npm/shepherd.js/dist/js/shepherd.min.js"></script>

Через npm:

npm install shepherd.js

После установки через npm можно подключать библиотеку в проект следующим образом:

import Shepherd from 'shepherd.js';
import 'shepherd.js/dist/css/shepherd.css';

Важно убедиться, что стили Shepherd.js подключены, иначе подсказки и окна тура будут отображаться некорректно.

Проверка подключения

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

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

tour.addStep({
  id: 'example-step',
  text: 'Это тестовый шаг для проверки работы Shepherd.js',
  attachTo: { element: 'body', on: 'top' },
  buttons: [
    {
      text: 'Закрыть',
      action: tour.cancel
    }
  ]
});

tour.start();

Если после запуска этого кода появляется всплывающее окно с текстом “Это тестовый шаг для проверки работы Shepherd.js”, значит библиотека подключена правильно и готова к использованию.

Диагностика ошибок подключения

  • Ошибка Shepherd is not defined Происходит, если библиотека не была подключена или подключена некорректно. Следует проверить правильность пути к JS-файлу и последовательность подключения скриптов. При использовании модулей ES важно убедиться, что импорт выполнен через import Shepherd from 'shepherd.js';.

  • Стили не применяются Всплывающие окна могут отображаться без оформления, если не подключён CSS-файл. Проверка: убедиться, что <link> на CSS присутствует в <head> или импортирован в JS через import 'shepherd.js/dist/css/shepherd.css';.

  • Элементы не прикрепляются к странице Убедиться, что селектор, указанный в attachTo.element, существует на момент вызова тура. Shepherd.js не создаёт шаги для несуществующих элементов.

Проверка работы с фреймворками

Для интеграции Shepherd.js с фреймворками типа React, Vue или Angular важно учитывать моменты жизненного цикла компонентов. Элементы, к которым привязываются шаги, должны быть отрендерены в DOM до начала тура:

useEffect(() => {
  const tour = new Shepherd.Tour({ defaultStepOptions: { scrollTo: true } });
  tour.addStep({ id: 'step1', text: 'Пример шага', attachTo: { element: '#my-element', on: 'bottom' } });
  tour.start();
}, []);

Здесь useEffect гарантирует, что элемент #my-element уже присутствует на странице, предотвращая ошибки привязки.

Проверка совместимости с браузерами

Shepherd.js поддерживает современные браузеры. Для проверки:

  1. Открыть страницу с примером тура в разных браузерах (Chrome, Firefox, Edge, Safari).
  2. Убедиться, что всплывающие окна корректно отображаются и кнопки реагируют на клики.
  3. Проверить консоль на наличие ошибок JavaScript.

При использовании старых версий Internet Explorer могут возникнуть проблемы с отображением, так как библиотека использует современные стандарты ES6 и CSS Grid.

Логирование и отладка

Для более детальной проверки работы Shepherd.js можно включить логирование:

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

tour.on('start', () => console.log('Тур запущен'));
tour.on('complete', () => console.log('Тур завершён'));
tour.on('cancel', () => console.log('Тур отменён'));

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

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

Оглавление