MARS FINDER 2.0 Custom Element Version Setting Up Manual (2020/06)

MARS FINDER 2.0 Custom Element Version Setting Up Manual (2020/06)

MARS FINDER 2.0 Custom Element Version
The custom element version is one of the version extensions of Mars Finder 2.0search service which enables our customer to allocate the search box and search result anywhere just with 2 steps. 

Easy Setting Up of Custom Element Version
★Files to prepare
-html file of the search box（for example: window.html）
-html file of the search result (for example: result.html)

★Flow of Navigation
If a user click the button of the html file of the search box（for ex: window.html）, the browser navigates to the result page (for example: result.html).  


If the user click the button of the html file of the result page, the browser will refresh the result page and show the result.



STEP 1 ★Inserting tags in the search box html file
1) Insert the tag of following square in the search box html file (for ex: window.html) just in between <head> and </head>

<!-- ↓CSS -->
<link href="//c.marsflag.com/mf/mfx/1.0-latest/css/mfx-sbox.css" rel="stylesheet" type="text/css" media="all" charset="UTF-8">


2) Insert the tag of following square in the search box html file (for ex: window.html) just in between <body> and </body>
<div class="mf_finder_container">

<!-- Custom element for search box-->
<mf-search-box
submit-text=""
ajax-url="//xxxx.marsflag.com/xxxx__xxxx__xxxx/x_search.x"
serp-url="//xxxx.marsflag.jp/result.html#/"
></mf-search-box>

</div>
※The blue part may differ based on the each client?s information
※The green part should be the pass name or file name of the search result html（full pass recommended）


3) Insert the tag of following square in the html file of sarch box (for ex: window.html) just in front of the </body> tag.  
<script src="//c.marsflag.com/mf/mfx/1.0-latest/js/mfx-sbox.js" charset="UTF-8"></script>


STEP 2 ★Inserting the tags in the search result html file
1) insert the tags in the following square in the html file of the search result (for ex: result.html) just in between <head> and </head>
<!-- ↓CSS -->
<link href="//c.marsflag.com/mf/mfx/1.0-latest/css/mfx-serp.css" rel="stylesheet" type="text/css" media="all" charset="UTF-8">

2) insert the following tags in the square in the html file of the search result (for ex: result.html) in between <body> and </body> tag 　　
<div class="mf_finder_container">
        <!-- custom element tag of the search box -->
        <mf-search-box
           submit-text=""
           ajax-url="//xxxx.marsflag.com/xxxx__xxxx__xxxx/x_search.x"
        ></mf-search-box>
        <!-- element for ZUBA-KEN -->
        <mf-zubaken></mf-zubaken>
        <!-- element for organic -->
        <mf-search-results></mf-search-results>
</div>
※The bule part may differ based on the each client?s information

3) insert the tag of following square in the html file of search result (for ex: result.html) just in front of the tag </body>
<script src="//c.marsflag.com/mf/mfx/1.0-latest/js/mfx-serp.js" charset="UTF-8"></script>
It's already done!

★The Rendering Image 
-html file of the search box（for ex: window.html)


-html file of the search result  (for ex: result.html)