検索結果コンポーネント

機能説明

検索結果を表示します。

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

設定方法

必須設定

Htmlの修正

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

任意設定

表示用メッセージの変更

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

var sitesearchMessage = {
    searchResults: {
        pricePrefix: '',
        priceSuffix: '円',
        numeric1Prefix: '',
        numeric1Suffix: '',
        addItemList: '比較する',
        itemListLimit: 'これ以上追加できません',
        lastModifiedPrefix: '最終更新日: ',
        filesizePrefix: 'ファイルサイズ: ',
        extra: '追加で見る',
    },    
};

キー名	デフォルト値	説明
pricePrefix		結果表示コンポーネントで price を表示した場合に前に表示
priceSuffix	円	結果表示コンポーネントで price を表示した場合に後ろに表示
numericNPrefix		レイアウトとして numericN を表示する際に前に表示 (N は 1 から 5)
numericNSuffix		レイアウトとして numericN を表示する際に後ろに表示 (N は 1 から 5)
addItemList	比較する	結果表示コンポーネントで add_item_list を表示した際のラベル
itemListLimit	これ以上追加できません	結果表示コンポーネントで add_item_list を表示した際に追加不可を表すメッセージ
lastModifiedPrefix	最終更新日:	結果表示コンポーネントで last_modified を表示した場合に前に表示
filesizePrefix	ファイルサイズ:	結果表示コンポーネントで filesize を表示した場合に前に表示
extra	追加で見る	追加で見るボタンに表示されるラベル

関連する設定パラメータの追加

var popfindConf = popfindConf || {};
popfindConf["data-[モード]"] = {
    uid: "[UID]",
    mode: "[モード]",
    inputId: "q",

    layoutOrder: ['sitesearch_group1', 'sitesearch_group2', 'sitesearch_group3', 'sitesearch_group4'],
    extraResultsCount: 1,
};

パラメータ名	データ型	デフォルト値	説明
layoutOrder	配列	['sitesearch_group1', 'sitesearch_group2', 'sitesearch_group3', 'sitesearch_group4']	searchResults コンポーネントにおいて、表示するレイアウトのリスト。 利用可能なレイアウト
extraResultsCount	数値	0	検索結果の追加表示件数。1 以上の値を設定した場合、追加で見るボタンが検索結果の下部に表示されます。

DOM 構造

Dom

検索結果コンポーネント

検索結果コンポーネントは設定パラメータの内容に応じて
DOM 構造が変化します。
レイアウトの指定方法について詳しくは「設定パラメータリファレンス」を参照してください。

利用可能なレイアウトの DOM 構造については下記を参照してください

<div data-[モード]="searchresults" class="_[モード]_component">
  <div class="_searchresults">
    <div class="_items">
      <!-- ここから繰り返し表示 -->
      <!-- 何番目のレコードかを表すIDが自動付与される -->
      <div class="_item" id="popfindItem1">
        <div class="_wrap">
          <!-- 以下、設定パラメータに応じて指定したレイアウトが表示される -->
        </div>
      </div>
      <!-- 以下、検索結果の数もしくは表示件数の数だけ繰り返し表示される -->
      <div class="_item" id="popfindItem2">...</div>
      ...
      <!-- ここまで繰り返し表示 -->
    </div>

  </div>
</div>