Inova Search Setup Guide

=======================================

IMPORTANT NOTICE

  1. In the Search Extension project, we made some changes to standardise the HTTP PORT for serving static contents, hence all scripts need to be updated on the consumer sites that are using phase-1 search application.

  2. We no more require node-server for serving the static assets. All these static files can be served using Nginx or Apache.

  3. Wherever you find https://www.example.com in the documentation below you need to replace that with the server-url (This is the IP or Domain/URL of the server where you are hosting JS application (link)).

  4. Support for IE10+ is completely optional. To support IE10+ browser, please add polyfills provided below in documentation.

Introduction

The search application is meant to be served remotely. hence don’t download assets and include then in your application directly.

To integrate search please follow the documentation below.

Terminologies used in the documentation:

Tech Stacks

Developers’ Guide

How to Setup the Server for serving static assets remotely.

Once confirmed, follow the instructions below:

Step-1: Preparing static assets

  1. Clone the Project from Project Link
  2. Change directory to inova-search-nodejs by typing cd inova-search-nodejs
  3. Copy and rename the default.env or dev.env file to .env in the root directory and fill the following information provided below.
    SERVER_DOMAIN = https://www.example.com // if static contents are not served from port 80, then you need to provide the port too, i.e. http://www.example.com:8080
SOLR_SERVER=http://<domain>:<port>/solr
SOLR_INDEX= <index name>
SOLR_USERNAME=
SOLR_PASSWORD=
IMAGE_PATH = <images> // images will be publicly accessible using this path (Default:IMAGE_PATH=images)
//Development Configuration (Optional Development Only)
CLIENT_IP= 127.0.0.1
CLIENT_PORT= 5000
  4. Once the file is created, run bash ./script.sh and select [2] as the option and proceed. This will install all the dependencies required.
  5. To transpile and create a single bundle for all JS files, run bash ./script.sh in the project root and select [3] as the option and wait for the process to finish.

Step-2: Server setup for Static assets to be served remotely

We are providing the example.conf for Apache here. If you willing to use Nginx please follow any of its standard configuration instruction.

Installation Guide

How to install Search on any website/CMS

Extention Project

Our Services installation

Place the following snippet on your page/template where you want to want ‘Our services’ to display.

Note:
Make sure that you append the provided script before the closing of <body/> tag in your HTML page.

<script>
    ( function ( t, s, id ) {
    var targetElem = document.querySelector( t );
    if ( targetElem !== null ) {
      var script = document.createElement( "script" );
      var style = document.createElement( "link" );
      style.rel = "stylesheet";
      style.href = "".concat( s, "/inova/service/ctstyle.min.css" );
      var head = document.querySelector( "head" );
      head.appendChild( style );
      var div = document.createElement( "div" );
      div.id = id;
      targetElem.appendChild( div );
      script.src = "".concat( s, "/inova/service/bundle.min.js" );
      targetElem.appendChild( script );
      console.log([INOVA-SEARCH]: Installed successfully);
    } else {
      console.error([INOVA-SEARCH]:"Unable to Find target to load service" );
    }
  } )( "<dom target>", "<server-url>", "centretek_our_service" );
 </script>

To make the script work, you need to replace two variables <dom taget> and <server-url> in the above snippet according to your configurations.

  1. <dom target>: This is HTML tag id or class name of the HTML element where you want to load the services.
    eg <div id="our-service"></div> is avialable in HTML, then replace <dom target> with #our-service in the script

    Note:
    The provided Dom target must be unique and should be available on the page.

  2. <server-url>: The IP or Domain/URL of the server where you are hosting JS application. The <server-url> must not contain any trailing slashes.

Search Extension installation
(Modal Search and Main Search)

Note
1. Make sure that you append the provided script before the closing of <body/> tag in your html page.
2. Both Modal and Main search are served via single script hence can’t appear simultaneously on a single page due to the limitation of single Dom target use of react JS

