検索条件初期化コンポーネント¶
機能説明¶
検索条件の一部を初期化または保持することができます。
See the Pen this by BST developer (@bsearchtech)on CodePen.
設定方法¶
必須設定¶
Htmlの修正
<div data-[モード]="reset-group1"></div>
関連する設定パラメータの追加
var popfindConf = popfindConf || {};
popfindConf["data-[モード]"] = {
uid: "[UID]",
mode: "[モード]",
inputId: "q",
resetResource: [
{
name: 'group1',
label: '検索ワードのみリセット',
resets: ['searchKeyword'],
},
{
name: 'group2',
label: 'count, pageを残してそれ以外をリセット',
keeps: ['resultCount', 'resultPage'],
},
{
name: 'group3',
label: '絞り込みグループgroup-pathsのみリセット',
resets: ['attributes:group-paths'],
}
]
};
| パラメータ名 | データ型 | デフォルト値 | 説明 |
|---|---|---|---|
| resetResource | resetResourceの要素を要素に持つ配列 | [resetResourceのデフォルト値を持つオブジェクト] | リセット機能をカスタマイズします。 |
resetResourceの要素¶
| キー名 | データ型 | デフォルト値 | 説明 |
|---|---|---|---|
| name | 文字列 | '' | domと紐づけるための識別子。data-[モード]=reset-[name] のように指定する。 data-[モード]=reset とした場合、resetResource のデフォルト値または先頭が適用される。 |
| label | 文字列 | reset | リセットボタンに表示する文字列 |
| resets | 検索条件を要素に持つ配列 | ['searchKeyword', 'resultPage', 'resultCount', 'sortOrder', 'attributes', 'price', 'lastModified', 'numeric1', 'numeric2', 'numeric3', 'numeric4', 'numeric5'] | リセットさせる検索条件を指定します。 |
| keeps | 検索条件を要素に持つ配列 | [] | リセットさせない検索条件を指定します。 |
※ resets と keeps に同じ状態を指定した場合、keeps が優先されます。
※ resets に空配列が指定された場合、リセットされません。
検索条件¶
| 条件名 | 説明 |
|---|---|
| searchKeyword | 検索ワード |
| resultPage | 検索結果表示ページ |
| resultCount | 検索結果表示件数 |
| sortOrder | 並び順 |
| price | 価格絞り込み |
| numericN (1 ~ 5) | 数値絞り込み |
| lastModified | 最終更新日絞り込み |
| attributes:[group 名] (※) | 属性絞り込み |
※ attribute は group 名を指定することで group ごとにリセットできます。
省略するとすべての attributes が対象になります。