Fullscreen Layer Reference (v6)

This document describes all the options you can use to configure the Doofinder layer in your website.

Basics

The Doofinder script that you include in your website works just fine out of the box, but its behavior is customizable with a handful of options for almost every corner case you can imagine.

Doofinder script options comes for every possible taste, from basic knowledge about dimensions and positioning to javascript ninja, so don’t worry if a few options seem somehow obscure to you. We just hope you find what is suitable for your needs, whatever «javascript-ninja-level» you’re in.

Standalone Script

This is the simplest way. This is how a Doofinder script in your webpage looks like:

<script type="text/javascript">
var doofinderCDN = '//cdn.doofinder.com/media/js/doofinder-fullscreen.6.latest.min.js';
(function(d,t){f=d.createElement(t),s=d.getElementsByTagName(t)[0];f.async=1;
  f.src=('https:'==location.protocol?'https:':'http:')+doofinderCDN;
  f.setAttribute('charset','utf-8');
  s.parentNode.insertBefore(f,s)}(document,'script')
);
var dfFullscreenLayers = [{
  toggleInput: "#query",
  hashid: '1955a94db43999fcc211f925fc85f12c',
  zone: 'eu1',
  display: {
    lang: 'es'
  }
}];
</script>

The Layer Options object

This is where all the possible options for the doofinder layer comes in

var layerOptions = {
    toggleInput: "#query",
    hashid: '1955a94db43999fcc211f925fc85f12c',
    zone: 'eu1',
    searchParams: {
      rpp: 10
    }
  }

Mandatory options

hashid

Identifies your search engine in our servers. You will find all possible hashid values in the list of search engines in the [Doofinder Admin].

{
  hashid: 'ce2c1ex5369d3r28419bzdee7bcfaa5c'
}

zone

Geographical location assigned to your search engine. All search engines in your account have the same location.

Current possible values are:

• eu1
• us1

This value is automatically added by the layer installer in the [Doofinder Admin].

{
  zone: 'eu1'
}

toggleInput

This is a CSS selector of the element the user is going to click to show the layer. It usually is an input tag but could be any clickable element in your page, like an image.

layerOptions = {
  toggleInput: '#search_query_top'
}

General Options

These are the options that affects the layer general behavior.

mainContainerId

You can define the prefix that will be used when generating a unique CSS id for the layer.

When multiple layers of the same type are in the same page, a sequential number is added to the default prefix for the second, third and so on.

If you want a different prefix for each one you can set it yourself:

var layerOptions = [
  {
    mainContainerId: 'my-first-layer',
    hashid: '...'
  },
  {
    mainContainerId: 'my-second-layer',
    hashid: '...'
  }
];

showInMobile

Instructs doofinder to show the desktop layer even if it’s being displayed on a mobile phone. Put the value true to the option to make this happen.

WARNING: You need the mobile add-on to use Doofinder in mobile devices.

googleAnalytics

The layer can send search events to your Google Analytics account. This option manages where events are sent or if this feature must be disabled.

Available options are:

• true: Default. The layer searches for any available Google Analytics tracker in your site and uses it to send search events. If you have more than one tracker in your site or you use a custom tracker name that can’t be detected by the layer, see the next option.
• <account-id>: A Google Analytics account id, like UA-XXXX-. An ad-hoc tracker will be created to send events to the specified account.

{
  googleAnalytics: 'UA-XXXXXXX-1'
}

• false: Disable Google Analytics integration completely.

redirections

When the layer is notified (through a search results response) about a redirection URL configured for the current search terms, if the user presses the <code>ENTER</code> key in the search box, she will be redirected to the URL specified from the response.

To disable redirections just set this option to false:

{
  redirections: false
}

captureForm

If your searchbox is located inside a form you can configure redirections to capture the form’s submit event. This is useful if you have any kind of icons that make the form being sent; this way you can add them the same behavior as the searchbox when you press the ENTER key.

This option is disabled by default.

{
  redirections: {
    captureForm: true
  }
}

If no parent form relative to the searchbox is found, the layer will fall back to the default behavior (capturing the ENTER key press).

