関連キーワードコンポーネント¶

前提

ポップファインド設定タグ・タグマネージャーが既に導入されていること。

機能説明¶

関連キーワードを表示します。
関連キーワードは、事前にデータを管理画面から登録することにより、特定の検索ワードにマッチした時に表示される検索キーワード候補の事です。

表示には、関連キーワード登録ファイルの他に、
グループ名に対応した関連キーワードリソースファイルが必要です。
存在しないグループ名を指定した場合、警告が表示されます

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

設定方法¶

必須設定¶

Htmlの修正

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

リソースファイルの作成

関連キーワードリソースファイル¶

関連キーワードリソースファイルは、関連キーワードコンポーネントを用いて関連キーワードを表示する際に、
その振る舞いを変更する際に作成するファイルです。

関連キーワード機能を使用しない場合、標準の振る舞いで使用する場合は、このファイルを作成、読み込みする必要はありません。

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

以下にファイル例を示します

var sitesearchRelatedKeyword = [
  {
      group: {label: "その他のキーワード", name: "group1"},
      count: 5,
      keepRefinements: true,
  }
];

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

親要素	子要素	型	デフォルト値	説明
group				関連キーワードコンポーネントを表示するグループの単位以下のメンバーを持つ
	label	文字列		関連キーワードコンポーネントで表示される見出し
	name	文字列	必須	関連キーワードコンポーネントを呼び出す際のコンポーネント識別子の値の一部
count		数値	5	最大表示件数
keepRefinements		真偽値	false	表示された関連キーワードを選択した際に、現在の絞り込み条件を引き継ぐかどうかの指定。trueを指定した場合は引き継ぐ

dom構造¶

Dom

関連キーワードコンポーネント¶

<!-- ここでは グループの名称を"人気のキーワード"、値を"GRP1" とする -->
<div data-[モード]="relatedkeywords-GRP1">
  <div class="_relatedkeywords _relatedkeywords_type1">
    <div class="_label">関連キーワード</div>
    <div class="_keywords">
      <div class="_keyword">
        <div class="_word">
          <a href="..." onclick="...">関連キーワード</a>
        </div>
      </div>
      <div class="_keyword">
        <!-- 以下、表示件数の数だけ繰り返し表示される -->
      </div>
    </div>
  </div>
</div>