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

What we want
Preconditions
Lets do it
- Prepare the layers
- Place the scripts
  - One code in every page
  - One code to rule them all

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:

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'));

  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>

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")) {
    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'));

    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>