重要なお知らせ

このサポートサイトは、テンプレートのカスタマイズにあたるため、サポート対象外となります。予めご理解の上ご利用をお願いいたします。

概要

ウィジェットタイプのテンプレートは複数のステート（表示状態）を持つことができ、一つのステートの表示全体または一部（ボタンなど）をクリックした時に、別のステートを表示させるといった挙動を取ることができます。

ステートの概念と追加方法についてはこちらのサポートサイトをご覧ください。

初期表示ステートの設定

接客アクションの初期表示時に、任意のステートから開始することができます。デフォルトでは1番目のステートが表示されますが、以下の方法で変更可能です。

widget.setState(2);

通常のwidget.show()の代わりに、setState()を利用し、引数でステート番号を指定することで、そのステートから表示を開始できます。

クリック時のステート遷移設定

krt-on:click="setState(n)"

要素をクリックした時に、表示させる次のステート番号をnに指定します。

例えば、以下のようにすると

<div class=”karte-temp-state1″ krt-if=”state==1″ krt-on:click=”setState(2)”>

「ステート1の時にkarte-temp-state1の要素が表示され、クリックするとステート2が表示される」という挙動となります。

ステート表示条件の設定

krt-if="state==n"

の記述がある要素が、nステートに表示されます。nを表示させたい希望のステート番号に変更してください。

例えば、以下のようにすると

<div class=”karte-temp-state1″ krt-if=”state==2″ krt-on:click=”setState(1)”>

「ステート2の時にkarte-temp-state1の要素が表示され、クリックするとステート1が表示される」という挙動に変更されます。
もともとステート1に表示されていた要素がステート2に表示されるようになるので、ステート1のHTML部分も併せて編集をすれば、ステート1と2の表示内容を入れ替えることができます。