コンポーネントリファレンス¶

コンポーネントは画面を構成する部品の単位です。

コンポーネントには、通常の使用方法である基本コンポーネントと、
条件を満たした場合に自動的に起動される特殊コンポーネントの2種類があります。

本章ではコンポーネントを利用する方法について記載します。
コンポーネントが出力するDOM構造については「DOM構造リファレンス」を参照してください。

また、コンポーネントの使用条件には、特定のフィールドにデータが登録されていることが必要なもの、有償オプションへの申込みが必要なものがあります。詳しくはお問い合わせください。

基本コンポーネント¶

基本コンポーネントを表示する場合には、表示エリア内で、

<div data-[モード]="コンポーネント識別子[-グループ名(バリエーション名)]"></div>

の様に、属性名とコンポーネント識別子を持った空要素を作成します。
※モーダルコンポーネントだけは性質上空要素にはなりません。

コンポーネント識別子の一部に表示バリエーション名やグループ名が含まれるコンポーネントもあります。

popfindConf["data-[モード]"] の様に
ポップファインド設定タグの定義を行った場合、ポップファインド設定タグの定義で使用した名称が属性名となります(この場合は data-[モード])。

コンポーネントは、それぞれ決まったDOMを出力します。

例えば、表示エリアで、
searchResultsコンポーネントとpagenatorコンポーネントを使用したい場合、

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

という指定になります。

基本コンポーネントの一覧を以下に示します

コンポーネント名	識別子	備考
属性絞り込みコンポーネント	attributes-[グループ名]
表示件数変更コンポーネント	countselector(-[バリエーション名])
モーダルコンポーネント	modal
ページ番号変更コンポーネント	pagenator
検索ステータスコンポーネント	searchstatus
詳細検索ステータスコンポーネント	searchstatusfull
並び順変更コンポーネント	sortselector
検索結果コンポーネント	searchresults
チェック履歴コンポーネント	checkeditems
グループ表示変更コンポーネント	groupingselector	グルーピング用データが必須
おすすめリンクコンポーネント	recommendlinks-[グループ名]
関連キーワードコンポーネント	relatedkeywords-[グループ名]
キーワードランキングコンポーネント	keywordranking(-[グループ名])
レコメンドコンポーネント	popwiz(-[グループ名])	オプションの申し込みが必須
最終更新日絞り込みコンポーネント	lastmodifiedselector(-[グループ名])	企業サイト向けのみ使用可
ハッシュタグコンポーネント	hashtag-[グループ名]	オプションの申し込みが必須

特殊コンポーネントは基本コンポーネントとは異なり、特定の起動条件を満たした場合に自動的に起動されます。

特殊コンポーネントを以下に示します。

起動条件
設定パラメータで指定したinputIdが画面上に存在した場合

説明
設定パラメータで指定したinputIdに従い、検索窓に検索キーワードを入れます
inputIdに指定された input要素が存在しない場合は何もしません
inputIdについて詳しくは、「設定パラメータリファレンス」を参照ください。