おすすめコンテンツ属性
検索結果と関連するものをおすすめするコンポーネントです。
INFO
本コンポーネントは検索結果がないと表示されません。
また、検索結果におすすめコンテンツのデータがある場合のみ表示されます。
注意
おすすめコンテンツは管理画面からの登録が必要になります。
おすすめコンテンツの設定方法はこちらをご確認ください。
header-hidden 新
- Type:
Boolean - Default:
false
おすすめコンテンツのヘッダータイトルを非表示にするかどうか指定できる属性です。
html
<mf-featured-contents
header-hidden
></mf-featured-contents>header-text 新
- Type:
string - Default:
おすすめコンテンツ(言語によって変わります)
ヘッダータイトルのテキストを指定できる属性です。
html
<mf-featured-contents
header-text="こちらもおすすめ"
></mf-featured-contents>always-show
- Type:
Boolean - Default:
false
1 ページ目以外でもおすすめコンテンツを表示するかどうかを指定できる属性です。
html
<mf-featured-contents
always-show
></mf-featured-contents>link-target
- Type:
String - Default:
''
おすすめコンテンツのリンクを開く際のターゲットを指定できる属性です。self: 検索結果をクリックすると同一ウィンドウ内で画面遷移します。auto: 検索結果ページと同一ドメインの場合は、検索結果をクリックすると同一ウィンドウ内で画面遷移します。
INFO
この属性を設定しない場合は、どのおすすめコンテンツをクリックしても別タブで開く仕様になっています。
html
<mf-featured-contents
link-target="self"
></mf-featured-contents>html
<mf-featured-contents
link-target="auto"
></mf-featured-contents>broken-image-text 新
- Type:
String - Default:
画像が見つかりません(言語によって変わります) - MaxLength:
50
画像が見つからなかった場合(データとして受け取れていない時)に表示するテキストを指定できる属性です。
レイアウトが崩れないように、50文字以内に収まるようにしてください。
50文字を超えてもエラーにはなりませんが、50文字以降は表示されません。
html
<mf-featured-contents
broken-image-text="画像がありません"
></mf-featured-contents>max-shown-items 新
- Type:
Number - Default:
10
おすすめコンテンツの最大表示件数を指定できる属性です。
html
<mf-featured-contents
max-shown-items="3"outbound-doc-class
- Type:
String - Default:
''
検索結果が別ドメインの場合に .mf_finder_organic_docに設定されるクラスを変更することができます。
html
<mf-featured-contents
outbound-doc-class="mf_finder_organic_doc"
></mf-featured-contents>result-callback
- Type:
String - Default:
''
結果受信後のコールバック関数名を指定できる属性です。
html
<mf-featured-contents
result-callback="myResultCallbackName"
></mf-featured-contents>関数の定義は<script></script>の中などに定義していきます。
html
<script>
const myResultCallbackName = () => {
alert('myResultCallbackName');
}
</script>上記例は、検索実行時にalertが出るものになります。