How to add information into the Doofinder Layer

If you want to add the reference number, the availability state, an image… in the Doofinder Layer, you need to modify our Results Template.

This is a very easy process that will let you customize and improve the search layer as you want.

Just follow our guide and don’t hesitate to contact support@doofinder.com if you face any difficulties.

The standard Template

The first thing you need is the template, in this example we will use the one corresponding to the V7 script.

Remember that if you change you Doofinder script version, you will also need to update the template.

To make templating easier, we will separate the template from the script and identify it by a unique ID. We will then reference the template by the ID in the layer configuration script. Remember that the template must be declared before the Doofinder script.

Here is how should look your basic template and the tag implementing it in your 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__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}}


<!-- 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 -->  

You can see that we are using the same unique ID to refer to the template:

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

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

Now let’s see how we can customize this template with some examples.

How to add the product reference in my Doofinder layer

Let’s say that in your product data feed, you reference field is named “mpn” and you want to display it just between the title and the price in your Doofinder layer.

You’ll need to create a new line in the template:

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

We will create a <div> so the reference will be a unique class that we can modify easily with CSS code (size, colours, font…).

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

Now we need to integrate the field name into the template so Doofinder will know which information should be displayed there.

Like we said, the field named in this case is “mpn” and we integrate it simply like this: {{mpn}}.

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

{{#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>
````

That's it! Clear the cache, refresh the page and you will see the reference field in your Doofinder layer. 

Easy right? Now you know how to modify the results template and can add more information into the results layer. 

## If I can add information in the layer, I should be able to remove some as well? 

Let's say you don't want to display the price into the Doofinder layer. 

You could just remove the following lines of 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>

“`
So your 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 customize even more the search experience.

If you encounter any difficulties configuring the template, get in touch with our support team (support@doofinder.com).