カスタムチケットフィルターをカスタマーポータルに追加する方法

この記事では、カスタマーポータルの “My Tickets”（マイチケット）タブでチケットを閲覧する際に、顧客がチケットを絞り込めるカスタムチケットフィルターの定義方法について説明します。

以下の例では、複数の条件（テキスト検索、チケットステータスによるフィルター、チケットの公開タグによるフィルター、チケット作成日・解決日・更新日に基づくフィルター）を組み合わせたフィルタリングを使用しています。すべてのフィルターを使用する必要はありませんが、実際のニーズに合わせて My tickets custom menu HTML のサンプルコードを調整する必要があります。この実装はいくつかのステップで構成されており、カスタムフィルター自体のHTMLコードを定義し、見た目を整えるカスタムCSSを追加し、さらに機能実現のためのサードパーティスクリプトを組み込みます。

以下のカスタムフィルターの例は、MontanaカスタマーポータルテーマでもっともきれいJに表示されるように設計されています。LiveAgentで別のカスタマーポータルテーマを使用している場合は、実際のカスタマーポータルのデザインに合わせてCSSを調整する必要があります。

カスタムチケットフィルターを追加すると、顧客・訪問者はLiveAgentカスタマーポータルの “My tickets”（マイチケット）タブからフィルターを利用できるようになります。このタブはログイン済みユーザーのみに表示されます。

以下が実際にLiveAgentへ追加するカスタムフィルターのHTMLコードです。LiveAgentの管理画面を開き、Customer portal（カスタマーポータル）タブ → Settings（設定） → Configuration（設定） → Design（デザイン） → Own HTML（独自HTML） → My tickets custom menu HTML に移動してください。フィルターコードを追加したら、忘れずに変更を保存してください。

<div class="panel panel-default margin-top margin-bottom">
    <div class="panel-heading">
      {if !isset($code) || $code == ""}
          Ticket Filters
      {elseif $code != ""}
         <a href="#" onclick="window.history.back();">Back to Ticket Filters</a>
      {/if}
  </div>
  {if !isset($code) || $code == ""}
    <div class="panel-body">
    <div class="filter-body">
        <div class="filter_label"></div>
            <input type="text" id="filterQuery" name="filterQuery"  value="{$query|escape}" placeholder="Search text" />
    </div>
    <div class="filter-body">
        <div class="filter_label">Status</div>
            <select class="status-select" name="status">
            <option value="A" {if $status == "A"}selected{/if}>Any</option>
            <option value="O" {if $status == "O"}selected{/if}>Open</option>
            <option value="AN" {if $status == "AN"}selected{/if}>Answered</option>
            <option value="RD" {if $status == "RD"}selected{/if}>Resolved</option>
            </select>
    </div>
    <div class="filter-body">
        <div class="filter_label">Tags</div>
            <select class="tags-select" name="tags[]" multiple="multiple">
                {foreach from=$publicTags item="tag" key="tag_id"}
            <option value="{$tag_id}" {if $selectedTags.$tag_id.name > ""}selected{/if} style="color:#{$tag.color}; background-color:#{$tag.backgroundcolor};">{$tag.name}</option>
                {/foreach}
            </select>
    </div>
    <div class="filter-body">
        <div class="filter_label">Created date</div>
        <div class="dateFilter input-group">
            <input id="createdFromInput" class="form-control" placeholder="from RRRR-MM-DD"  value="{$createdFrom}">
            <div id="createdFrom"></div>
            <div class="input-group-btn"><button id="createdFromToggle" class="btn btn-default glyphicon glyphicon-calendar"></button></div>
        </div>
        <div class="dateFilter input-group">
            <input id="createdToInput" class="form-control" placeholder="to RRRR-MM-DD" value="{$createdTo}">
            <div id="createdTo"></div>
            <div class="input-group-btn"><button id="createdToToggle" class="btn btn-default glyphicon glyphicon-calendar"></button></div>
        </div>
    </div>
    <div class="filter-body">
        <div class="filter_label">Changed date</div>
        <div class="dateFilter input-group">
            <input id="changedFromInput" class="form-control" placeholder="from RRRR-MM-DD">
            <div id="changedFrom"></div>
            <div class="input-group-btn"><button id="changedFromToggle" class="btn btn-default glyphicon glyphicon-calendar"></button></div>
        </div>
        <div class="dateFilter input-group">
            <input id="changedToInput" class="form-control" placeholder="to RRRR-MM-DD">
            <div id="changedTo"></div>
            <div class="input-group-btn"><button id="changedToToggle" class="btn btn-default glyphicon glyphicon-calendar"></button></div>
        </div>
    </div>

    <div class="filter-body">
        <div class="filter_label">Resolved date</div>
        <div class="dateFilter input-group">
            <input id="resolvedFromInput" class="form-control" placeholder="from RRRR-MM-DD">
            <div id="resolvedFrom"></div>
            <div class="input-group-btn"><button id="resolvedFromToggle" class="btn btn-default glyphicon glyphicon-calendar"></button></div>
        </div>
        <div class="dateFilter input-group">
            <input id="resolvedToInput" class="form-control" placeholder="to RRRR-MM-DD">
            <div id="resolvedTo"></div>
            <div class="input-group-btn"><button id="resolvedToToggle" class="btn btn-default glyphicon glyphicon-calendar"></button></div>
        </div>
    </div>

    <input type="button" value="Apply" class="btn btn-primary" onclick="submitFilter('{$myTicketsUrl}');" />
    <input type="button" value="Cancel" class="btn btn-default" onclick="clearFilter('{$myTicketsUrl}');" />
    </div>
