検索結果コンポーネント¶

前提

機能説明¶

検索結果を表示します。

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 class="_useritemlist">
      <!-- 以下は add_item_list レイアウトによりリストに追加された場合 -->
      <div class="_comparison_list _show">
        <div class="_list_items">
          <div class="_list_item _show" data-hash="...">
            <div class="_list_image">
              <a href="詳細URL" onclick="..." title="商品名">
                <img src="画像URL" />
              </a>
              <div class="_list_delete"><a href="#" onclick="...">×</a></div>
            </div>
          </div>
          <!-- 以下リストに追加されたコンテンツの数だけ繰り返し表示される -->
          <div class="_list_item _show" data-hash="...">...</div>
        </div>
        <div class="_list_buttons">
          <div class="_button _compare" onclick="...">
            <a href="#" onclick="...">
              <span class="_count">2<!--登録数数 --></span>
              <span class="_label">商品を比較する</span>
            </a>
          </div>
          <div class="_button _clear">
            <a href="#" onclick="...">全てクリア</a>
          </div>
        </div>
      </div>
      <!-- 以下はリストから比較ボタンを押下して起動された商品比較コンポーネントの内容 -->
      <div class="_comparison_modal _show" onclick="...">
        <div class="_window" onclick="...">
          <div class="_close">
            <div class="_button"><a href="#" onclick="...">×</a></div>
          </div>
          <div class="_content">
            <div class="_compareresults">
              <div class="_label">2商品の比較</div>
              <div class="_compare_items">
                <table>
                  <tbody>
                    <!-- 以下の内容は商品比較リソースファイルの定義内容により表示する行が、比較リストに追加した商品の数だけ表示する列が決定される -->
                    <!-- 以下はデフォルトの場合 -->
                    <tr>
                      <th>
                        <div class="_compare_label">商品画像</div>
                      </th>
                      <td>
                        <div class="_compare_layouts">
                          <!-- 以下はデフォルトの場合。実際に生成されるDOMは各レイアウト毎に異なる -->
                          <div class="_image">
                            <a href="詳細URL" onclick="...">
                              <img src="画像URL" />
                            </a>
                          </div>
                        </div>
                      </td>
                      <td>
                        <div class="_compare_layouts">
                          <!-- 以下はデフォルトの場合。実際に生成されるDOMは各レイアウト毎に異なる -->
                          <div class="_image">
                            <a href="詳細URL" onclick="...">
                              <img src="画像URL" />
                            </a>
                          </div>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      ...
                    </tr>
                    <tr>
                      ...
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>