WARNING: If your page uses a single form as entry point to the whole application (usually ASP forms), don’t enable this option or bad things will occur.

urlHash

Doofinder Layers (V5 and greater) stores its status in the hash part of the URL. If you don’t want to generate it, set this option to false. This option is enabled by default.

{
  urlHash: true
}

callbacks

You can configure functions that will be called in response to certain events. They are useful to change or add some extra behavior to the layer.

resultsReceived

This callback will be called each time a search response is received.

{
  callbacks: {
    /**
     * @param  {Object} response Object that contains the search response.
     *                           Use your browser dev tools to inspect it.
     */
    resultsReceived: function(response) {
      console.log(response);
    }
  }
}

hit

This function will be called each time a search result is clicked.

{
  callbacks: {
    /**
     * @param  {Node}   item The DOM node that represents the item.
     * @param  {string} url  The target URL.
     */
    hit: function(item, url) {
      if (!item.dfClicked) {
        // Add class name if item hasn't already been clicked.
        item.className += ' clicked';
      }
      computeClickSomehow(url);
    }
  }
}

loaded

This function will be called when the layer is loaded.

{
  callbacks: {
    /**
     * @param  {Object} instance Object that holds the layer and its options.
     */
    loaded: function(instance) {
      // getOptionsByContext() is fake, you should program it.
      var override = getOptionsByContext();
      // Change layerOptions
      instance.layerOptions.hashid = override.hashid;
      instance.layerOptions.display.lang = override.lang;
      // Reconfigure the layer
      instance.configure();
    }
  }
}

Display Options

These are options that affects the way the layer will be shown. These options are under the key display.

lang

Language to use. Defaults to 'en'.

Available languages are: en, es, de, fr, it. If you want to use another language you have to use custom translations, explained just below.

templateFunctions

This option allows you to define your own functions to use with Mustache. Here is an example defining myBold which simply wraps the text with the <b> html tags. Also a custom template is defined using that custom function.

NOTICE: This options is available since V6 and has no effect in previous versions.

layerOptions = {
  display: {
    templateFunctions: {
      myBold:
       function() {
          function(text, render) {
            return '<b>' + render(text) + '</b>';
          }
       }
    },
    results: {
      template: '{{#results}}<h1>{{#myBold}}{{title}}{{/myBold}}</h1>{{/results}}'
    }
  }
}

Check the Mustache documentation to get familiar with the use of this functions and its possibilities.

translations

Some text of the returned results depends on the language. i.e.: Results obtained: 566. Doofinder translates this text according to the lang option, but in some cases you may want to use your own translation, whether it’s because you’re not happy with Doofinder’s translation, your language is still not supported, or you rather use another sentence to say the same.

You need to provide an object mapping the «original» text (the default english version) with its translated counterpart:

{
  display: {
    lang: 'es',
    translations: {
     'Sorry, no results found.': 'Sorry, keine Ergebnisse.',
     'Add to Cart': 'Send to cart',
     'Results': 'Resultados Totales',
     'Search...': 'Was suchen Sie? Produkt, Marke, Kategorie, etc...',
     'View less...': 'Weniger anzeigen...',
     'View more...': 'Mehr anzeigen...',
     'Search': 'Buscar',
     'CLOSE': 'CERRAR',
     'CLEAR': 'LIMPIAR'
    }
  }

}

As you can see in the example, the first translation is just a translation to German you’d prefer over the default ('Lo sentimos, no encontramos resultados.') that would show up for the selected language (Spanish).

The second translation, however, means that you’re just not happy with the 'Add to Cart' label and you rather use 'Send to cart' for that purpose.

The example above shows the nine possible translations you can make for the current layer. Default translations will be used for those texts you don’t include in the 'translations' array.

Notice: The key sentences must be provided exactly as shown in the example. If you use 'Sorry, no results found': 'No luck', it won’t work, since there is one period missing from the Sorry, no results found. key sentence.

currency

This is an object defining how you want prices be formatted. It has 5 attributes:

