設定パラメータリファレンス¶
設定パラメータとは¶
サーチ設定タグの中にパラメータと呼ぶ値を記述することで、
フロントエンドの設定を変更することができます。
パラメータの指定は、popfindConf[識別子] = { ... }; の中に配置してください。パラメータ指定とパラメータ指定の間にはカンマを置いてください。
例:
// サーチ設定タグ
var popfindConf = popfindConf || {};
popfindConf["data-[モード]"] = {
uid: "[UID]",
mode: "[モード]",
inputId: "q",
layoutOrder: ['title', 'thumbnail', 'price']
};
複数のタグを追加する場合、識別子は重複しない値を指定します。
例: 1 個目のタグ
popfindConf["data-[モード]-1"] = {
uid: "[UID]",
mode: "[モード]",
例: 2 個目のタグ
popfindConf["data-[モード]-2"] = {
uid: "[UID]",
mode: "[モード]",
設定パラメータ一覧¶
| パラメータ名 | データ型 | デフォルト値 | 説明 |
|---|---|---|---|
| uid | 文字列 | なし | サービスの識別コード。必須項目 |
| displayId | 文字列 | 検索結果を表示 (出力) させたい親要素の ID 。ID を指定した場合、その ID の要素の子要素にあるコンポーネントに出力を行う。指定しない場合、body タグを親要素とします | |
| inputId | 文字列 | q | 検索ボックスとなる要素の ID。複数の検索ボックスがある場合はカンマ区切りで指定 例: 3 つの検索ボックスの指定 "q,q1,q2" |
| layoutOrder | 配列 | [["seq", "title", "filetype"], ["thumbnail", "snippet"], ["filesize", "last_modified"], ["link"]] | searchResults コンポーネントにおいて、表示するレイアウトのリスト 指定できる値はlayoutOrder で指定可能なレイアウト一覧を参照してください |
| mode | 文字列 | なし | 設定パラメータや URL パラメータの設定を変更する。 契約時に発行されたモードを設定します |
| componentAttribute | 文字列 | data-[モード] | コンポーネントを起動する要素に指定する属性名 |
| styleSheetAutoLoading | 真偽値 | true | スタイルシートを自動的に読み込む。読み込む CSS は mode パラメータに依存する |
| useGrouping | 真偽値 | false | グループ検索機能を利用するかどうかの設定。true を指定した場合、グループのキーでまとめられた結果が表示される |
| pagenationType | 数値 (1 もしくは 2) |
1 | ページ番号変更コンポーネントが生成するページ番号付きのページリンクの表示方法の指定 1 を指定すると、現在のページを中心に左右にそれぞれ最大 pagenationCount のページリンクを表示される。 2 を指定すると、現在のページを含めた全ページリンクが pagenationCount になるようにページリンクが表示される。 |
| pagenationCount | 数値 | 4 | 現在表示しているページ番号の、両側何ページ分のページリンクをページャーで表示するかの指定 |
| resultCountList | 配列 | [10, 20, 30] | countSelector コンポーネントにおいて、選択可能な表示件数のリスト |
| screenId | 文字列 | default | 検索が動作している画面を統計時に識別するための識別子 |
| userQueryParamNames | オブジェクト | なし | URL パラメータ名をカスタマイズする場合の設定 設定可能な内容は後述 |
| additionalSearchKeyword | 文字列 | なし | 検索結果を指定された検索キーワードで強制的に絞り込む |
| additionalAttribute | 文字列または配列 指定可能な形式はこちら |
なし | 検索結果を指定された属性で強制的に絞り込む |
| additionalNotAttribute | 文字列または配列 | なし | 検索結果を指定された属性の ANDNOT で強制的に絞り込む。 複数指定可 使用例はこちら |
| imageLazyLoading | 真偽値 | false | 画像の遅延読み込みを行うかの指定 ブラウザの loading 属性を使用するため、動作はブラウザに依存する |
| keepSubmitState | 真偽値 | false | キーワード変更などの再検索時に、現在の検索条件を保持するかの指定 true を指定すると検索キーワード・ページ番号以外の条件が引き継がれる inputId で指定された要素の兄弟要素として検索条件を追加することにより実現する |
| keepInputWord | 真偽値 | false | 絞り込み変更などの再検索時に、検索ボックスのキーワードを引き継ぐかどうか |
| checkedItemLimit | 数値 | 5 | 最近チェックした商品を保存・表示する個数 上限値は 20 です |
| checkedItemLifeTime | 数値 | 604800 | 最近チェックした商品を保存する期間 (秒数) 最後にクリックされてからこの設定秒数を超えた商品はチェックした商品のリストから削除される |
| checkedItemLayoutOrder | 配列 | [ "thumbnail", "title" ] | 最近チェックした商品を保存・表示する内容を指定します。 指定できる値はlayoutOrder で指定可能なレイアウト一覧を参照してください |
| numericNDataMagnification | 文字列 (x1, x10, x100, x1000 から選択) |
x1 | データ登録時に小数値のデータを 10 倍 / 100 倍などして整数値に正規化して登録した場合、適用した倍率を指定 本パラメータの倍率を揃えることで、表示時に倍率が考慮されて表示されます。 この設定は、汎用数値絞り込みコンポーネント内のフォーム、および汎用数値Nをレイアウトとして表示する際に有効です |
| allowEmptyKeywordSearch | 真偽値 | true | 検索ワードが空文字のときに検索を実行するかどうか (false のときメッセージリソースのsearchstatusfull.noKeyword, searchstatus.noKeyword が表示されます。) |
| asyncUpdate | 真偽値 | false | 非同期モードを使うかどうか 非同期モードでは状態変更時に画面の再読み込みが発生しません。 すべての設定タグに同じ設定を行ってください。 |
| asyncUpdateScrollUp | 真偽値 | false | 非同期モードで状態変更時、画面をページトップまでスクロールアップするかどうか |
| layoutGroupClassName | 文字列 | "_layoutgroup" | layoutOrder で配列を指定した際に生成される div 要素のクラス名を変更できます。検索結果コンポーネントによる表示にのみ影響します |
| snippetSize | 数値 | 200 (標準サイズ) | snippet レイアウトの長さを指定。入れた数値が文字列長となる ※ ハイライトの関係から実際のサイズは指定値より前後します |
| quickPreview | 真偽値 | false | クイックプレビュー機能を有効にします。 |
| mobileMaxWidth | 数値 | 800 | モバイルと判定する最大の画面横幅 (px) これより小さいものはモバイルと判定され、クイックプレビュー機能を無効とする。0 以下の数値を指定した場合、本パラメータによる判定そのものが無効化される |
| extraResultsCount | 数値 | 0 | 検索結果の追加表示件数。1 以上の値を設定した場合、追加で見るボタンが検索結果の下部に表示されます |
| fieldsAlias | 文字列 | なし | フィールドの別名 複数指定可 |
設定パラメータの補足¶
layoutOrder で指定可能なレイアウト一覧¶
layoutOrder パラメータは検索結果コンポーネントに表示される情報 (レイアウト) を制御することができます。
表示したいレイアウトを配列で指定します。
- 設定例
// サーチ設定タグ
var popfindConf = popfindConf || {};
popfindConf["data-[モード]"] = {
uid: "[UID]",
mode: "[モード]",
inputId: "q",
layoutOrder: ["title", "thumbnail", "price"]
};
- 生成される DOM
<div class="_item">
<div class="_wrap">
<div class="_title">...</div>
<div class="_thumbnail">...</div>
<div class="_price">...</div>
</div>
</div>
また、配列の要素に配列を設定すると DOM 構造がグループ化されます。
- 設定例
// サーチ設定タグ
var popfindConf = popfindConf || {};
popfindConf["data-[モード]"] = {
uid: "[UID]",
mode: "[モード]",
inputId: "q",
layoutOrder: [["seq", "title"], ["thumbnail", "price"]]
};
- 生成される DOM
<div class="_item">
<div class="_wrap">
<div class="_layoutgroup1">
<div class="_seq">...</div>
<div class="_title">...</div>
</div>
<div class="_layoutgroup2">
<div class="_thumbnail">...</div>
<div class="_price">...</div>
</div>
</div>
</div>
各グループのクラス名 (_layoutgroupN) の接頭辞は、layoutGroupClassName で変更可能です。
| レイアウト名 | 説明 |
|---|---|
| seq | 先頭から何番目の検索結果かを示す通し番号を表示します。 |
| id | コンテンツ ID を表示します。通常 URL が表示されます。 |
| title | コンテンツのタイトルをリンク付きで表示します。クリックやタップをするとコンテンツ詳細ページ URL へ遷移します。 |
| summary | コンテンツの概要を表示します。 |
| link | URL をリンク付きで表示します。 |
| snippet | キーワードがマッチした周辺の文字列をハイライト付きで表示します。 キーワードが存在しない場合はコンテンツの先頭を表示します。 |
| thumbnail | コンテンツの画像をリンク付きで表示します。 |
| filetype | 取得したコンテンツの種別を表示します。 |
| filesize | 取得したコンテンツのサイズを表示します。 |
| domain | 取得したコンテンツのドメインを表示します。 |
| path | 取得したコンテンツのパスを表示します。 |
| last_modified | 取得したコンテンツの最終更新日を表示します。 |
| text | 表示用文字列を表示します。 |
| icons | アイコンを表示します。複数登録されている場合は複数表示されます。 |
| keywords | キーワードを表示します。複数登録されている場合は複数表示されます。 |
| keywords_exact | キーワードを表示します。複数登録されている場合は複数表示されます。 |
| keywords_forward | キーワードを表示します。複数登録されている場合は複数表示されます。 |
| keywords_alphanumeric | キーワードを表示します。複数登録されている場合は複数表示されます。 |
| attributes | 属性を表示します。複数登録されている場合は複数表示されます。 |
| additional_textN | 汎用文字列Nを表示します。(N は 1 から 10) |
| additional_linkN | 汎用リンクNを表示します。(N は 1 から 3) クリックやタップをすると汎用リンクNへ遷移します。 |
| additional_iconsN | 汎用アイコンNを表示します。(N は 1 から 3) 複数登録されている場合は複数表示されます。 |
| display_textN | 表示専用文字列Nを表示します。(N は 1 から 50) |
| group_title | グループ名を表示します。クリックやタップをするとグループページ URL へ遷移します。 |
| group_link | グループページ URL を表示します。クリックやタップをするとグループページ URL へ遷移します。 |
| group_image | グループ画像を表示します。クリックやタップをするとグループページ URL へ遷移します。 |
| 空のレイアウト | レイアウト名を「__ (アンダーバー2つ)」から始まる名称にした場合 (例: __foo, __hoge) 、指定したレイアウト名をクラス名に持つ空の div 要素を生成します。 |
sitesearch モード で layoutOrder を変更する¶
sitesearch モードで layoutOrder を変更すると CSS の適用が外れ、大きく表示が崩れます。
この問題を最小限に抑えるため、設定タグの mode パラメータは sitesearch3 を指定してください。
それ以外の [モード] と書かれた箇所は sitesearch を使ってください。
userQueryParamNames パラメータで指定可能なパラメータ一覧¶
userQueryParamNames パラメータはクエリパラメータのキーを変更することができます。
指定可能なキーの一覧はURL パラメータリファレンスを参照してください。
// サーチ設定タグ
var popfindConf = popfindConf || {};
popfindConf["data-[モード]"] = {
uid: "[UID]",
mode: "[モード]",
inputId: "q2",
userQueryParamNames: {
searchKeyword: 'q2',
resultPage: 'page'
}
};