この回避策は、特定のシナリオでのみ必要となります。たとえば、Web Widgetではフォームを使用したいが、ヘルプセンターでは使用したくない場合などです。ブランド別のチケットフォームを選択して表示する方法については、「ブランド設定されたチケットフォームの作成および適用」をご参照ください。
すべてのブランドについてヘルプセンターを作成し、各ブランド用のチケットフォームを展開する準備ができました。でもちょっと待ってください！メインのブランド用のフォームが、2番手のブランドのヘルプセンターに表示されないようにしたいのですが。これから紹介するテクニックで、この課題を解決したいと思います。
この記事には、次の2つのシナリオを想定しています。
フォームIDを探す
フォームを非表示にするにしても、単独で表示するにしても、個々のフォームを対象にするには、最初にフォームIDを見つける必要があります。ここでは、フォームの作成については説明しません。フォームの作成について詳しくは、「各種リクエストに応じたさまざまなチケットフォームの作成」を参照してください。
エージェントインターフェイスでチケットフォームIDをすばやく見つける手順は次のとおりです。
-
管理センターで、サイドバーにあるオブジェクトとルールアイコン（
）をクリックし、「チケット」>「フォーム」を選択します。 - ユーザーから隠すフォームまたはスタンドアロンフォームとして使用するフォームの名前をクリックします。
- アドレスバーのフォームIDをメモしておきます。アドレスバーの例は下図のとおりです。
- この手順を非表示にしたいフォームまたは単独で表示したいフォームごとに繰り返します。
ブランドごとに複数のフォームを表示する
多くの場合、各ヘルプセンターでは複数のタイプのリクエストを管理します。このセクションでは、特定のブランドのヘルプセンターに表示させたくないチケットフォームを選択的に隠し、それ以外のフォームをエンドユーザーが選択できるようにする方法を紹介します。
コード
前述のように、非表示にしたいチケットフォームを記録したので、次のコードを使用してそれらのフォームをターゲットにすることができます。
script.jsテンプレート内にある
$(document).ready(function(){
内に以下のバージョンのコードのいずれかを配置します。
オプション1
この1番目のオプションでは、フォームIDがある行を繰り返すだけです。ここでのフォームIDは、
12775
および
31495
です。
//remove the options from the dropdown selector
$('#request_issue_type_select option[value="12775"]').remove();
$('#request_issue_type_select option[value="31495"]').remove();
//remove the options from the nesty-input after it's been created.
$('.nesty-panel').on('DOMNodeInserted', function(e){
$(this).children('ul').children().remove('#12775');
$(this).children('ul').children().remove('#31495');
});
オプション2
この2番目のオプションでは、代わりに配列を使用することにしたので、角括弧
[ 12775,31495 ]
の中に非表示にしたいフォームのIDをすべて入力します。各IDはカンマで区切る必要があります。これにより、すべてのIDが削除されるまで関数がループします。
$.each([ 12775,31495 ], function( index , formValue ) {
$('#request_issue_type_select option[value="' + formValue + '"]').remove();
$('.nesty-panel').on('DOMNodeInserted', function(e){
$(this).children('ul').children().remove('#' + formValue);
});
});
各ブランドで1つのフォームだけを表示する
「各ブランドに1つのフォームがあればいい」という方もいらっしゃるかもしれません。 これも全く問題のないワークフローです。余分なブランドをすべて隠す代わりに、「リクエストの送信」リンクを変更してユーザーをフォームの1つに直接送り、そのフォーム内で「以下の中から該当する問題を選択してください」のドロップダウンリストを非表示にすることもできます。
コード
ユーザーを1つのフォームに送るためには、前述の手順で見つけたフォームIDが必要です。
ヘルプセンターのテンプレート言語であるCurlybarsを使用すると、「リクエストを送信」リンクを簡単に置き換えることができます。Curlybarsとテンプレートのドキュメントはこちらから参照できます。
このコードは、「リクエストを送信」リンクを表示するヘッダーテンプレートに配置します（
ticket_form_id
は必ず、実際のフォームIDに置き換えてください）。このコードはローカライズを考慮するため、ヘルプセンターで複数の言語を使用している場合、リンクは適切な言語で提供されます。
<a href="{{page_path 'new_request' ticket_form_id='17369'}}">{{t 'submit_a_request'}}</a>
チケットフォームからフォーム選択用のドロップダウンリストを削除する
次に、チケットフォームからフォーム選択のドロップダウンを削除して、ユーザーが現在のブランドで別のフォームを選択しないようにしたいと思います。以下のコードをヘルプセンターのstyle.cssテンプレートに記述してください。
.request_ticket_form_id{
display:none;
}
このCSSをstyle.cssテンプレートに入力します。
動作のしくみ
新しいリクエストページが生成されると、エンドユーザー向けのすべてのチケットフォームがドロップダウンリストに表示されます。最初の例では、指定したブランドごとに表示する必要のないフォームオプションを削除し、2番目の例では、ブランド専用のフォームにユーザーを誘導しています。
11件のコメント
サインインしてコメントを残してください。