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

前提

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

機能説明¶

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

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

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

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

設定方法¶

必須設定¶

Htmlの修正

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

リソースファイルの作成

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

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

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

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

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

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

    },
    {
      group: {name:"g2", label:"おすすめリンク２"},
      recommend_id: "[おすすめリンク UID]",
      count:1,
      section: 'english'
    }
  ];

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

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

補足

※1: 登録されたデータによって、特定のフィールドでの表示・絞り込みが出来ない場合があります。
※2: おすすめリンク UID が不明な場合はお問い合わせください

dom構造¶

Dom

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

おすすめリンクコンポーネントはリソースファイルの内容に応じて
DOM 構造が変化します。
指定方法について詳しくは「リソースファイルリファレンス」をご参照ください。

利用可能なレイアウトの DOM 構造に付いては下記を参照してください

<!-- ここでは グループの名称を"おすすめリンク"、値を"GRP1" とする -->
<!-- type1, type2 共通のレイアウトとなる -->
<div data-recommendlinks="recommendlinks-GRP1" class="_[モード]_component">
  <div class="_recommendlinks">
    <div class="_label">おすすめリンク</div>
    <div class="_links">
      <div id="..." class="_link">
        <div class="_wrap">
          <!-- 以下、リソースファイルの内容に応じてレイアウトが表示される -->
        </div>
        <div id="..." class="_link">...</div>
        <!-- 以下、検索結果の数もしくは表示件数の数だけ繰り返し表示される -->
        <div></div>
      </div>
    </div>
  </div>
</div>