How to combine the classic or compact layer with the embedded layer.

or send an email to support@doofinder.com

Doofinder offers several types of layers that you can use in your page. The most typical way to use it is to install only one of them in your entire site, but this is not the only way. In this article, we will show you how to combine the classic layer with the embedded layer. In this example we use the classic layer, but if you prefer, you can use the compact layer instead of the classic layer in the same way.

What we want

What we want is to have a search input box where the users can do their searches. When the user write in this box, the classic layer is opened and it shows the results. The following picture is an example of this behavior:



So far, this is the normal behavior of the classic layer. But we want to change the normal behavior when the user presses the ENTER key. When this occurs, the user must be redirect to a page with the embedded layer installed, where if the user change the term he wants to search, the classic layer does not appears, otherwise the embedded is updated with the new results.



Preconditions

We need to satisfy some requirements before start to coding.

  • We need a Doofinder account with a Search Engine created.
  • A page with a blank container where the embedded layer will be placed. In the following image, the area painted yellow represents this blank container:



NOTICE: As example in the code, you can see searchResultsContainer as insertionPoint. You need to change it to your own blank container id.

  • It is necessary to write code, so we need to know where the source code of the page is.

Lets do it

Prepare the layers

We start by configuring both layers.

First, we will show the necessary code to install the classic layer:

<script>
  var doofinder_script ='//cdn.doofinder.com/media/js/doofinder-classic.7.latest.min.js';
  (function(d,t){var f=d.createElement(t),s=d.getElementsByTagName(t)[0];f.async=1;
  f.src=('https:'==location.protocol?'https:':'http:')+doofinder_script;
  f.setAttribute('charset','utf-8');
  s.parentNode.insertBefore(f,s)}(document,'script'));

  //This is an example. This path must be configured with your own search results path

  let embeddedPath = "embedded.html" 

  var dfClassicLayers = [{
    "queryInput": "#query-input",
    "hashid": "HASHID",
    "urlHash": true,
    "zone": "eu1",
    "callbacks": {
      "loaded": (instance) => {
        instance.layer.queryInput.on("keydown", (e) => {
          if (e.keyCode == 13) {
            document.location = embeddedPath + "#/embedded/" +
              instance.layer.controller.serializeStatus();
            e.preventDefault();
          }
        })
      }
    }
  }]
</script>

NOTICE: The most important part of this code is the embeddedPath variable. In this variable we have to save the patch of the page where the embedded layer is.

In other hand, the necessary code to install the embedded layer is:

<script>
var doofinder_script ='//cdn.doofinder.com/media/js/doofinder-embedded.7.latest.min.js';
(function(d,t){var f=d.createElement(t),s=d.getElementsByTagName(t)[0];f.async=1;
f.src=('https:'==location.protocol?'https:':'http:')+doofinder_script;
f.setAttribute('charset','utf-8');
s.parentNode.insertBefore(f,s)}(document,'script'));

var dfEmbeddedLayers = [{
  "queryInput": "#query-input",
  "hashid": "HASHID",
  "urlHash": true,
  "zone": "eu1",
  "display": {
    "insertionPoint": "#searchResultsContainer",
  }
}];
</script>

This code is the same that you can see in embedded.

Place the scripts

Once we have the code, we must write it in the correct place. We have two alternatives to do this.

One code in every page

You can place each layer in every page where you want. On this way, you should copy the classic layer code in every page except in one where the embedded layer is. In this page you have to write the embedded layer code.

One code to rule them all

This way may be easier. If you are pretty sure that the id of the embedded layer container is unique in your entire web page, you can check if this container exists. If it exists, use the embedded layer code, else use the classic layer code. Something like this:

<script>
  if (!document.getElementById("searchResultsContainer")) { //CSS SELECTOR ID OF YOUR BLANK CONTAINER
    var doofinder_script ='//cdn.doofinder.com/media/js/doofinder-classic.7.latest.min.js';
    (function(d,t){var f=d.createElement(t),s=d.getElementsByTagName(t)[0];f.async=1;
    f.src=('https:'==location.protocol?'https:':'http:')+doofinder_script;
    f.setAttribute('charset','utf-8');
    s.parentNode.insertBefore(f,s)}(document,'script'));

    //This is an example. This path must be configured with your own search results path.

    let embeddedPath = "embedded.html"

    var dfClassicLayers = [{
      "queryInput": "#query-input",
      "hashid": "HASHID",
      "urlHash": true,
      "zone": "eu1",
      "callbacks": {
        "loaded": (instance) => {
          instance.layer.queryInput.on("keydown", (e) => {
            if (e.keyCode == 13) {
              document.location = embeddedPath + "#/embedded/" +
                instance.layer.controller.serializeStatus();
              e.preventDefault();
            }
          })
        }
      }
    }];
  } else {
    var doofinder_script ='//cdn.doofinder.com/media/js/doofinder-embedded.7.latest.min.js';
    (function(d,t){var f=d.createElement(t),s=d.getElementsByTagName(t)[0];f.async=1;
    f.src=('https:'==location.protocol?'https:':'http:')+doofinder_script;
    f.setAttribute('charset','utf-8');
    s.parentNode.insertBefore(f,s)}(document,'script'));

    var dfEmbeddedLayers = [{
      "queryInput": "#query-input",
      "hashid": "HASHID",
      "urlHash": true,
      "zone": "eu1",
      "display": {
        "insertionPoint": "#searchResultsContainer",
      }
    }];
  }
</script>

NOTICE: You need to check both, the embeddedPath variable, and the insertionPoint CSS selector. If they're not configured properly, doofinder will not work.