コンテンツにスキップ

レコメンドコンポーネント

前提

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

機能説明

関連アイテムを表示します
このコンポーネントは商品詳細ページやWebクロールを行ったページに設置することができます。
識別子にグループ名が含まれます。
表示にはグループ名に対応したレコメンドリソースが必要です。
グループ識別子を指定しない場合、レコメンドリソースの先頭の定義が使用されます。
存在しないグループ名を指定した場合、警告が表示されます

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

設定方法

必須設定

Htmlの修正
<div data-popwiz="popwiz-group1"></div>
リソースファイルの作成

レコメンド(popwiz)リソースファイル

レコメンド(popwiz)リソースファイルは、表示するレコメンドの解析手法や表示件数を定義し、レコメンド(popwiz)コンポーネントを用いて表示する為のファイルです。

レコメンドの表示にはレコメンド機能オプションへのご契約が必要です。
レコメンド機能を使用しない場合、このファイルを作成、読み込みする必要はありません。

sitesearchPopwiz という変数に、各値がハッシュになる配列を代入しているリソースを作成します。

また、popwizResource という設定パラメータに本リソースの内容をそのまま渡すこともできます。

以下にリソース例を示します

  var sitesearchPopwiz = [
    {
        group:{label:"おすすめ商品", name:"group1"},
        popwiz_id: '.....',
        layoutOrder: ['image','title'],
        type: 'type1',
    }
  ];

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

親要素 子要素 デフォルト値 説明
group ハッシュ グループの単位
label 文字列 おすすめ商品 表示されるレコメンドのラベル
name 文字列 レコメンドコンポーネントを識別子付きで呼び出す際のコンポーネント識別子の値の一部
popwiz_id 文字列 必須 問い合わせに使用する idを指定する。この項目が空の場合、動作しない
type 文字列 'type1' 表示のバリエーション
type1: 縦型表示(縦にレコメンドアイテムが並ぶ)
type2: 横型表示(横にレコメンドアイテムが並ぶ)
layoutOrder 配列 ['image', 'title'] 表示するレイアウト。指定可能なレイアウトは「layoutOrder で指定可能なレイアウト一覧
count 数値 5 最大表示数

任意設定

表示用メッセージの変更

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

var sitesearchMessage = {
    popwiz: {
        label: '関連ページ',
    },    
};

キー名 デフォルト値 説明
label 関連ページ レコメンドコンポーネントのラベル

dom構造

Dom

レコメンドコンポーネント

type1,type2

<!-- 以下の要素に typeを示す値が付与される -->
<div class="_popwiz _popwiz_type1">
  <div class="_label">関連ページ</div>
  <div class="_recitems">
    <div class="_recitem" id="...">
      <div class="_wrap">
        <!-- 以下、リソースファイルの内容に応じてレイアウトが表示される -->
      </div>
    </div>
    <div class="_recitem" id="...">
      <!-- 以下、関連アイテムの数もしくは表示件数の数だけ繰り返し表示される -->
    </div>
    ...
  </div>
</div>

サンプル

type1(省略時)

縦型表示

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

type2

横型表示

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