2. 検索結果を設置する Ver.1 ( 必須・初期バージョン )

2. 検索結果を設置する Ver.1 ( 必須・初期バージョン )

ステップ2★検索結果を表示したいhtmlファイルにタグを埋め込む


1） 検索結果を表示したいhtmlファイル（例 result.html）の<head>～</head>の中に、以下のタグを埋め込んでください。

<!-- ↓CSS -->
<link href="https://ce.mf.marsflag.com/latest/css/mf-search.css" rel="stylesheet" type="text/css" media="all" charset="UTF-8">

2） 1）と同様に、検索結果画面の<head>～</head>の中に、以下の<meta>タグを埋め込んでください。1）の上でも下でも、隣接していなくても構いません。

<meta name="robots" content="noindex,nofollow" />


3） 検索結果を表示したいhtmlファイル（例 result.html）の<body>～</body>の中に、以下のタグを埋め込んでください。　　

<div class="mf_finder_container">

     <!-- ↓検索窓用カスタムエレメント -->

     <mf-search-box

        submit-text=""

        ajax-url="https://finder.api.mf.marsflag.com/api/v1/finder_service/documents/{サービス識別名}/search"

     ></mf-search-box>

     <!-- ↓オーガニック用エレメント -->

     <mf-search-results></mf-search-results>

</div>

※青字の部分はお客様によって異なります。

※{サービス識別名｝の部分は、お客様自身のサービス識別名の入力をお願いいたします。サービス識別名は、Mars Finderのサービス一覧内の「検索API URL」を押下することでご確認頂けます。


4） 検索結果を表示したいhtmlファイル（例 result.html）の</body>の直前に、以下のタグを埋め込んでください。

<script src="https://ce.mf.marsflag.com/latest/js/mf-search.js" charset="UTF-8"></script>

これで完成です！

5） 完成イメージ


注意事項：
mf_finder_containerや mf_finder_header内は、DOMが再構築されるので、他のHTML要素を記述しないよう、お願いいたします。
お客様サイトにて最新版でないVue2 をご利用の場合には、誤動作する可能性がございますので、最新版の 2.7.16へアップデート頂くことをお願いいたします。
​
marsfinder off/on は、これらクラス適用された要素内に配置すると動作しません。

参考：
カスタムエレメント リファレンスマニュアル Ver.1