おすすめリンクコンポーネント¶

機能説明¶

おすすめリンクを表示します。
おすすめリンクは、事前にデータを管理画面から登録することにより、通常の検索結果とは別に、サイト利用者が検索したキーワードなどの条件にマッチした時のみ表示されるレコードの事です。

表示には、おすすめリンクデータの他に、
グループ名に対応したおすすめリンクリソースが必要です。
存在しないグループ名を指定した場合、警告が表示されます。

おすすめリンクリソースファイルにより表示バリエーションを選択し、
見た目を変更することができます。
存在しないバリエーションやバリエーションが未指定の場合は type1 となります。

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

設定方法¶

必須設定¶

Htmlの修正

<div data-recommendlinks="recommendlinks-group1"></div>

リソースファイルの作成

おすすめリンクリソースファイル¶

おすすめリンクリソースファイルは、おすすめリンク UID、表示・絞り込み条件を指定したグループを定義し、おすすめリンクコンポーネントを用いておすすめリンクを表示するためのファイルです。

前提

利用には、おすすめリンク UID が必要になります。

おすすめリンク機能を使用しない場合、このファイルを作成、読み込みする必要はありません。

おすすめリンク設定タグを記述します。

// おすすめリンク設定タグ
var popfindConf = popfindConf || {};
popfindConf["data-recommendlinks"] = {
  uid: "[おすすめリンク UID]",
  mode: "[モード]",
  recommendLinkResource: [
    {
      group: {label: "おすすめリンク", name:"group1"},
      count: 5,
    }
  ]
};

パラメータ名	データ型	デフォルト値	説明
asyncUpdate	真偽値	false	非同期モードを使うかどうか非同期モードでは状態変更時に画面の再読み込みが発生しません。すべての設定タグに同じ設定を行ってください。

親要素	子要素	型	デフォルト値	説明
group		ハッシュ		おすすめリンクコンポーネントを表示するグループの単位以下のメンバーを持つ。
	label	文字列		おすすめリンクコンポーネントで表示される見出し
	name	文字列		おすすめリンクコンポーネントを呼び出す際のコンポーネント識別子の一部
recommend_id		文字列		以前のおすすめリンク UID の設定方法 uid に設定するため、設定は不要です。
type		文字列	'type1'	おすすめリンクの表示バリエーション type1 または type2 が指定可能
count		数値	5	最大表示数
layoutOrder		配列	[]	各レコード内で表示するレイアウト。指定可能な値は「データファイルリファレンス」で表示が可能とされているフィールド未指定時にはデフォルト表示
section		文字列		出し分け用文字列を指定。指定された文字列でおすすめリンクが絞り込まれる。

以前の指定方法

モードが sitesearch の場合、以下の記述となります。

var sitesearchRecommend = [
  {
    group: {label: "おすすめリンク", name: "group1"},
    recommend_id: "[おすすめリンク UID]",
    type: "type2",
    count: 5,
    layoutOrder: ["title", "image", "url"]
  }
];

DOM 構造¶

Dom