<script>
{literal}
WindowDatePicker.createLanguage('en', {
    DAYS_ABBR: ['', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    MONTHS: ['', 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    MONTHS_ABBR: ['', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    AM_PM: ['AM', 'PM'],
    BUTTONS: ['Apply', 'Cancel'],
    INVALID_DATE: 'Invalid Date'
});
{/literal}
  const createdFrom = new
{literal}WindowDatePicker({{/literal}
    el: '#createdFrom',
    lang: 'en',
    toggleEl: '#createdFromToggle',
    inputEl: '#createdFromInput',
    value: '{$createdFrom}',
    type: 'DATE',
    dateType: 'YYYY-MM-DD',
{literal}});
  const createdTo = new WindowDatePicker({{/literal}
    el: '#createdTo',
    lang: 'en',
    toggleEl: '#createdToToggle',
    inputEl: '#createdToInput',
    value: '{$createdTo}',
    type: 'DATE',
    dateType: 'YYYY-MM-DD',
{literal}});{/literal}

  const changedFrom = new
{literal}WindowDatePicker({{/literal}
    el: '#changedFrom',
    lang: 'en',
    toggleEl: '#changedFromToggle',
    inputEl: '#changedFromInput',
    value: '{$changedFrom}',
    type: 'DATE',
    dateType: 'YYYY-MM-DD',
{literal}});
  const changedTo = new WindowDatePicker({{/literal}
    el: '#changedTo',
    lang: 'en',
    toggleEl: '#changedToToggle',
    inputEl: '#changedToInput',
    value: '{$changedTo}',
    type: 'DATE',
    dateType: 'YYYY-MM-DD',
{literal}});{/literal}

  const resolvedFrom = new
{literal}WindowDatePicker({{/literal}
    el: '#resolvedFrom',
    lang: 'en',
    toggleEl: '#resolvedFromToggle',
    inputEl: '#resolvedFromInput',
    value: '{$resolvedFrom}',
    type: 'DATE',
    dateType: 'YYYY-MM-DD',
{literal}});
  const resolvedTo = new WindowDatePicker({{/literal}
    el: '#resolvedTo',
    lang: 'en',
    toggleEl: '#resolvedToToggle',
    inputEl: '#resolvedToInput',
    value: '{$resolvedTo}',
    type: 'DATE',
    dateType: 'YYYY-MM-DD',
{literal}});{/literal}
</script>
  {/if}
</div>

Custom CSS（カスタムCSS）タブ（Customer portal（カスタマーポータル）タブ → Settings（設定） → Configuration（設定） → Design（デザイン） → Custom CSS）に切り替えます。以下のCSSを追加して変更を保存してください。デザインの要件に合わせてCSSは自由に調整してください。

.select2-container {width: auto !important; display:block !important;}
.select2-container > span {display:block !important;}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {color: inherit !important; font-size: 14px; line-height: 15px; vertical-align: bottom;}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {opacity:0.5}
.select2-container--default .select2-selection--multiple .select2-selection__choice {border-color:rgba(0,0,0,0.4) !important; float:none !important; font-size: 12px !important; text-overflow:ellipsis; overflow:hidden;}

.filter_label {
    color: #666;
    font-size: 12px;
}

.filter-body {
    margin-bottom: 10px;
}

#filterQuery {
    border-radius: 4px;
    border: 1px solid #aaa;
    padding: 12px 8px;
    width: 100%;
}

.select2-results__options li[aria-selected="true"] {display:none;}

.select2-results__option {
    border: 3px solid #fff;
    border-radius: 7px;
    font-size: 12px;
    line-height: 12px;
}

.select2-results__option:hover {
    opacity:0.8;
}

.dateFilter {
    margin-bottom:3px;
}

.dateFilter .input-group-btn:last-child > .btn,
.dateFilter .input-group-btn:last-child > .btn-group {
  margin-top:-2px;
}

.dateFilter input {
    width: 48%;
    font-size: 13px;
    padding: 9px 5px;
    margin: 0;
    display: inline-block;
}

.dateFilter .form-control {
  box-shadow:none;
}

.dateFilter button {
    margin: 0;
    display: inline-block;
}

.btn {height:auto;}

Tracking codes（トラッキングコード）タブ（Customer portal（カスタマーポータル）タブ → Settings（設定） → Configuration（設定） → Tracking codes）に切り替えます。ここに必要なスクリプトと関数を追加します。 a) 以下のコードを Before （の前）セクションに追加します。

<link href="https://www.cssscript.com/demo/window-date-time-picker/dist/css/window-date-picker.css"  rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<script src="https://nostalgic-fermat-6932a4.netlify.com/window-date-picker.js"></script>

b) 以下のコードを **Before </BODY>**（</BODY>の前）セクションに追加して変更を保存します。

