フック関数リファレンス¶

フックとは¶

フックは、フロントエンドの動作を変更するJavaScriptプログラム(フックスクリプトといいます)を呼び出すメカニズムです。
フックスクリプトはサイト管理者が作成します。(ポップファインドに付属するものではありません)

フックスクリプトは、フロントエンドからイベントに応じて、フックを通じて呼び出されます。
フックを使うことでフロントエンドの動作をある程度変更することができます。

フックの使い方¶

フックを利用するには、ポップファインドの設定パラメータの値としてフックスクリプトを設定します。
フックスクリプトは、JavaScriptの関数として実装します。

注意

フックの中には、戻り値を必要するものがあります。
本章に書かれたリファレンスで、戻り値が「なし」以外になっているフックでは必ず戻り値を返してください。
戻り値を返さない場合や、指定された以外の戻り値を返した場合の動作は保証されません。

設定パラメータで指定できるフック¶

itemClickHook()¶

説明: 検索結果が選択されたときに呼び出されます。
引数:
searchKeyword: 選択された候補語(String)
item: クリックした商品やコンテンツの情報。詳細は、「引数の詳細」を参照してください。
戻り値: 真偽値。falseを返した場合は商品ページへ遷移しません。

allActivateHook()¶

説明: 全コンポーネントが起動されたときに呼び出されます。
引数: なし
戻り値: なし

allUpdateHook()¶

説明: 全コンポーネントが表示完了したときに呼び出されます。
引数: なし
戻り値: なし

componentUpdateHook()¶

説明: 個々のコンポーネントが表示完了されたときに毎回呼び出されます。
引数:
component: 呼びだしたコンポーネントの情報詳細は、「引数の詳細」を参照してください。
戻り値: なし

popwizClickHook()¶

説明: レコメンドのアイテムが選択されたときに呼び出されます。
引数:
item: クリックした商品やコンテンツの情報。詳細は、「引数の詳細」を参照してください。
戻り値: 真偽値。falseを返した場合は商品ページへ遷移しません。

asyncActivateHook()¶

説明: 非同期モードでの状態変更前に呼び出されます。
引数:
count: 更新回数(0から始まる数値)
戻り値: なし

allAsyncUpdateHook()¶

説明: 非同期モードでの状態変更後に呼び出されます。
引数:
count: 更新回数(0から始まる数値)
戻り値: なし

checkedItemClickHook()¶

説明: チェック履歴がクリックされたときに呼び出されます。
引数:
item: クリックした商品やコンテンツの情報。詳細は、「引数の詳細」を参照してください。含まれる情報は、checkedItemLayoutOrderで指定した内容に限られます。
戻り値: 真偽値。falseを返した場合は商品ページへ遷移しません。

modalActivateHook()¶

説明: モーダルが起動されたときに呼び出されます。
引数: なし
戻り値: なし

modalUpdateHook()¶

説明: モーダルの表示が完了したときに呼び出されます。
引数: なし
戻り値: なし

extraClickHook()¶

説明: 追加で見るボタンがクリックされたときに呼び出されます。
引数:
btn: 追加で見るボタンのHTML要素
items: 追加で表示されるHTML要素の配列
戻り値: なし

各コンポーネントで指定できるフック¶

ハッシュタグコンポーネント¶

clickHook()¶

説明: ハッシュタグがクリックされたときに呼び出されます。
引数:
keyword: クリックしたハッシュタグのキーワード
戻り値: 真偽値。 false を返すと、ハッシュタグの絞り込み検索が実行されません。

フックの利用例¶

下記の例では、ポップファインドが表示完了になったときに、
ブラウザのコンソールに「popfind is here」という文字列を表示します。

// ポップファインド設定タグ
var popfindConf = popfindConf || {};
var popfindConf["data-[モード]"] = {
  uid: "[UID]",
  mode: "[モード]",
  inputid: "q",
  allUpdateHook: function() { console.log('popfind is here'); }
};