選択された予約オプションに基づいて、インターフェース要素の表示・非表示を切り替えることができます。 これは、クラスを追加タイプのリアクションを使用することで実現できます。 また、基本的なHTMLの知識も必要です。
例として「スノーボードレンタル」リソースを使いましょう。 リソースの構成画面で、リアクション追加をクリックします。
名前を入力します。例えば「サイズを表示」など。 タイプはクラスを追加を選択します。 CSSクラス名を作成します(例:show-size)。 その後、条件を追加します。
「スノーボード(ブーツ付き)」料金オプションのシェアが1つ選択されているという条件を選択し、保存します。
これで、この料金オプションが選択されると、ウィジェット内の予約フォームにCSSクラスshow-sizeが追加されます。
次に、フォーム内のフィールドを非表示にする簡単なCSSルールを記述します。 ウィジェットに移動し、空き時間を選択します。 予約フォームが表示され、制御したいフィールドが表示されます。 ページのマークアップを開き、このフィールドのIDを探します。 フィールドを右クリックし、コードを表示を選択します。 この例では、フィールドIDはfield_93098です。
その後、ウィジェット設定を開きます。 デザインパネルに進みます。 カスタムCSSスタイルオプションにチェックを入れます。 そして、次のCSSを追加します。
#field_93098 { display: none; }
.show-size #field_93098 { display: block; }
ウィジェットで結果を確認してください。