検索条件初期化コンポーネント¶
前提
ポップファインド設定タグ・タグマネージャーが既に導入されていること。
機能説明¶
検索条件の一部を初期化または保持することができます。
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が対象になります。