チェック履歴コンポーネント¶

前提

機能説明¶

最近チェックした商品を表示します。
最近チェックした商品の対象になるのは、検索結果コンポーネント、チェック履歴コンポーネントで選択された商品です。

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

設定方法¶

必須設定¶

Htmlの修正

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

任意設定¶

表示用メッセージの変更

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

var sitesearchMessage = {
    checkedItems: {
        label: '最近チェックした商品',
        clear: '履歴をクリア',
        noItems: '最近チェックした商品はありません',
    },    
};

キー名	デフォルト値	説明
label	最近チェックした商品	チェック履歴コンポーネントのラベル
clear	履歴をクリア	チェック履歴コンポーネントでチェックした商品をクリアするリンクのテキスト
noItems	最近チェックした商品はありません	チェック履歴コンポーネントで商品が１件も存在しない場合に表示されるテキスト

関連する設定パラメータの追加

var popfindConf = popfindConf || {};
popfindConf["data-[モード]"] = {
    uid: "[UID]",
    mode: "[モード]",
    inputId: "q",

    checkedItemLimit: 5,
    chechedItemLifeTime: 604800,
    checkedItemLayoutOrder: ["image", "title"],
    checkedItemClickHook: (item) => {},
};

パラメータ名	データ型	デフォルト値	説明
checkedItemLimit	数値	5	最近チェックした商品を保存・表示する個数上限値は20です
checkedItemLifeTime	数値	604800	最近チェックした商品を保存する期間(秒数) 最後にクリックされてからこの設定秒数を超えた商品はチェックした商品のリストから削除されます
checkedItemLayoutOrder	配列	[ "image", "title" ]	最近チェックした商品を保存・表示する内容を指定します。指定できる値はlayoutOrderで指定可能なレイアウト一覧を参照してください。
checkedItemClickHook	関数	(item) => {}	チェック履歴がクリックされたときに発火するフック関数です。詳細はフック関数リファレンスを参照してください。

dom構造¶

Dom

チェック履歴コンポーネント¶

チェック履歴コンポーネントは設定パラメータの内容に応じて
DOM 構造が変化します。
レイアウトの指定方法について詳しくは「設定パラメータリファレンス」をご参照ください。

利用可能なレイアウトの DOM 構造については下記を参照してください
※但し、チェック履歴コンポーネントではadd_item_listは利用できません。

<div class="_checkeditems">
  <div class="_head">
    <div class="_label">最近チェックした商品</div>
    <div class="_clear"><a href="#" onclick="...">履歴をクリア</a></div>
  </div>
  <div class="_body">
    <div class="_checkeditem">
      <div class="_image">
        <a href="詳細URL" onclick="...">
          <img src="画像URL" />
        </a>
      </div>
      <div class="_title">
        <a href="詳細URL" onclick="...">コンテンツタイトル</a>
      </div>
    </div>
    <!-- 以下、保存内容や設定内容に応じてチェックしたコンテンツが表示される -->
    <div class="_checkeditem">...</div>
  </div>
</div>