2. 検索結果を設置する Ver.2 ( 推奨 )

2. 検索結果を設置する Ver.2 ( 推奨 )

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


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

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

<mf-search-box ajax-url="https://finder.api.mf.marsflag.com/api/v1/finder_service/documents/{サービス識別名}/search" ></mf-search-box> <!-- ↓オーガニック用エレメント --> <mf-search-results></mf-search-results>
青字の部分はお客様によって異なります。

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


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

これで完成です!

3) 完成イメージ



参考:


    • Related Articles

    • 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) ...
    • 2. 検索結果を設置する

      1) 検索結果を表示したいhtmlファイルの<head>〜</head>の中に、以下のタグを埋め込んでください。  必ず直リンクでcssを読み込んでください。デザインを編集されたい場合はオーバーライドしてください。 <!-- ↓CSS -->    <link href="//c.marsflag.com/mf/mfx/1.0-latest/css/mfx-serp.css" rel="stylesheet" type="text/css" media="all" ...
    • 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" ...
    • 0. はじめに Ver.2 ( 推奨 )

      本章は、カスタムエレメントVer.2をご利用のお客様向けのマニュアルとなります。 ご利用のカスタムエレメントのバージョンの確認方法は、こちら に掲載しております。
    • 検索結果画面からマーズフラッグのロゴを消したいです

      Q. 検索結果画面からマーズフラッグのロゴを消したいです。 A.非表示としていただくことが可能です。 以下のCSSを検索結果設置ページの"mf-search.css"の読み込みの後へ追加してください。 -----ココカラ----- <style> div.mf-search-results_mars-logo {display:none} </style> -----ココマデ----- 参考: 2. 検索結果を設置する Ver.2 ( 推奨 ) カスタムエレメント技術資料