• symbol: this is the symbol you want to use for your currency, it can be either an utf-8 symbol, like ‘€’ or the html escaped sequence, like ‘&euro;’
• decimal: The symbol used to separate the decimal part of the price. Usually ‘,’ or ‘.’.
• thousand: The symbol used to separate thousands in the price. Usually ‘.’ or ‘,’.
• precision: How many decimals you want your price to have.
• format: Where to put the currency symbol in relation with the price value. It is a format string: («%s %v») where %s is changed by the currency symbol and %v is changed by the price value. Say you have a price of 13 euros. Then if format is: «%s%v» the price would be shown as €13.

Say you have this currency option defined:

{
  display: {
    currency: {
      symbol: '£',
      decimal: '.',
      thousand: ',',
      precision: 2,
      format: '%s%v'
    }
  }
}

Then a price of 13211.889 would displayed as £13.211,89

wait

The time the waits since last key pressed till results are shown in the layer.

captureLength

The minimum number of chars that have to be present on the query input for a search request to be triggered.

template

A template defined here overrides the default one of the entire Layer. This is the main container and all other templates on subsections below are inserted somewhere inside this one. This is the default Layer template. You can use it as a starting point to build your own custom layer.

Warning: Be Careful, changing objects ids may break your layer. Do not use a custom template if you are not sure what you are doing.

Notice: Templates are defined using Mustache template system. You may feel more comfortable if you put the template code in a separate script and then import the template inside the layer options through its id

