UX: Додати intro.js до публічної сторінки

[ndrhzn]

В рамках роботи з покращення того, як ми пояснюємо користувачами можливості модуля аналітики та взаємодію із ним, ми розглядаємо варіант додавання інтерактивних турів до сторінок з використанням бібліотеки Intro.js.

Intro.js працює доволі за простим принципом:

• Ми можемо зробити інструкції частиною розмітки, і бібліотека їх гарно відрендерить для користувачів, коли вони вперше зайдуть на сторінку. Tour Hello World

<div data-title="Welcome!" data-intro="Hello World! 👋" class="card-demo">
  <div class="card shadow--md">
    <div class="card__image" data-intro="Intro.js can highlight on elements">
      <img
        src="..."
        alt="Image alt text"
        title="Logo Title Text 1"
      />
    </div>
    <div class="card__body" data-title="Farewell!" data-intro="And this is the last step!">
      <h4>Quaco Lighthouse</h4>
      <small>
        The Quaco Head Lighthouse is a well maintained lighthouse close to St.
        Martins. It is a short, beautiful walk to the lighthouse along the
        seashore.
      </small>
    </div>
  </div>
</div>

introJs().start();

• Ми можемо винести інструкції в окремий config файл, і в такому разі нам потрібно буде вказувати, до яких елементів розмітки ці інструкції стосуються. JSON Configuration

introJs().setOptions({
  steps: [{
    title: 'Welcome',
    intro: 'Hello World! 👋'
  },
  {
    element: document.querySelector('.card-demo'),
    intro: 'This step focuses on an image'
  },
  {
    title: 'Farewell!',
    element: document.querySelector('.card__image'),
    intro: 'And this is our final step!'
  }]
}).start();

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

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

Скажімо, якщо нам потрібно зробити якусь інструкцію щодо користування картками, нам потрібно звернутися до контейнера карток. Але наразі в нього немає класу чи ідентифікатора.

Отже, мінімальні зміни в розмітці все ж знадобляться, аби впевнитися, що у нас є селектори для всіх потрібних нам елементів. Якщо вони є, тоді ми можемо напрацювати конфігурації самостійно, а від вас потребуватиметься лише застосування їх до мешапу.

Що ви про це думаєте? @a-radik @karandinserhii

[a-radik]

Виглядає так, що рішення з конфігом найпростіше і має працювати. Ідентифікатори, де вони відсутні але потрібні, можемо додати за запитом. Загалом все виглядає життєздатним.

Питання щодо підтримки багатомовності. Не знаю чи це реалізовано в самій бібліотеці, якщо ні, виглядає так, що можна першим кроком вказати на можливість вибору мови, а надалі текст в піказках відображати з Qlik аналогічно, як ми це робимо для назв сторінок, заголовку сторінки, тощо.

[ndrhzn]

Дякую! В такому разі будемо розглядати варіант з конфігом як основний робочий.

Питання щодо багатомовності дуже доречне - я поки не знайшов однозначної відповіді у документації, але досліджуватиму це глибше.

[a-radik]

запропонував оскільки мнеі здавалось, що мова має співпадати з тією, що обрав користувач. Здається що в нас мова ще і через урл може передаватись. В такому випадку все одне доведеться якось питати поточну мову в Qlik

[ndrhzn]

Так, в ідеалі мова інструкцій має збігатися із тією, що обрав користувач. Я зі свого боку поки повивчаю варіанти імплементації цього, але, звісно, в якийсь момент потрібна буде ваша допомога, бо ви ліпше знаєте qlik / mashup internals

[a-radik]

Там не складно має бути, умовно кажучи підставимо туди змінну