属性絞り込みコンポーネント¶

機能説明¶

検索結果コンポーネントと共に使用することで、検索結果を特定の条件で絞り込むことができます。

リソースファイルで絞り込みグループを作成することができます。
絞り込みグループとは、絞り込み条件をグループ化するためのものです。
各絞り込みグループ内の絞り込み条件は、OR で結合されます。
絞り込みグループ間は AND で結合されます。
OR で結合したい場合、属性絞り込みグループ間の OR 結合を参照してください。

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

設定方法¶

必須設定¶

Htmlの修正

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

リソースファイルの作成

属性リソースファイル¶

属性リソースファイルは、絞り込み用のグループとそれに所属する属性や名称を定義し、
属性絞り込みコンポーネントで使用するためのファイルです。

属性絞り込みを行わない場合、このファイルを作成、読み込みする必要はありません。

sitesearchAttribute という変数に、各値がハッシュになる配列を代入しているファイルを作成します。

注意

グループ名には次の文字列を含めることができません。
> , :
属性値には次の文字列を含めることができません。
> ,

var sitesearchAttribute = [
  {
    group: {"label": "絞り込みグループ1", "name": "group1"},
    attributes: [
      {"label": "属性1", "name": "ATTRIBUTE1", "sub_groups": ["sub_ATTRIBUTE1"]},
      {"label": "属性2", "name": "ATTRIBUTE2"}
    ]
  },
  {
    group: {"label": "絞り込みグループ2", "name": "group2"},
    attributes: [
      {"label": "属性3", "name": "ATTRIBUTE3", "class": "attr_red"},
      {"label": "属性4", "name": "ATTRIBUTE4", "class": "attr_blue"},
      {"label": "属性5", "name": "ATTRIBUTE5", "class": "attr_white"}
    ],
    type: "type2"
  },
  {
    group: {"label": "絞り込みグループ1の子", "name": "sub_ATTRIBUTE1"},
    attributes: [
      {"label": "属性1-1", "name": "ATTRIBUTE1-1"},
      {"label": "属性1-2", "name": "ATTRIBUTE1-2"},
      {"label": "属性1-3", "name": "ATTRIBUTE1-3"}
    ]
  }
];

各値となるハッシュは次のエントリを含みます。

親要素	子要素	型	デフォルト値	説明
group		ハッシュ	省略不可	属性絞り込みを行うグループの単位、同グループ間は OR 検索、異なるグループ間は AND 検索になる以下のメンバーを持つ。
	label	文字列	''	属性絞り込みコンポーネントで表示されるグループ名
	name	文字列	省略不可	属性絞り込みコンポーネントを呼び出す際のコンポーネント識別子の一部となる。URL パラメータにも使用される。
attributes		配列	省略不可	グループに所属する属性を持つ配列配列の値は以下のメンバーを持つハッシュ
	label	文字列	''	属性絞り込みコンポーネントで表示される属性名
	name	文字列	必須	TSV で定義した属性を示す値。refinements を使用する場合は項目の識別子
	refinements	配列	undefined	任意設定項目。この値が指定された場合、name の代わりにこの配列に基づいた絞り込み条件が使用される。
	query	ハッシュ	undefined	任意設定項目。この値が指定された場合、name 、refinements の代わりにこのハッシュに基づいた絞り込み条件が使用される。
	class	文字列	undefined	任意設定項目。この値が指定された場合、各属性ごとの表示時に生成される要素のクラス名が、自動生成される文字列の代わりにこの値が使用される。
	sub_groups	配列	undefined	任意設定項目。この値が指定された場合、画面上でこの属性が選択された場合、指定された子グループが表示される。
type		文字列	'type1'	任意設定項目。有効な値が指定された場合、表示バリエーションが変更される。
show_all_count		真偽値	true	任意設定項目。false が指定された場合、択一式となる表示バリエーションでの「すべての ○○」という全選択を示す選択肢において、ヒット件数を表示しない。

任意設定¶

表示用メッセージの変更

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

var sitesearchMessage = {
    attributes: {
        labelSuffix: 'の絞り込み',
        selectAllPrefix: 'すべての',
    },    
};

キー名	デフォルト値	説明
labelSuffix	の絞り込み	絞り込みコンポーネントのラベルとしてグループ名の後ろに付く
selectAllPrefix	すべての	絞り込みコンポーネントのラジオボタン／プルダウン表示時の全選択時のラベル

DOM 構造¶

Dom