検索ステータスコンポーネント¶

前提

機能説明¶

ヒット件数などのステータスを表示します。
ステータスに検索ワードを表示させたい場合は詳細検索ステータスコンポーネントを利用してください。

See the Pen this by BST developer (@bsearchtech)on CodePen.

設定方法¶

必須設定¶

Htmlの修正

<div data-[モード]="searchstatus"></div>

任意設定¶

表示用メッセージの変更

sitesearchMessage という変数に次のような指定を行うことで、表示文字列を変更することができます。

var sitesearchMessage = {
    searchStatus: {
        status: '全%1$s件を表示',
        groupstatus: '全%1$sアイテム(%2$sSKU)を表示',
        noKeyword: '検索ワードを入れてください',
    },    
};

キー名	デフォルト値	説明
status	全%1$s件を表示	検索ステータスコンポーネントの表示内容。%1$sにはヒット件数が入る ※「%1$s」の代わりに「%totalhits%」も指定可能。
groupstatus	全%1$sアイテム(%2$sSKU)を表示	検索ステータスコンポーネントのグループ検索の表示内容。%1$sにはグループ時のヒット件数、%2$sにヒットしたレコード数が入る ※「%1$s」の代わりに「%grouphits%」、「%2$s」の代わりに「%totalhits%」も指定可能。
noKeyword	検索ワードを入れてください	検索ワードが空のときの表示内容。 ※設定パラメータ「allowEmptyKeywordSearch」が falseのときのみ有効

dom構造¶

Dom

検索ステータスコンポーネント¶

<div data-[モード]="searchstatus" class="_[モード]_component">
  <div class="_searchstatus">
    <!-- 検索ステータスが表示される -->
    <div class="_status">全<span class="_hits">○○○</span>件を表示</div>
    <!-- ゼロ件ヒットの場合は以下の表示になる -->
    <div class="_status _nohits">全<span class="_hits">0</span>件を表示</div>
  </div>
</div>