ツアーモジュール-Drupal9でカスタムテーマの独自のツアーを作成する

公開: 2021-09-28

なじみのない場所にいるとき、ガイド付きツアーよりも良いことは何ですか?

ユーザーエクスペリエンスは、徐々にすべてのビジネスの焦点になりつつあります。 ユーザーインターフェイスの操作を通じてユーザーを正しい方向に向けるのに役立つエクスペリエンスを提供することは、あらゆるビジネスにとって大きな変革をもたらす可能性があります。 この記事では、Drupal 9のツアーモジュールについて説明します。ツアーモジュールを使用すると、既存のビューのガイド付きのビルド済みツアーに参加できるだけでなく、カスタムテーマにツアーモジュールを統合することもできます(後で詳しく説明します)。

ツアーモジュール

Drupal9ツアーモジュール

ユーザーがサイト上の特定のコンポーネントに集中して、気づかれにくい場合は、Drupal9Tourモジュールを実装することをお勧めします。 また、ガイド付きワークフローを通じてユーザーを案内したい場合にも最適です。 ツアーモジュールは、Drupal8以降のDrupalコアに含まれています。

モジュールを有効にすると、ツールチップを使用してWebサイトインターフェイスのガイド付きツアーが提供されます。 ツアーに参加するには、で既存のビューを編集できます

/admin/structure/views

管理ツールバーの右上隅にある[?ツアー]リンクをクリックします。 また、訪問することができます

/admin/structure/views/view/frontpage?tour=1

ビューツアーを自動開始します。

ビュー設定

Drupal 8では、TourモジュールはJoyride jQueryプラグインに基づいて構築されています。このプラグインは、Drupal9.2ではShepherd.jsで非推奨になっています。

YMLファイルを介してモジュールと管理インターフェースのツアーを追加する別の方法があります。 ここでは、カスタムテーマでツアーを追加しています。

Shepherd.jsとは何ですか?

Shepherdは、アプリやWebサイトのガイド付きツアーを簡単に作成できるJavaScriptライブラリです。 別のオープンソースライブラリであるPopper.jsを利用して、各ツアーの「ステップ」のダイアログをレンダリングします。

カスタムテーマへのツアーモジュールの統合

Drupal 9には、統合する複数のタイプのコンテンツページがあります。

  1. ページツアー
  2. ノードツアー
  3. ツアーなどを見る

次の画像のように、すべてのグラフと値を表示する複数のカードを含むダッシュボードページがあると仮定します。 ここでは、ツアーにより、ユーザーがカードを簡単にガイドし、詳細を表示できるようになります。

ダッシュボードデザイン

画像クレジット:ダッシュボードデザイン

ダッシュボードツアーライブラリの作成

ツアーの要件:

以下のアイテム/カードに必要なガイド付きツアー

  1. フィットネス活動
  2. 新しいコース
  3. 新しく作る
  4. 今日のゲイン
  5. 活動員
  6. マンスリーレビュー
  7. ポイント
  8. 今すぐ支払う(アクションボタン)

これで、合計8つのステップがあります。 この例では、最初にいくつかのステップを作成し、残りのカードについても同じパターンを続けます。

はじめましょう。

ステップ1:THEME.libraries.ymlにツアーライブラリを作成する

ダッシュボードツアー用のカスタムライブラリを作成しているので、これをダッシュ​​ボードページ/テンプレートに含めることができます。 つまり、dashboard.html.twig

テーマライブラリ

THEME.libraries.yml

ステップ2:カスタムダッシュボードページまたはノードテンプレートにダッシュボードツアーライブラリを含める

 {# In a Twig template we attach the library. #}
 {{ attach_library('THEME/dashboard-tour') }}​

これで、ツアーの依存関係をテーマに含めました。

ステップ3:Shepherd.jsの使用を開始する

クイックスタートについては、https://shepherdjs.dev/でサンプルコードを入手できます。

羊飼いの初期化

Dashboard.jsで、以下のように初期化コードを追加します

const tour = new Shepherd.Tour({ defaultStepOptions: { cancelIcon: { enabled: true }, classes: 'shadow-md bg-purple-dark', scrollTo: { behavior: 'smooth', block: 'center' } }, useModalOverlay: true, });

Dashboard.js

defaultStepOptionsオプションを使用すると、このツアーのすべてのステップにデフォルトで適用されるオプションを指定できます。

useModalOverlayは、追加できるもう1つのオプションです。 ここで他のツアーオプションを確認できます。

紹介手順の作成

tour.addStep({ id: 'introduction', text: 'Welcome to Our Dashboard', classes: 'example-step-extra-class', buttons: [ { classes: 'btn btn-primary', text: 'Next', action: tour.next } ] });​

Dashboard.js

これはウェルカムツアーのポップアップであるため、要素ターゲット(クラスやIDなど)は割り当てていません。 これは、ページの中央にウェルカムメッセージポップアップとして表示されます。

次のステップでさらに深く掘り下げるツアー方法がもっとあります。

2番目のステップの作成-フィットネスアクティビティ

tour.addStep( { id: 'activity', text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti.', attachTo: { element: '.class-activity', on: 'bottom' }, classes: 'example-step-extra-class', buttons: [ { action() { return this.back(); }, classes: 'btn btn-primary', text: 'Back' }, { action() { return this.next(); }, classes: 'btn btn-primary', text: 'Next' } ] });

ツアーは多くの方法を提供します。 いくつかの基本的なステップオプションでもう少し進んでみましょう

  • id:ステップのIDとして使用する文字列。 IDが渡されない場合は、IDが生成されます。
  • text:ステップの本文のテキスト。 次の3つのタイプのいずれかになります。

◦HTML文字列
◦HTMLElementオブジェクト
◦ステップの作成時に実行される関数。 上記の2つのオプションのいずれかを返す必要があります。

  • title:ステップのタイトル。 ステップの一番上でh3になります。
  • attachTo:ページ上でステップをアタッチする必要のある要素。 プロパティ要素がオンになっているオブジェクト。

◦element 要素セレクター文字列またはDOM要素。
◦on 要素に対してPopperツールチップを配置するためのオプションの方向。

  • 可能な文字列値: 'auto'、'auto-start'、'auto-end'、'top'、'top-start'、'top-end'、'bottom'、'bottom-start'、'bottom-end '、' right'、' right-start'、' right-end'、' left'、' left-start'、' left-end '
AttachTo

attachToを指定しない場合、要素は画面の中央に表示されます。

  • キャンセルアイコンのcancelIconオプション

有効ステップのヘッダーにキャンセル「✕」を表示する必要がありますか?
◦labelaria -label追加するラベル

  • classes:ステップのコンテンツ要素に追加する追加のクラスの文字列。
  • ボタン:ステップに追加するボタンの配列。 これらは、本文の下のフッターに表示されます。 配列内の各ボタンは、次の形式のオブジェクトです。

テキスト:ボタンのHTMLテキスト
クラス: <a>に適用する追加のクラス
アクション:ボタンがクリックされたときに実行される機能。 ステップが関連付けられているツアーに自動的にバインドされるため、 this.nextのようなものがアクション内で機能します。

この次へ

3番目のステップの作成:新しいコース

この記事を短くするために、ここではこれ以上の手順を追加しません。 上記の手順に従って、ここで必要な数の手順を作成できます。 すべてのステップを作成した後、最終的にツアーを開始します。

ツアーを開始するには、ツアーインスタンスでstartを呼び出すだけです。

 tour.start();

乾杯!! ダッシュボードのツアーを追加しました。

注:よりインタラクティブなシェパードツアーを利用するには、利用可能なすべての方法、イベントオプションを確認してください。