<script src="https://nostalgic-fermat-6932a4.netlify.com/select2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.tags-select').select2();
});
$(document).ready(function() {
    $('.status-select').select2();
});
function clearFilter(url) {
  window.location.href = url;
}
function submitFilter(url) {
    filterQuery = [];
    if ($('.tags-select').val() != [])  {
        filterQuery.push("t=" + $('.tags-select').val().join());
    }
    if ($('.status-select').val() != "")  {
        filterQuery.push("s=" + $('.status-select').val());
    }
    if ($('#createdFromInput').val() != "")  {
        filterQuery.push("created_from=" + $('#createdFromInput').val());
    }
    if ($('#createdToInput').val() != "")  {
        filterQuery.push("created_to=" + $('#createdToInput').val());
    }
    if ($('#changedFromInput').val() != "")  {
        filterQuery.push("changed_from=" + $('#changedFromInput').val());
    }
    if ($('#changedToInput').val() != "")  {
        filterQuery.push("changed_to=" + $('#changedToInput').val());
    }
    if ($('#resolvedFromInput').val() != "")  {
        filterQuery.push("resolved_from=" + $('#resolvedFromInput').val());
    }
    if ($('#resolvedToInput').val() != "")  {
        filterQuery.push("resolved_to=" + $('#resolvedToInput').val());
    }
    if ($('#filterQuery').val() != "")  {
        filterQuery.push("q=" + $('#filterQuery').val());
    }
    window.location.href = url + "?" + filterQuery.join("&");
}
</script>

ナレッジベースカテゴリの独自テーマを作成してアイコンを変更する方法

デジタル統合