<script type="text/x-mustache-template" id="df-layer-template">
  <div class="df-fullscreen df-hidden" id="{{ mainContainerId }}">
    <div class="df-topbar" id="df-topbar__{{ mainContainerId }}">
      {{#showTopbar}}
      <div class="df-topbar__content">
        <a class="df-topbar__logo" href="{{ topbarLogoLink }}">
          <img src="{{ topbarLogo }}" />
        </a>
        <div class="df-searchbox">
          <input id="df-searchbox__{{ mainContainerId }}" type="text" placeholder="{{#translate}}{{ placeholderText }}{{/translate}}">
        </div>
        <a class="df-icon df-icon--close" href="#" data-role="close">
          <svg fill="#000000" height="42" viewBox="0 0 24 24" width="42" xmlns="http://www.w3.org/2000/svg">
            <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
            <path d="M0 0h24v24H0z" fill="none"/>
          </svg>
        </a>
      </div>
      {{/showTopbar}}
      {{#showHeader}}
      <div class="df-header" id="df-header__{{ mainContainerId }}"></div>
      {{/showHeader}}
    </div>
    <div class="df-layer__content">
      <div class="df-aside">
        <div class="df-aside__content" id="df-aside__content__{{ mainContainerId }}"></div>
      </div>
      <div class="df-results" id="df-results__wrapper__{{ mainContainerId }}">
        <div class="df-results__content" id="df-results__content__{{ mainContainerId }}"></div>
      </div>
    </div>
    <a class="doofinderLogo" href="http://www.doofinder.com?mktcod=REF1" target="_blank">Powered by <i>Doofinder</i></a>
    <a class="df-icon df-in df-out" href="#" data-role="scrolltop" data-scroll-in-out>
      <svg fill="#000000" height="42" viewBox="0 0 24 24" width="42" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 0h24v24H0V0z" fill="none"/>
        <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/>
      </svg>
    </a>
  </div>
</script>

wide

The wide option allows to show the results using the full screen width or restrict to determined width. If it’s true (default), results will occupy the whole screen, if it’s false the layer will occupy a maximum width (960px).

templateVars

You can set some «look & feel» stuff through this option.

• placeHolderText: the text in the search box placeholder.
• topbarLogo: the logo that will be shown in the header.
• topbarLogoLink: the url that logo will link to.

layerOptions = {
  display: {
    templateVars: {
      placeholderText: 'Search...',
      topbarLogo: "http://your_domain.com/your_logo.png",
      topbarLogoLink: "http://your_domain.com"
    }
  }
}

showMostSearched

When you open the fullscreen layer it’s empty by default. If you set this option to true then the most searched items will be shown by default.

layerOptions = {
  display: {
    showMostSearched: true
  }
}

Results configuration

urlParams

Object with parameters to add to the url of every returned item in the search results.

Say your search results are:

[
  {
    "title": "grocery product 1",
    "link": "http://www.example.com/products/P1",
    ...
  },
  {
    "title": "grocery product 2",
    "link": "http://www.example.com/products/P2",
    ...
  }
]

If you had defined the following results options:

{
  display: {
      results: {
        urlParams: {"foo": "bar", "ref": 233}
      }
  }
}

Then you search results would have been:

[
  {
    "title": "grocery product 1",
    "link": "http://www.example.com/products/P1?foo=bar&ref=233",
    ...
  },
  {
    "title": "grocery product 2",
    "link": "http://www.example.com/products/P2?foo=bar&ref=233",
    ...
  }
]

queryParam

Add a parameter with the query that triggered the search results to the url of every returned item of them. The name of the parameter is the value of this option. The value of the parameter is the query previously made.

Say you obtained the results shown in the urlParams section when you searched for «grocery». If you set:

{
  display: {
    results: {
      queryParam: 'q'
    }
  }
}

you’ve had obtained these results:

[
  {
    "title": "grocery product 1",
    "link": "http://www.example.com/products/P1?q=grocery",
    ...
  },
  {
    "title": "grocery product 2",
    "link": "http://www.example.com/products/P2?q=grocery",
    ...
  }
]

template

Here is where you can define your own templates or overwrite the default ones.

If you need to include custom fields from your data feed, you should check also the transformer option to see how to receive those fields in the json response from the server.

The templates are defined using the Mustache template system.

Here is an example which defines a very simple custom template that overrides the default:

layerOptions = {
  display: {
    results: {
      template:  '{{#results}}<h1>{{title}}</h1>{{/results}}'
    }
  }
}

Notice: To make templating easier, you can write your custom template inside a special <script type="text/x-mustache-template"> tag with a unique id. Then you can reference the template by id from the layer configuration script. The template must be declared before the Doofinder script.

Warning: Some templates are more sensitive to changes than others. Note that if you modify the default templates of the layer, the layer may malfunction in the future. To restore the correct operation of the layer simply deactivate the custom template in the layer options.

The default template is:

<script type="text/x-mustache-template" id="df-results-template">
  {{#is_first}}
    {{#banner}}
      <a class="df-banner" {{#banner.blank}}target="_blank"{{/banner.blank}} href="{{banner.link}}">
        <img src="{{banner.image}}"/>
      </a>
    {{/banner}}
  {{/is_first}}
  {{#total}}
    {{#results}}
      <div class="df-card">
        <a class="df-card__main" href="{{#url-params}}{{link}}{{/url-params }}" data-df-hitcounter="{{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}}
          </div>
        </a>
        {{#add_to_cart}}
          <div class="df-card__extra">
            <a class="df-btn df-btn--colorful" href="{{add_to_cart}}">
              {{#translate}}Add to Cart{{/translate}}
            </a>
          </div>
        {{/add_to_cart}}
      </div>
    {{/results}}
  {{/total}}
  {{^total}}
    <p class="df-no-results">{{#translate}}Sorry, no results found.{{/translate}}</p>
  {{/total}}
</script>

layerOptions = {
  display: {
    results: {
      template: document.getElementById('df-results-template').innerHTML
    }
  }
}

As you can see there is also some sections which are functions like: format-currency, remove-protocol, url-params and translate. You can also define your own functions which is explained in Template Functions section.

scrollOffset

The pixels of the scrolling that has to be made so a new page of results is loaded. Defaults to 300

Facets configuration

Inside the display object, there is an option of particular importance. The facets option. If defined, is a list that determines the order and labels of your possible facets. You can configure how the facets are shown by specific facet. You have the custom ;key where you can define which facets will be shown and how they will be shown.

{
  display: {
      facets: {
        width: "250px",
        attached: 'right',
        custom:[
          {name: "brand", shownTerms: 4, label: "Brand"},
          {name: "color", label: "Color"}
      ]
    }
  }
}

In this example, the custom option inside the facets object tells doofinder to display first the ‘brand’ facet, with the ‘Brand of choice’ label, and to display the ‘color’ facet next, using the ‘Color’ label

width

The width (absolute or relative) of the facets column. Defaults to 275px. Some example uses could be

facets: {
    width: "20%" // relative width
}

or

facets: {
    width: "300px" // absolute width
}

attached

Whether you want the facets layer «attached» to the right side or the left side of the results layer. Possible values are 'right', 'left' or ‘auto'. Defaults to ‘auto’.

startCollapsed

If you want to display the facet panels collapsed by default just set this option to true (it’s false by default).

NOTICE: This options is available since V6 and has no effect in previous versions.

{
  display: {
    facets: {
      startCollapsed: true
    }
  }
}

custom

In the key custom you can specify the facets you want to show and define how they’ll be shown.

{
  display: {
    facets: {
      custom: [
        {name: "brand", shownTerms: 4, label: "Brand"},
        {name: "best_price"},
        {name: "width", label: "Width", numericFormat: {symbol: "mm", format: "%v %s"}}
      ]
    }
  }
}

This layer will show just brand and best_price facets. These are the options you can set:

Option> Facet Type> Definition

• shownTerms> terms> How many terms will be shown in the widget
• label> terms/range> The title label for the facet
• template> terms/range> A Mustache template to shape the widget
• numericFormat> range> A Currency-like object describing format of the range facet numeric value. Only symbol and format are mandatory

Note that the template option depends on what kind of facet you are going to show. The next general options can be useful to understand range and terms facets templates.

termsTemplate

You can use this option to customize the terms facets template.

Notice: To make templating easier, you can write your custom template inside a special <script type="text/x-mustache-template"> tag with a unique id. Then you can reference the template by id from the layer configuration script. The template must be declared before the Doofinder script.

Warning: Some templates are more sensitive to changes than others. Note that if you modify the default templates of the layer, the layer may malfunction in the future. To restore the correct operation of the layer simply deactivate the custom template in the layer options.

The default termsTemplate that you can use to customize is the following:

<script type="text/x-mustache-template" id="df-facets-termsTemplate">
  {{#terms}}
    <a class="df-term" {{#extra-content}}{{index}}:{{size}}{{/extra-content}} data-facet="{{name}}" data-value="{{ key }}" {{#selected}}data-selected{{/selected}} href="#">
      {{ key }}
      <span class="df-term__count">{{ doc_count }}</span>
    </a>
  {{/terms}}
  {{#show-more-button}}{{terms.length}}:{{size}}{{/show-more-button}}
</script>

{
  display: {
    facets: {
      termsTemplate: document.getElementById('df-facets-termsTemplate').innerHTML
    }
  }
}

rangeTemplate

You can use this option to customize the range facets template.

Notice: To make templating easier, you can write your custom template inside a special <script type="text/x-mustache-template"> tag with a unique id. Then you can reference the template by id from the layer configuration script. The template must be declared before the Doofinder script.

Warning: Some templates are more sensitive to changes than others. Note that if you modify the default templates of the layer, the layer may malfunction in the future. To restore the correct operation of the layer simply deactivate the custom template in the layer options.

An example of rangeTemplate that you could use for customizing:

<script type="text/x-mustache-template" id="df-facets-rangeTemplate">
  <div class="{{ sliderClassName }}" data-facet="{{ name }}"></div>
</script>

{
  display: {
    facets: {
      rangeTemplate: document.getElementById('df-facets-rangeTemplate').innerHTML
    }
  }
}

panelTemplate

You can use this option to customize the panel that contains the facets widgets. This template is common to all panels.

NOTICE: This options is available since V6 and has no effect in previous versions.

Notice: To make templating easier, you can write your custom template inside a special <script type="text/x-mustache-template"> tag with a unique id. Then you can reference the template by id from the layer configuration script. The template must be declared before the Doofinder script.

Warning: Some templates are more sensitive to changes than others. Note that if you modify the default templates of the layer, the layer may malfunction in the future. To restore the correct operation of the layer simply deactivate the custom template in the layer options.

An example of panelTemplate that you could use for customizing:

<script type="text/x-mustache-template" id="df-facets-panelTemplate">
  <div class="df-panel" id="{{id}}" data-role="panel" data-facet="{{name}}">
    <a class="df-panel__title" href="#" data-role="panel-label" data-toggle="panel"></a>
    <div class="df-panel__content" data-role="panel-content"></div>
  </div>
</script>

{
  display: {
    facets: {
      panelTemplate: document.getElementById('df-facets-panelTemplate').innerHTML
    }
  }
}

Header configuration

As with results configuration and facets configuration, these options are defined in a header property which is itself a javascript object.

 display: {
   header: {
     show: false,
     template: ''
   }
 }

show

If this option is set to false, the header won’t be shown.

template

Works exactly like the results template option. You can set this option with a Stringcontaining a Mustache template.

Notice: To make templating easier, you can write your custom template inside a special <script type="text/x-mustache-template"> tag with a unique id. Then you can reference the template by id from the layer configuration script. The template must be declared before the Doofinder script.

Warning: Some templates are more sensitive to changes than others. Note that if you modify the default templates of the layer, the layer may malfunction in the future. To restore the correct operation of the layer simply deactivate the custom template in the layer options.

The default is:

<script type="text/x-mustache-template" id="df-fullscreen-header">
  <b>{{#translate}}Results{{/translate }}:</b> <span data-role="total">{{ total }}</span>
</script>

{
  header: {
    template: document.getElementById('df-fullscreen-header').innerHTML
  }
}

Search Parameters

These are the parameters you can add to be applied for every search made from the layer. These options will be under the searchParams key.

filters

If you want to include only results matching some condition you can use the filters parameter in your layer configuration.

See Filter parameters in the Search API reference to learn more about filters.

{
  searchParams: {
    filters: {
      categories: ['Awesome', 'Other'],
      brand: ['My Brand'],
      best_price: {
        gte: 100
      }
    }
  }
}

WARNING: Fields used to filter results must be defined as facets in the search engine. You can configure facets via the Doofinder Admin panel.

Be careful to write the filters exactly as they are on your feed.

exclude

If you want to exclude results matching some condition you can use the exclude parameter in your layer configuration.

{
  searchParams: {
    exclude: {
      categories: ['This not', 'Other'],
      brand: ['Excluded brand']
    }
  }
}

WARNING: Fields used to exclude results must be defined as facets in the search engine. You can configure facets via the Doofinder Admin panel.

sort

You can specify fields to sort results by. See (Sort Parameters):

{
  searchParams: {
    sort: [
      {'_score': 'desc'},
      {'price': 'asc'},
      {'brand': 'desc'}
    ]
  }
}

type

If you want restrict the searches to some of your datatypes. Just set this property:

{
  searchParams: {
     type: ['product', 'posts']
  }
}

In the example above you will be searching just products and posts.

query_name

If you want to execute always a specific kind of query you can set this option (see query_name in Dark magic parameters):

{
  searchParams: {
     query_name: 'fuzzy'
  }
}

min_score

The minimum score of the results. Results with scoring below this won’t be displayed.

transformer

By default when the doofinder layer makes queries receives the following data for each result:

• title: the title of the product
• type: this usually will be ‘product’
• hashid: the identificator of your Search Engine
• dfid: the doofinder id of your product
• link: the link to your product
• image_link: the image source of the product
• description: the description of the product
• price: the price of the product
• sale_price: the sale price of the product
• add_to_cart: the link to add to the cart action

If you want to display any other data you’ve indexed, first you have to set this option to null like this:

{
  searchParams: {
    transformer: null
  }
}

This will make to return all your data when querying. Then you should define your own template to display that data as you like. See the template option to see how.

You can also add all the options available in Doofinder Search API

rpp

Results per page, how many results you want to be returned in each query. Defaults to 50

Mobile Version

If you have the mobile version enabled for your search engine you can tweak some aspects of the integration. Under the option mobile you can set everything you need. Almost every option available in the main layer is available for the mobile layer as well. If you want to deactivate the mobile version for a layer just set the mobile option to false.

// NO mobile layer will be displayed
{
  mobile: false
}

maxWidth

The maximum viewport width where the mobile version will be shown. By default 767px.

{
  mobile: {
    maxWidth: 767
  }
}

toggleInput

If you have different search boxes for desktop and mobile, you can set the mobile toggleInput.

Notice: In V5 this option could be set via queryInput or toggleInput indistinctly. Since V6 the only valid option is toggleInput.

{
  mobile: {
    toggleInput: '#mobile_search_box'
  }
}

hashid

If you want to use a different SearchEngine for you mobile version you can set the hashid.

{
  mobile: {
    hashid: '1955a94db43999fcc211f925fc85f12c'
  }
}

Display Options

You can set the display options, since the mobile layer is fullscreen, positioning options have no sense.

showMostSearched

When you open the mobile layer, most searched items are shown. If you want to show an empty layer, set this option to false.

{
  mobile: {
    display: {
      showMostSearched: false
    }
  }
}

closeOnHit

Closes the mobile layer when a result is clicked. This is disabled by default but you should consider using it when your site is a one-page-application that loads URLs with AJAX without changing page location.

NOTICE: This options is available since V6 and has no effect in previous versions.

{
  mobile: {
    display: {
      closeOnHit: true
    }
  }
}

template

You can customize your layer template by adding the mobile.display.template option. Like in the rest of the custom templates, you can set it with a String containing Mustache tags.

Notice: To make templating easier, you can write your custom template inside a special <script type="text/x-mustache-template"> tag with a unique id. Then you can reference the template by id from the layer configuration script. The template must be declared before the Doofinder script.

Warning: Some templates are more sensitive to changes than others. Note that if you modify the default templates of the layer, the layer may malfunction in the future. To restore the correct operation of the layer simply deactivate the custom template in the layer options.

<script type="text/x-mustache-template" id="df-mobile-template">
  <div class="df-mobile df-hidden"{{#images.body}} style="background-image:url('{{images.body}}');"{{/images.body}} id="{{ mainContainerId }}">
    <div class="df-mobile__wrapper">
      <div class="df-mobile__header" id="df-mobile__header__{{ mainContainerId }}">
        {{#images.header}}
          <div class="df-mobile__header__image">
            <img src="{{ images.header }}">
          </div>
        {{/images.header}}
        <form action="" method="get">
          <div class="df-mobile__searchbox" data-empty="true">
            <svg fill="#606569" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
              <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
              <path d="M0 0h24v24H0z" fill="none"/>
            </svg>
            <input type="search" placeholder="{{#translate}}{{placeholderText}}{{/translate}}" id="df-mobile__searchbox__{{ mainContainerId }}">
            <button type="button" data-role="clear">{{#translate}}CLEAR{{/translate}}</button>
            <button type="button" data-role="close">{{#translate}}CLOSE{{/translate}}</button>
          </div>
          <div class="df-mobile__header__actions" id="df-mobile__header__actions__{{ mainContainerId }}"></div>
        </form>
      </div>
      <div class="df-mobile__content" id="df-mobile__content__{{ mainContainerId }}"></div>
      <button class="df-mobile__action-button df-in df-out" type="button" data-role="close" data-scroll-in-out>
        <svg fill="#606569" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg">
          <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
          <path d="M0 0h24v24H0z" fill="none"/>
        </svg>
      </button>
      <button class="df-mobile__action-button df-in df-out" type="button" data-role="scrolltop" data-scroll-in-out>
        <svg fill="#606569" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg">
          <path d="M0 0h24v24H0V0z" fill="none"/>
          <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/>
        </svg>
      </button>
    </div>
    <div class="df-mobile__overlay" data-role="toggle-filters"></div>
    <div class="df-mobile__aside">
      <div class="df-mobile__aside__actions">
        <button class="df-mobile__button" type="button" data-role="toggle-filters">{{#translate}}CLOSE{{/translate}}</button>
        <button class="df-mobile__button" type="button" data-role="clear-filters">{{#translate}}CLEAR{{/translate}}</button>
      </div>
      <div class="df-mobile__aside__content" id="df-mobile__aside__content__{{ mainContainerId }}"></div>
    </div>
  </div>
</script>

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

templateVars

Like in the desktop version of the layer, you can set variables to be used in the template. The values available by default are:

{
  mobile: {
    display: {
      templateVars: {
        placeholderText: 'Search...',
        images: {
          header: null,
          body: null
        }
      }
    }
  }
}

placeholderText

This is a special variable that corresponds to the text that will be used as the placeholder for the search input in the mobile layer.

images

This is a special variable / object that you can use to configure some images to adapt the look and feel of the layer:

• header: will appear before the search box.
• body: will appear as a centered background image in the layer. Using this option implies mobile.display.showMostSearched being false.

Notice: You’re not forced to use these values, they’re provided to avoid modifying the layer template just to add a custom header/body image. If you need a third image just add it and adapt the template to your needs.

templateFunctions

Like in the desktop version you can create your own template functions. Here is an example defining myBold which simply wraps the text with the <b> html tags. Also a custom template is defined using that custom function.

NOTICE: This options is available since V6 and has no effect in previous versions.

layerOptions = {
  ...
  mobile: {
    display: {
      templateFunctions: {
        myBold:
         function() {
            function(text, render) {
              return '<b>' + render(text) + '</b>';
            }
         }
      },
      results: {
        template: '{{#results}}<h1>{{#myBold}}{{header}}{{/myBold}}</h1>{{/results}}'
      }
    }
  }
}

Results Configuration

template

You can set your own results template to show extra content in your results or shape the content as you want. Like in the rest of the custom templates, you can set it with a String containing Mustache tags.

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

Refer to Results Template Configuration in the desktop version for more information.

Facets Configuration

NOTICE: This options is available since V6 and has no effect in previous versions.

You can override almost any facets options from the desktop configuration for the mobile version of the layer.

{
  display: {
    facets: {
      startCollapsed: false
    }
  },
  mobile: {
    display: {
      facets: {
        startCollapsed: true
      }
    }
  }
}

The dfFullscreenLayers Array

When doofinder is loaded, dfFullscreenLayers is replaced by an array of Doofinder Configuration Objects or, if run as a module on a requirejs environment, the dfFullscreenLayers array is created and made accesible at the browser’s window object. These objects can be used to change some configuration during the execution.

This could be useful, if you wanted to change the layer behavior depending on the user in session, the screen size…

So you can do this in two steps:

• Change an option in the property dfFullscreenLayers[0].layerOptions.
• Execute dfFullscreenLayers[0].configure().

If you have more than one layer, you could use dfFullscreenLayers[k] as well (where k is the position in dfFullscreenLayers of the layer you want to change).

Example:

Imagine you want to change the SearchEngine hashid during the execution of your javascript. The code you need to do this would be:

dfFullscreenLayers[0].layerOptions.hashid = "de7195d77d1b559506361657cc624589";
dfFullScreenLayers[0].configure();

Beds, Baths and Beyond: register clicks

If you have it in you, you can instruct doofinder to register clicks programatically. You don’t need to worry about that for any click that is done within the layer itself, but you may want to do that if you obtain results using our Search API and want to register clicks on those results, so those clicks also show up in your stats.

You can register a click for the search engine associated to any of your layers by accesing the registerClick method of the controller property of the layer associated to that search engine…

WOW! That was cryptic. We’ll better show you with a working example. Just write:

dfFullScreenLayers[0].controller.registerClick('AX001');

That would tell doofinder to register one click for the product of you index which has the id value of AX001. The search engine it would be registered to would be the one defined in the dfFullScreenLayers[0] element. (You may have more than one search engine working on the same page, each one belonging to a different element at the dfFullScreenLayers array)

Notice: You need the dfFullScreenLayers array to be present at the page, so doofinder script must be on the page for you to use this