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

前提

機能説明¶

ヒット件数などのステータスを表示します。
検索ステータスコンポーネントよりも、より多くの情報や制御が可能です。

searchstatusfullコンポーネントでは、メッセージリソース内に
%キーワード% を記述すると、指定されたキーワードが変数展開されて表示されます。
利用可能なキーワードは以下です。

キーワード	説明
keyword	検索キーワード
countstart	表示開始件数
countend	表示終了件数
totalhits	ヒット件数(グループ検索時はグループ展開時のヒット件数)
grouphits	グループ検索時のヒット件数(グループ検索時以外は空文字)

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

設定方法¶

必須設定¶

Htmlの修正

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

任意設定¶

表示用メッセージの変更

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

var sitesearchMessage = {
    searchStatusFull: {
        keyword_hits: '「%keyword%」検索結果 %countstart%-%countend% / %totalhits%',
        keyword_nohits: '「%keyword%」検索結果 0件 | 検索キーワードあり、ヒット件数0件の際の表示',
        nokeyword_hits: '検索結果 %countstart%-%countend% / %totalhits%',
        nokeyword_nohits: '検索結果 0件',
        keyword_hits_grouping: '「%keyword%」 検索結果 %countstart%-%countend% / %grouplhits%(%totalhits% SKU)',
        keyword_nohits_grouping: '「%keyword%」検索結果 0件',
        nokeyword_hits_grouping: '検索結果 %countstart%-%countend% / %grouplhits%(%totalhits% SKU)',
        nokeyword_nohits_grouping: '検索結果 0件',
    },    
};

キー名	デフォルト値	説明
keyword_hits	「%keyword%」検索結果 %countstart%-%countend% / %totalhits%	検索キーワードあり、ヒット件数1件以上の際の表示
keyword_nohits	「%keyword%」検索結果 0件	検索キーワードあり、ヒット件数0件の際の表示
nokeyword_hits	検索結果 %countstart%-%countend% / %totalhits%	検索キーワードなし、ヒット件数1件以上の際の表示
nokeyword_nohits	検索結果 0件	検索キーワードなし、ヒット件数0件の際の表示
keyword_hits_grouping	「%keyword%」検索結果 %countstart%-%countend% / %grouplhits%(%totalhits% SKU)	グループ検索時、検索キーワードあり、ヒット件数1件以上の際の表示
keyword_nohits_grouping	「%keyword%」検索結果 0件	グループ検索時、検索キーワードあり、ヒット件数0件の際の表示
nokeyword_hits_grouping	検索結果 %countstart%-%countend% / %grouplhits%(%totalhits% SKU)	グループ検索時、検索キーワードなし、ヒット件数1件以上の際の表示
nokeyword_nohits_grouping	検索結果 0件	グループ検索時、検索キーワードなし、ヒット件数0件の際の表示

dom構造¶

Dom

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

<div class="_searchstatusfull">
  <div class="_status">
    検索結果 <span class="_countstart">1</span>-<span class="_countend"
      >10</span
    >
    / <span class="_totalhits">6098</span>
  </div>
</div>