1. 検索窓を設置する Ver.1 ( 初期バージョン )

1. 検索窓を設置する Ver.1 ( 初期バージョン )

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


1） 検索窓を表示したいhtmlファイル（例 window.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）検索窓を表示したいhtmlファイル（例 window.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"

      serp-url="//xxxx.marsflag.com/result.html#/"

      ></mf-search-box>

</div>


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

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

※緑字の部分は検索結果を表示したいhtmlのパス名またはファイル名となります。（フルパスを推奨します。）


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

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


4） 完成イメージ


注意事項：
mf_finder_containerや mf_finder_header内は、DOMが再構築されるので、最小限の範囲となるよう設定してください。
marsfinder off/on は、これらクラス適用された要素内に配置すると動作しません。

参考：

    • Related Articles

    • 検索窓を設置する

      検索窓を設置する 1)検索窓を表示したいhtmlファイルの<head>〜</head>の中に、以下のタグを埋め込んでください。  必ず直リンクでcssを読み込んでください。デザインを編集されたい場合はオーバーライドしてください。 <!-- ↓CSS --><link href="//c.marsflag.com/mf/mfx/1.0-latest/css/mfx-sbox.css" rel="stylesheet" type="text/css" media="all" ...

    • 0. はじめに Ver.1 ( 初期バージョン )

      本章は、カスタムエレメントVer.1をご利用のお客様向けのマニュアルとなります。 ご利用のカスタムエレメントのバージョンの確認方法は、こちら に掲載しております。

    • 1. 検索窓を設置する Ver.2 ( 推奨 )

      ステップ1★検索窓を表示したいhtmlファイルにタグを埋め込む 1）検索窓を表示したいhtmlファイル（例 window.html）の<body>～</body>の中に、以下のタグを埋め込んでください。　 <!-- ↓検索窓用カスタムエレメント --> <mf-search-box ajax-url="https://finder.api.mf.marsflag.com/api/v1/finder_service/documents/{サービス識別名}/search" ...

    • 4. カテゴリを利用する Ver.1 ( 初期バージョン )

      1） 管理画面の「カテゴリ確認」にてカテゴリを登録します。 カテゴリの登録方法は、2. カテゴリを利用するを参照してください。 2） クロール完了後、検索結果画面の検索窓の下に、カテゴリがプルダウンで表示されるようになります。 3） 完成イメージ 検索窓ページから結果ページに遷移した場合は、上記対応で完了となりますが、 検索窓だけのページにカテゴリを表示したい場合や、 遷移しない状態でも検索結果画面にカテゴリを表示したい場合は、 ...

    • 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） ...