Please place the following snippet on your page/template where you want to make Search to appear.

  <script>
    (function (t, s, id) {
      var searchPath='search';
      window.localStorage.setItem('search-path', searchPath);
      var targetElem = document.querySelector(t);
      var resource = 'search';
      if (targetElem !== null) {
          var script = document.createElement("script");
          var style = document.createElement("link");
          style.rel = "stylesheet";
          style.href = "".concat(s, "/inova/search/ctstyle.min.css"));
          var head = document.querySelector("head");
          head.appendChild(style);
          var div = document.createElement("div");
          div.id = id;
          targetElem.appendChild(div);
          script.src = "".concat(s, "/inova/search/bundle.min.js"));
          targetElem.appendChild(script);
          console.log([INOVA-SEARCH]: Installed successfully);
      } else {
          console.error([INOVA-SEARCH]:"Unable to Find target to load Search" );
      }
  })(<dom target>, "<server-url>", "centretek_search_app");
   </script>

To make the script work you need to replace the two variables <dom taget> and <server-url> in the snippet above according to your configurations.

  1. <dom target>: This is HTML tag id or class name of the HTML element where you want to load the search.
    eg: if <div id="my-search"></div> is avialable in HTML then replace <dom target> with #my-search in the script

    Note
    The provided Dom target must be unique and available on the page.

  2. <server-url>: The IP or Domain/URL of the server where you are hosting JS application. the <server-url> must not contain any trailing slashes.

NOTE (Optional)
By default, the search will use /search as the path to serve Main search page. If you wish to open the Main search page on another path, set the value of variable searchPath to your desired path in the above snippet.

Phase-1 Search

Note
There is a single script for installing header search and main search. You have to add the provided installation script on your website.

  1. There are some dependencies below that needs to be installed before proceeding (important)

    Location Requiremnt Script
    <head> section of HTML Must Included <link rel="stylesheet" href="https://www.example.com/centretek_search.min.css">
    <head> Section of HTML ignore if already present <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    before </body> after Loading JQuery Must include (after Jquery) <script src="https://www.example.com/centretek_search.js"></script>
    inside <body> before centretek_search.js Ignore if already present <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" ></script>

  2. Copy the installation script below, and place it in the page/template of the website.

    Note:
    Make sure that you append the provided script before the closing of <body/> tag in your HTML page.

      var fetchConfig = function fetchConfig( domain, serverName ) {
    return new Promise( function ( resolve, reject ) {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function () {
        if ( this.readyState === 4 && this.status === 200 ) {
          resolve( JSON.parse( this.responseText )[ domain ] );
        }
      };
      xhttp.open( "GET", "".concat( serverName, "/configuration.json" ), true );
       xhttp.setRequestHeader('Access-Control-Allow-Origin', 'https://inova-search.com');
      xhttp.send();
    } );
  };

  var embedScript = function embedScript( appId, target, config, serverName ) {
    localStorage.setItem( "config", config );
    var targetElement = document.querySelector( target );
    var appdiv = document.createElement( "div" );
    appdiv.id = appId;
    targetElement.appendChild( appdiv );
    var script = document.createElement( "script" );
    script.src = "".concat( serverName, "/bundle.min.js" );
    document.body.appendChild( script );
  };

  ( function ( appId, target, serverName, domain = "inova" ) {
    localStorage.setItem( "domain", domain );
    var targetElement = document.querySelector( target );
    if ( !Boolean( targetElement ) ) {
      console.error( "[CENTRETEK_JS] No Valid Target is found" );
      return;
    };
    if ( document.documentMode !== 9 && window.navigator.appVersion.indexOf( "MSIE 9." ) == -1 ) {
      fetchConfig( domain, serverName )
        .then( function ( response ) {
          embedScript( appId, target, JSON.stringify( response || {} ), serverName );
          console.log( "[CENTRETEK_JS] Script installed successfully" );
        } )
        .catch( function ( error ) {
          console.error("[CENTRETEK_JS] Unable to find the configuration.json", error );
        } );
    } else {
      console.log("[CENTRETEK_JS]: You are using unsupported browser." );
    }
  } )( "centretek_react_application", "<dom target>", "<server-url>", "<consumer-site-domain>" );

    To make the script work, you need to replace three variables <dom taget>, <server-url> and <consumer-site-domain> in the snippet provided above, according to your configurations.

  1. <dom target>: This is HTML tag id or classname of the HTML element where you want to load the search.
    eg: if <div id="my-search"></div> is avialable in HTML, then replace <dom target> with #my-search in the script

    Note:
    The provided Dom target must be unique and should be available on the page.

  2. <server-url>: The IP or Domain/URL of the server where you are hosting JS application. The <server-url> must not contain any trailing slashes.

  3. <consumer-site-domain> choose any domain name below

FAQ

PHASE-1 Search

Extension Search