How to add information into the Doofinder Layer

If you would like to add a reference number, availability status, or an image and so on onto your Doofinder layer, you will need to modify the results template of Doofinder by adding information as explained in the following steps. 

The Standard Template

In this example, we will be using a sample V7 script of Doofinder. 

📌 Note: If you change your Doofinder’s script version, you will also need to update the template. 

To make templating easier, separate the template from the script and identify it by using a unique ID. Then reference the template by the ID in the layer configuration script. Keep in mind that the template must be declared before the Doofinder script. 

Here’s how your basic template should look like, including the tag implementing your script:

<script type="text/x-mustache-template" id="df-results-template">
{{#is_first}}
  {{#banner}}
    <div class="df-banner">
      <a {{#blank}}target="_blank" rel="noopener noreferer"{{/blank}} href="{{link}}" data-role="banner" data-banner="{{id}}">
        {{#image}}
        <img src="{{#remove-protocol}}{{image}}{{/remove-protocol}}">
        {{/image}}
        {{#html_code}}
        {{{html_code}}}
        {{/html_code}}
      </a>
    </div>
  {{/banner}}
{{/is_first}}
{{#total}}
  {{#results}}
    <div class="df-card" data-role="result">
      <a class="df-card__main" href="{{#url-params}}{{{link}}}{{/url-params}}" data-role="result-link" data-dfid="{{dfid}}">
        {{#image_link}}
          <figure class="df-card__image">
            <img src="{{#remove-protocol}}{{image_link}}{{/remove-protocol}}" alt="{{title}}">
          </figure>
        {{/image_link}}
        <div class="df-card__content">
          <div class="df-card__title">{{title}}</div>
          <div class="df-card__description">{{{description}}}</div>
          {{#price}}
          <div class="df-card__pricing">
            <span class="df-card__price {{#sale_price}}df-card__price--old{{/sale_price}}">
              {{#format-currency}}{{price}}{{/format-currency}}
            </span>
            {{#sale_price}}
              <span class="df-card__price df-card__price--new">
                {{#format-currency}}{{sale_price}}{{/format-currency}}
              </span>
            {{/sale_price}}
          </div>
          {{/price}}
          {{#df_rating}}
          <div>
            <div class="df-rating" title="{{df_rating}}">
              <div class="df-rating__value" style="width: {{#rating-percent}}{{df_rating}}{{/rating-percent}}">
                <i>★</i><i>★</i><i>★</i><i>★</i><i>★</i>
              </div>
              <div class="df-rating__placeholder">
                <i>★</i><i>★</i><i>★</i><i>★</i><i>★</i>
              </div>
            </div>
          </div>
          {{/df_rating}}
        </div>
      </a>
    </div>
  {{/results}}
{{/total}}
{{^total}}
  {{#noResultsHTML}}{{{noResultsHTML}}}{{/noResultsHTML}}
  {{^noResultsHTML}}
    <p class="df-no-results">{{#translate}}Sorry, no results found.{{/translate}}</p>
  {{/noResultsHTML}}
{{/total}}
</script>

<!-- End of mustache template -->

<!-- Doofinder script starts here -->
<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')
);
var dfClassicLayers = [{
  "queryInput": "xxx",
  "hashid": "xxxxxx",
  "urlHash": false,
  "zone": "eu1",
  "display": {
    "lang": 'xx',
    "align": "center",
    "results": {
      "template": document.getElementById('df-results-template').innerHTML
    }
  }
}];
</script>
<!-- Doofinder script ends here -->  
            

In the script, you can see that the same unique ID is used to define the template as follows: 

<script type="text/x-mustache-template" id="df-results-template">;

In the script: 

"template": document.getElementById('df-results-template').innerHTML

If you want to use the same template in the mobile version, you will need to invoke the modified template by adding the following to your script:

  "mobile": {
    "display": {
      "results": {
        "template": document.getElementById('df-results-template').innerHTML
      }
    }
  }

Your final script results are as follows:

<!-- Doofinder script starts here -->
<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')
);
var dfClassicLayers = [{
  "queryInput": "xxx",
  "hashid": "xxxxxx",
  "urlHash": false,
  "zone": "eu1",
  "display": {
    "lang": 'xx',
    "align": "center",
    "results": {
      "template": document.getElementById('df-results-template').innerHTML
    }
  }
  "mobile": {
    "display": {
      "results": {
        "template": document.getElementById('df-results-template').innerHTML
      }
    }
  }
}];
</script>
<!-- Doofinder script ends here -->  

How to add the product reference in the Doofinder layer

Suppose your reference field is named “mpn” in your product data feed. You then want to display it just between the title and the price in your Doofinder layer. To do this, you will need to add a new line in the template by creating a <div> such that the reference will be a unique class that can be modified easily with CSS code (size, colours, fonts etc).

The name given in this case is “df-card_mpn”. 

You’ll then need to integrate the field name into the template so Doofinder will know which information should be displayed there. As earlier mentioned, the field name, in this case, is “mpn” and we integrate it simply like this:

{{mpn}}

  The new line will therefore be:

<div class="df-card__mpn">{{mpn}}</div>

Once you have this  <div> created with all the necessary information, you only need to position it in the template. In our example we want to display it between the title and the price as illustrated in the following script:

{{#is_first}}
  {{#banner}}
    <div class="df-banner">
      <a {{#blank}}target="_blank" rel="noopener noreferer"{{/blank}} href="{{link}}" data-role="banner" data-banner="{{id}}">
        {{#image}}
        <img src="{{#remove-protocol}}{{image}}{{/remove-protocol}}">
        {{/image}}
        {{#html_code}}
        {{{html_code}}}
        {{/html_code}}
      </a>
    </div>
  {{/banner}}
{{/is_first}}
{{#total}}
  {{#results}}
    <div class="df-card" data-role="result">
      <a class="df-card__main" href="{{#url-params}}{{{link}}}{{/url-params}}" data-role="result-link" data-dfid="{{dfid}}">
        {{#image_link}}
          <figure class="df-card__image">
            <img src="{{#remove-protocol}}{{image_link}}{{/remove-protocol}}" alt="{{title}}">
          </figure>
        {{/image_link}}
        <div class="df-card__content">
          <div class="df-card__title">{{title}}</div>
          <div class=“df-card__mpn”>{{mpn}}</div>
          <div class="df-card__description">{{{description}}}</div>
          {{#price}}
          <div class="df-card__pricing">
            <span class="df-card__price {{#sale_price}}df-card__price--old{{/sale_price}}">
              {{#format-currency}}{{price}}{{/format-currency}}
            </span>
            {{#sale_price}}
              <span class="df-card__price df-card__price--new">
                {{#format-currency}}{{sale_price}}{{/format-currency}}
              </span>
            {{/sale_price}}
          </div>
          {{/price}}
          {{#df_rating}}
          <div>
            <div class="df-rating" title="{{df_rating}}">
              <div class="df-rating__value" style="width: {{#rating-percent}}{{df_rating}}{{/rating-percent}}">
                <i>★</i><i>★</i><i>★</i><i>★</i><i>★</i>
              </div>
              <div class="df-rating__placeholder">
                <i>★</i><i>★</i><i>★</i><i>★</i><i>★</i>
              </div>
            </div>
          </div>
          {{/df_rating}}
        </div>
      </a>
    </div>
  {{/results}}
{{/total}}
{{^total}}
  {{#noResultsHTML}}{{{noResultsHTML}}}{{/noResultsHTML}}
  {{^noResultsHTML}}
    <p class="df-no-results">{{#translate}}Sorry, no results found.{{/translate}}</p>
  {{/noResultsHTML}}
{{/total}}
</script>

Clear the cache, refresh the page and you will see the reference field in your Doofinder layer.

This is how you modify the results template and add more information into the results layer.

Likewise, you can also remove some information from the layer.

Say you don’t want to display the price in the Doofinder layer, you could just remove the following lines from the template:

<div class="df-card__pricing">
        <span class="df-card__price {{#sale_price}}df-card__price--old{{/sale_price}}">
          {{#format-currency}}{{price}}{{/format-currency}}
        </span>
        {{#sale_price}}
          <span class="df-card__price df-card__price--new">
            {{#format-currency}}{{sale_price}}{{/format-currency}}
          </span>
        {{/sale_price}}
      </div>

Then your final template would look like this:

<script type="text/x-mustache-template" id="df-results-template">
{{#is_first}}
  {{#banner}}
    <div class="df-banner">
      <a {{#blank}}target="_blank" rel="noopener noreferer"{{/blank}} href="{{link}}" data-role="banner" data-banner="{{id}}">
        {{#image}}
        <img src="{{#remove-protocol}}{{image}}{{/remove-protocol}}">
        {{/image}}
        {{#html_code}}
        {{{html_code}}}
        {{/html_code}}
      </a>
    </div>
  {{/banner}}
{{/is_first}}
{{#total}}
  {{#results}}
    <div class="df-card" data-role="result">
      <a class="df-card__main" href="{{#url-params}}{{{link}}}{{/url-params}}" data-role="result-link" data-dfid="{{dfid}}">
        {{#image_link}}
          <figure class="df-card__image">
            <img src="{{#remove-protocol}}{{image_link}}{{/remove-protocol}}" alt="{{title}}">
          </figure>
        {{/image_link}}
        <div class="df-card__content">
          <div class="df-card__title">{{title}}</div>
          <div class="df-card__description">{{{description}}}</div>
          {{#price}}
          {{/price}}
          {{#df_rating}}
          <div>
            <div class="df-rating" title="{{df_rating}}">
              <div class="df-rating__value" style="width: {{#rating-percent}}{{df_rating}}{{/rating-percent}}">
                <i>★</i><i>★</i><i>★</i><i>★</i><i>★</i>
              </div>
              <div class="df-rating__placeholder">
                <i>★</i><i>★</i><i>★</i><i>★</i><i>★</i>
              </div>
            </div>
          </div>
          {{/df_rating}}
        </div>
      </a>
    </div>
  {{/results}}
{{/total}}
{{^total}}
  {{#noResultsHTML}}{{{noResultsHTML}}}{{/noResultsHTML}}
  {{^noResultsHTML}}
    <p class="df-no-results">{{#translate}}Sorry, no results found.{{/translate}}</p>
  {{/noResultsHTML}}
{{/total}}
</script>

You are now able to modify the data displayed into the Doofinder layer and further customise the search experience. 

Should you encounter any problems, please contact support@doofinder.com

Last Updated: July 2021