Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

doofinder

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

doofinder

Javascript Library for Doofinder Search API

5.1.10
Source
npm

Version published: 7 years ago

Weekly downloads: 96; increased by7.87%

Maintainers: 1

Weekly downloads

Created: 9 years ago

Source

jsDoofinder

This library allows you to make requests to your Doofinder Search Engines and display the results in your website. You'll be able to retrieve and shape your data easily with it.

Summary

Installation

npm

npm install doofinder

bower

bower install doofinder

Downloadable minified javascript file

https://cdn.jsdelivr.net/npm/doofinder@latest/dist/doofinder.min.js

CSS

We offer some simple CSS. You can download it in the link https://cdn.jsdelivr.net/npm/doofinder@latest/dist/doofinder.css

Quick Start

In this example we'll write a view that will just show results.

Let's begin by showing a simple HTML template (myview.html):

<html lang="en">
<head>
<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="application/javascript" src="https://cdn.jsdelivr.net/npm/doofinder@latest/dist/doofinder.min.js"></script>
<script>
(function(doofinder, document){
  $(document).ready(function(){
    // Use here your Search Engine hashid and doofinder zone
    var client = new doofinder.Client('97be6c1016163d7e9bceedb5d9bbc032', 'eu1');
    // #query is the DOM selector that points to the search box
    var queryInputWidget = new doofinder.widgets.QueryInput('#query');
    // #scroll is where we'll display the results
    var resultsWidget = new doofinder.widgets.ScrollResults('#scroll');
    // The controller to rule them all
    var controller = new doofinder.Controller(
        client,
        [queryInputWidget, resultsWidget]
    );
  });
})(doofinder, document);
</script>
<style>
#scroll{
    position: relative;
    height: 800px;
    overflow: auto;
}
</style>
</head>
<body>
  <input type="text" id="query"/>
  <div id="scroll">
  </div>
</body>

Note that we are importing two javascript files:

jquery.min.js: we use it to make sure that everything is being done when the document is ready.
doofinder.min.js: contains doofinder namespace with its classes.

We need to create the inner scroll via css. We get it setting the sroll wrapper's height and overflow as you can see above. It is also necessary set the position to "relative" in order to calculate the scroll position to ask for the next page.

The options we have filled in for the Client:

hashid: the unique hashid of your search engine.
zone: the zone where your search engine is located (eu1, us1, ...).

For the QueryInput widget:

queryInput selector: the CSS selector of our query input.

For the ScrollResults widget:

scroll selector: the CSS selector for the scroll wrapper.

WARNING: Note that Doofinder Search API is protected with CORS, so you must enable the host you are requesting from. You can do this from your Doofinder Administration Panel > Configuration > Allowed Domains.

With all this in place you'll have a search box where you can write a query and the results will be shown. Scrolling into the layer you'll see more results.

Classes

Controller

Controller is the class that manages client and widgets. Allows you to make different queries to your index and interact with the different widgets you will instantiate.

constructor

Argument	Required	Type	Description
`client`	Yes	`doofinder.Client`	The Search API wrapper
`widgets`	Yes	`doofinder.Widget` `Array(doofinder.Widget)`	Array of widgets for interacting and rendering the results
`searchParameters`	No	`Object`	An object with params that will passed to the client for every search. You can use here all the parameters defined in Doofinder Search API.

search

This method makes a query to the Search API and renders the results into the widgets.

Argument	Required	Type	Description
`query`	Yes	`String`	The query terms.
`params`	No	`Object`	An object with search parameters. You can use here all the parameters defined in Doofinder Search API.

Asks for the next page of the previous search done, and sends the response to all widgets to render it.

getPage

Asks for a concrete page. Then pass the response to all widgets to render it.

Argument	Required	Type	Description
`page`	Yes	`Number`	The page requested

addFilter

Adds a filter to the currently applied in the search.

Argument	Required	Type	Description
`facet`	Yes	`String`	The name of the facet.
`value`	Yes	`String` `Object`	The value the facet should have. This can be a `String`, if the facet is a term facet or an `Object` if it's a range.

removeFilter

Removes a filter from the currently applied.

Argument	Required	Type	Description
`facet`	Yes	`String`	The name of the facet.
`value`	Yes	`String` `Object`	The value of the facet. This can be a `String`, if the facet is a term facet or an `Object` if it's a range.

addParam

Adds new search parameter to the current status.

Argument	Required	Type	Description
`param`	Yes	`String`	The name of the param.
`value`	Yes	`Mixed`	The value of the param.

clearParam

Removes a parameter from the current status.

Argument	Required	Type	Description
`param`	Yes	`String`	The name of the param.

reset

Gets the params to the initial state.

setSearchParam

Sets a param for every query.

Argument	Required	Type	Description
`param`	Yes	`String`	The name of the param.
`value`	Yes	`Mixed`	The value of the param.

refresh

Makes a search with the current filter status. Then, it calls to every widget to render the results.

addWidget

Adds a widget to the controller after the instantiation.

Argument	Required	Type	Description
`widget`	Yes	`doofinder.Widget`	The widget to add.

bind

This method adds a callback to an event triggered from the controller. Events are triggered from the controller when a query is going to be done or when results are received.

Argument	Required	Type	Description
`event`	Yes	`String`	The event name.
`callback`	Yes	`Function`	The function which receives the API Search response.

The events you can bind to a widget are the described below. Note that each event sends different arguments to the callback in order to implement it properly.

Events

Event Name	Callback Arguments	Description
df:search	params`Object`: the object will be send as params to the Search API.	This event is triggered when controller.search is called.
df:next_page	params`Object`: the object will be send as params to the Search API.	This event is triggered when controller.nextPage is called.
df:get_page	params`Object`: the object will be send as params to the Search API.	This event is triggered when controller.getPage is called.
df:results_received	res`Object`: the Search API response	This event is triggered when new results are received from Search API.
df:error_received	err`Object`: The Error response	This event is triggered when the search server returns an error response.

As an example, we'll print in the console the total results in the df:results_received event.

controller = new doofinder.Controller(client, widgets, options);
controller.bind('df:results_received', function(event, res){
   console.log(res.total);
});

registerSession

Sends a request to the Search API in order to account the sessions in your SearchEngine.

Argument	Required	Type	Description
`sessionId`	Yes	`String`	A session identifier
`callback`	No	`Function`	Receives two args: `err` and `response`

registerClick

Sends a request to the Search API in order to account the clicks for a product.

Argument	Required	Type	Description
`id`	Yes	`String`	Unique identifier of the item in the datafeed
`options`	No	`Object`	Additional options like `sessionId` (default `"session_id"`), `query` (default `""`), `datatype` (default `"product"`)
`callback`	No	`Function`	Receives two args: `err` and `response`

registerCheckout

Sends a request to the Search API in order to account the sales for your SearchEngine.

Argument	Required	Type	Description
`sessionId`	Yes	`String`	A session identifier.
`options`	No	`Object`	Additional options like `query`
`callback`	No	`Function`	Receives two args: `err` and `response`

options

Sends a request to the Search API in order to receive server configuration. The response received is like this:

{"currency":
  {"format":"%s%v",
   "symbol":"$",
   "label":"Hong Kong Dollar",
   "decimal":".",
   "thousand":",",
   "precision":2
   },
   "query_limit_reached":false,
   "mobile":{"endpoint":"mobile.mydomain.com"},
   "facets":[{"name":"brand",
   	        "es_definition":{"terms":{"field":"brand.facet","size":20}},
   	        "label":"Brand","type":"terms","field":"brand.facet","size":20},
   	     {"name":"sale_price",
   	      "es_definition":{
   	      	"range":{
   	      	"ranges":[{"from":0}],"field":"sale_price"
   	      	}
   	      },
   	      "label":"Sale",
   	      "type":"range",
   	      "ranges":[{"from":0}],"field":"sale_price"
   	      }
   	     ],
   "hasMobileEnabled":false
   	  }

Widgets are visual elements that take part into the search. They can be search inputs, places where display the results, places to put the facets, etc.

The events you can bind in widget depend on the widget you are instantiating. Above we'll describe all the available widget and theirs correponding events.

widgets.QueryInput

This widget triggers searches when a user types on it.

constructor

Argument	Required	Type	Description
`selector`	Yes	`String`	Input CSS selector.
`options`	No	`Object`	Options to configure the input.

The options to configure the input are:

Option	Type	Description
`wait`	`Number`	milliseconds that the widget waits to check the input content length.
`captureLength`	`Number`	number of Requireds typed when first search is performed
`typingTimeout`	`Number`	number of milliseconds the `QueryInput` waits from the user's last character typed till trigger `df:typing_stopped`.
`clean`	`Boolean`	If `true`, the input is cleared when the `clean()` method is invoked. Otherwise the input retains its value until the user cleans it.

bind

This method adds a callback to an event triggered from the widget. Events are triggered from every widget when a query is going to be done or when results are received or when they are rendered in a widget.

Argument	Required	Type	Description
event	Yes	`String`	The event name.
callback	Yes	`Function`	The function which receives the API Search response.

one

Does the same as the bind method but the callback is executed only once.

off

Removes an event listener previously defined with bind.

Argument	Required	Type	Description
event	Yes	`String`	The event name.
callback	Yes	`Function`	The function passed to `bind`.

trigger

Triggers an event in the widget instance.

Argument	Required	Type	Description
event	Yes	`String`	The event name.
callback	Yes	`Function`	The function passed to `bind`.

Events

The events you can bind to a widgets.QueryInput are:

Event Name	Callback Arguments	Description
`df:typing_stopped`	query `String`: the query in the input.	This event is triggered when the user has stopped to type for a while (`typingTimeout` property, one second by default).
`df:cleaned`		This event is triggered when the input is cleaned (which happens when the `clean` option is `true`).

widgets.Display

This widget renders the results in a DOM node. When a new search or filter is done the new content will replace the older. This widget doesn't have paging.

constructor

Argument	Required	Type	Description
`container`	Yes	`String`	Results container CSS selector.
`template`	Yes	`String`	Template to shape the response into HTML.
`options`	No	`Object`	Options to configure the widget.

Options

Option	Type	Description
`template`	`String`	Mustache template to shape the results.
`templateVars`	`Object`	Extra info you want to render in the template. Look at Example 2.
`templateFunctions`	`Object`	Custom helpers to use in your template. Look at Example 3.

bind

Argument	Required	Type	Description
event	Yes	`String`	The event name.
callback	Yes	`Function`	The function which receives the API Search response.

one

Does the same as the bind method but the callback is executed only once.

off

Removes an event listener previously defined with bind.

Argument	Required	Type	Description
event	Yes	`String`	The event name.
callback	Yes	`Function`	The function passed to `bind`.

trigger

Triggers an event in the widget instance.

Argument	Required	Type	Description
event	Yes	`String`	The event name.
callback	Yes	`Function`	The function passed to `bind`.

Events

The events you can bind in widget are the described above. Note that each event sends different arguments to the callback in order to implement it properly.

Event Name	Callback Arguments	Description
`df:rendered`	res`Object`: Doofinder Search API response.	This event is triggered when the results are rendered.
`df:cleaned`		This event is triggered when the widget is cleaned.

As an example, we'll print in the console the total results in the df:rendered event.

results = new doofinder.widgets.Display(container, options);
results.bind('df:rendered', function(event, res){
   console.log(res.total);
});

widgets.Results

Extends: widgets.Display. You can use bind, one, off and trigger and listen to df:rendered and df:cleaned.

This widget shows the results in a DOM node. When a new search or filter is done or a new page is requested the new content will replace the older.

constructor

Argument	Required	Type	Description
`container`	Yes	`String`	Results container CSS selector.
`options`	No	`Object`	Options to configure the widget.

The options to configure the widget are:

Option	Type	Description
`template`	`String`	Mustache template to shape the results.
`templateVars`	`Object`	Extra info you want to render in the template. Look at Example 2.
`templateFunctions`	`Object`	Custom helpers to use in your template. Look at Example 3.

bind

Argument	Required	Type	Description
event	Yes	`String`	The event name.
callback	Yes	`Function`	The function which receives the API Search response.

one

Does the same as the bind method but the callback is executed only once.

off

Removes an event listener previously defined with bind.

Argument	Required	Type	Description
event	Yes	`String`	The event name.
callback	Yes	`Function`	The function passed to `bind`.

trigger

Triggers an event in the widget instance.

Argument	Required	Type	Description
event	Yes	`String`	The event name.
callback	Yes	`Function`	The function passed to `bind`.

Events

The events you can bind in widget are the described above. Note that each event sends different arguments to the callback in order to implement it properly.

Event Name	Callback Arguments	Description
`df:rendered`	res`Object`: Doofinder Search API response.	This event is triggered when the results are rendered.
`df:cleaned`		This event is triggered when the widget is cleaned.

As an example, we'll print in the console the total results in the df:rendered event.

results = new doofinder.widgets.Results(container, options);
results.bind('df:rendered', function(event, res){
   console.log(res.total);
});

widgets.ScrollResults

Extends: widgets.Display. You can use bind, one, off and trigger and listen to df:rendered and df:cleaned.

This widget render the results in an DOM node with an inner scroll. So the next page will be requested when scroll reaches the bottom.

constructor

Argument	Required	Type	Description
`container`	Yes	`String`	Results container CSS selector.
`options`	No	`Object`	Options to configure the widget.

Options

Option	Type	Description
`template`	`String`	Mustache template to shape the results.
`templateVars`	`Object`	Extra info you want to render in the template. Look at Example 2.
`templateFunctions`	`Object`	Custom helpers to use in your template. Look at Example 3.
`scrollOffset`	`Number`	Distance in pixels to the bottom in scroll when next page is requested. Default 50.

There is some CSS you have to add to your container in order to make the inner scroll to work properly:

#container {
  height: 800px;
  position: relative;
  overflow: auto;
}

In the example above #container could be your scroll container selector and the height can be set to the value you prefer.

bind

Argument	Required	Type	Description
event	Yes	`String`	The event name.
callback	Yes	`Function`	The function which receives the API Search response.

one

Does the same as the bind method but the callback is executed only once.

off

Removes an event listener previously defined with bind.

Argument	Required	Type	Description
event	Yes	`String`	The event name.
callback	Yes	`Function`	The function passed to `bind`.

trigger

Triggers an event in the widget instance.

Argument	Required	Type	Description
event	Yes	`String`	The event name.
callback	Yes	`Function`	The function passed to `bind`.

Events

The events you can bind in widget are the described above. Note that each event sends different arguments to the callback in order to implement it properly.

Event Name	Callback Arguments	Description
`df:rendered`	res`Object`: Doofinder Search API response.	This event is triggered when the results are rendered.
`df:cleaned`		This event is triggered when the widget is cleaned.

As an example, we'll print in the console the total results in the df:rendered event.

results = new doofinder.widgets.ScrollResults(container, options);
results.bind('df:rendered', function(event, res){
   console.log(res.total);
});

widgets.TermFacet

Extends: widgets.Display. You can use bind, one, off and trigger and listen to df:rendered and df:cleaned.

This widget render a term facet in a list of terms.

constructor

Argument	Required	Type	Description
`container`	Yes	`String`	Results container CSS selector.
`name`	Yes	`String`	The facet key.
`options`	No	`Object`	Options to configure the widget.

Options

Option	Type	Description
`template`	`String`	Mustache template to shape the results.
`templateVars`	`Object`	Extra info you want to render in the template. Look at Example 2.
`templateFunctions`	`Object`	Custom helpers to use in your template. Look at Example 3.

bind

Argument	Required	Type	Description
event	Yes	`String`	The event name.
callback	Yes	`Function`	The function which receives the API Search response.

one

Does the same as the bind method but the callback is executed only once.

off

Removes an event listener previously defined with bind.

Argument	Required	Type	Description
event	Yes	`String`	The event name.
callback	Yes	`Function`	The function passed to `bind`.

trigger

Triggers an event in the widget instance.

Argument	Required	Type	Description
event	Yes	`String`	The event name.
callback	Yes	`Function`	The function passed to `bind`.

Events

The events you can bind in widget are the described above. Note that each event sends different arguments to the callback in order to implement it properly.

Event Name	Callback Arguments	Description
`df:rendered`	res`Object`: Doofinder Search API response.	This event is triggered when the widget is rendered (when there're terms to render, otherwise the widget will be cleaned).
`df:cleaned`		This event is triggered when the widget is cleaned (when there's no terms to render or when the `clean()` method is called in other circumstances).

As an example, we'll print in the console the total results in the df:rendered event.

facet = new doofinder.widgets.TermFacet(container, options);
facet.bind('df:rendered', function(event, res){
   console.log(res.total);
});

widgets.RangeFacet

Extends: widgets.Display. You can use bind, one, off and trigger and listen to df:rendered and df:cleaned.

This widget render a range facet in a slider. To show it properly is necessary some CSS. You can add this stylesheet:

https://raw.githubusercontent.com/doofinder/js-doofinder/master/dist/doofinder.css

constructor

Argument	Required	Type	Description
`container`	Yes	`String`	Results container CSS selector.
`name`	Yes	`String`	The facet key.
`options`	No	`Object`	Options to configure the widget.

Options

Option	Type	Description
`template`	`String`	Mustache template to shape the results.
`templateVars`	`Object`	Extra info you want to render in the template. Look at Example 2.
`templateFunctions`	`Object`	Custom helpers to use in your template. Look at Example 3.
`sliderClassName`	`String`	The CSS class of the node that holds the slider. It's injected into the template context.
`sliderOptions`	`Object`	We use noUiSlider and this option holds the slider configuration. Due to a buggy pips support, if no `pips` option is found, the widget paints them itself. If the `pips` option is `false`, no pips are displayed. In any other case, noUiSlider is in charge of displaying them.

bind

Argument	Required	Type	Description
event	Yes	`String`	The event name.
callback	Yes	`Function`	The function which receives the API Search response.

one

Does the same as the bind method but the callback is executed only once.

off

Removes an event listener previously defined with bind.

Argument	Required	Type	Description
event	Yes	`String`	The event name.
callback	Yes	`Function`	The function passed to `bind`.

trigger

Triggers an event in the widget instance.

Argument	Required	Type	Description
event	Yes	`String`	The event name.
callback	Yes	`Function`	The function passed to `bind`.

Events

The events you can bind in widget are the described above. Note that each event sends different arguments to the callback in order to implement it properly.

Event Name	Callback Arguments	Description
`df:rendered`	res`Object`: Doofinder Search API response.	This event is triggered when the range slider is rendered.
`df:cleaned`		This event is triggered when the widget is cleared (the slider is not rendered because it doesn't make sense).

As an example, we'll print in the console the total results in the df:rendered event.

facet = new doofinder.widgets.RangeFacet(container, options);
facet.bind('df:rendered', function(event, res){
   console.log(res.total);
});

widgets.FacetPanel

Extends: widgets.Display. You can use bind, one, off and trigger and listen to df:rendered and df:cleaned.

A panel that can contain a facet widget. Instead of replacing the HTML of its container, this widget appends itself to it.

Use the embedWidget method to notify the panel about the widget to use to render itself.

constructor

Argument	Required	Type	Description
`container`	Yes	`String`	Results container CSS selector.
`options`	No	`Object`	Options to configure the widget.

Options

Option	Type	Description
`id`	`String`	Value for the `id` attribute of the panel. Optional. A random one will be generated if none provided.
`template`	`String`	Mustache template to paint the panel.
`templateVars`	`Object`	Extra info you want to render in the template. Look at Example 2.
`templateFunctions`	`Object`	Custom helpers to use in your template. Look at Example 3.
`startHidden`	`Boolean`	`true` by default. If `true`, the panel is hidden until the embedded widget is rendered. This avoids weird looking empty panels in your layout. You can disable this option if your template takes this issue into account.
`startCollapsed`	`Boolean`	`false` by default. If `true`, the panel is collapsed by default. Otherwise the content of the panel is displayed on rendering.

Example

var panel = new doofinder.widgets.FacetPanel(
  document.getElementById('aside'), {
    startCollapsed: true,
    templateVars: {
      name: "categories_facet"
    }
  }
);
controller.addWidget(panel);

var facetWidget = new doofinder.widgets.TermFacet(
  panel.contentElement,
  facetName,
  facetOptions
);
controller.addWidget(facetWidget);

panel.embedWidget(facetWidget);

bind

Argument	Required	Type	Description
event	Yes	`String`	The event name.
callback	Yes	`Function`	The function which receives the API Search response.

one

Does the same as the bind method but the callback is executed only once.

off

Removes an event listener previously defined with bind.

Argument	Required	Type	Description
event	Yes	`String`	The event name.
callback	Yes	`Function`	The function passed to `bind`.

trigger

Triggers an event in the widget instance.

Argument	Required	Type	Description
event	Yes	`String`	The event name.
callback	Yes	`Function`	The function passed to `bind`.

Events

The events you can bind in widget are the described above. Note that each event sends different arguments to the callback in order to implement it properly.

Event Name	Callback Arguments	Description
`df:rendered`	res`Object`: Doofinder Search API response.	This event is triggered when the results are rendered.
`df:cleaned`		This event is triggered when the widget is cleaned.

Client

This is the class which makes the queries to the Doofinder Search API.

constructor

Argument	Required	Type	Description
hashid	Yes	`String`	The unique search engine identifier.
API Key/Zone	Yes	`String`	The secret key to authenticate the request or the doofinder zone.
types	No	`Array`	An array of datatypes to restrict the queries to them.

WARNING: Do not use the API key unless you're coding on the server side, if you don't put the API key just put the doofinder zone instead.

search

This method performs a Search API call and retrieves the data. The data will be received by a callback function.

Argument	Required	Type	Description
query	Yes	`String`	The query terms.
params	No	`Object`	The query terms.
callback	Yes	`Function`	The function which receives the API Search response.

registerSession

Sends a request to the Search API in order to account the sessions in your SearchEngine.

Argument	Required	Type	Description
sessionId	Yes	`String`	A session identifier.
callback	No	`Function`	Receives two args: `err` and `response`

registerClick

Sends a request to the Search API in order to account the clicks for a product.

Argument	Required	Type	Description
id	Yes	`String`	Unique identifier of the item in the datafeed.
options	No	`Object`	Additional options like `sessionId` (default `"session_id"`), `query` (default `""`), `datatype` (default `"product"`)
callback	No	`Function`	Receives two args: `err` and `response`

registerCheckout

Sends a request to the Search API in order to account the sales for your SearchEngine.

Argument	Required	Type	Description
sessionId	Yes	`String`	A session identifier.
options	No	`Object`	Additional options like `query`
callback	No	`Function`	Receives two args: `err` and `response`

Examples

Example 1: Create a simple template to show results.

In the Quick Start example we composed a simple view using the Doofinder Library. Let's see how to shape the results by a Mustache template.


var resultsTemplate = '{{#results}}' +
  ' <div>'+
  '   <div>' +
  '     <a href="{{link}}">'+
  '       <img src="{{image_link}}" alt="{{title}}">'+
  '     </a>'+
  '     <div>'+
  '       <a target="_blank" data-df-hitcounter="{{dfid}}" href="{{link}}">'+
  '         <div>{{title}}</div>' +
  '         <div>{{description}}</div>' +
  '         <div>' +
  '          <span>{{#format-currency}}{{price}}{{/format-currency}}</span>' +
  '         </div>'+
  '       </a>' +
  '    </div>' +
  '  </div>' +
  '</div>' +
  '{{/results}}';

var resultsWidget = new doofinder.widgets.ScrollResults('#scroll', {template: resultsTemplate});

Let's have a look to the template:

We used {{#results}} to iterate through the items.
We used {{field_name}} tags to print the content of a field.
We used {{#field_name}} to check the presence of a field.
We used {{#format-currency}} helper to print the price with the coin symbol and formatted.
Note that we use a data attribute (data-df-hitcounter) to show the dfid. You can use this to send it with the Controller.hit method.

Example 2: Adding extra info to our template.

Maybe you have some items with no header and you want to show a standard one, just in case.

var resultsWidget = new doofinder.widgets.ScrollResults('#scroll', {
  template: resultsTemplate,
  templateVars: {
    standardTitle: "My title"
    }
  });

So you can modify your template in order to show a standard title if there's no header supplied by the item.


var resultsTemplate = '{{#results}}' +
  ' <div>'+
  '   <div>' +
  '     <a href="{{link}}">'+
  '       <img src="{{image_link}}" alt="{{title}}">'+
  '     </a>'+
  '     <div>'+
  '       <a target="_blank" data-df-hitcounter="{{dfid}}" href="{{link}}">'+
  '         {{#title}}' +
  '         <div>{{title}}</div>' +
  '         {{/title}}' +
  '         {{^title}}' +
  '         <div>{{standardTitle}}</div>' +
  '         {{/title}}' +
  '         <div>{{description}}</div>' +
  '       </a>' +
  '    </div>' +
  '  </div>' +
  '</div>' +
  '{{/results}}';

var resultsWidget = new doofinder.widgets.ScrollResults('#scroll', {
  template: resultsTemplate,
  templateVars: {
    standardTitle: "My title"
    }
  });

Example 3: Create a custom template function.

Template functions are called helpers in Mustache. You can create and add custom helpers to your template by using the templateFunctions option. We'll create a helper that convert a text in bold.


{
  templateFunctions: {
    bold: function(){
      function(text, render){
        return "<b>" + render(text) + "</b>"
      }
    }
}

This helper will take the text in the tag and will wrapper it with the <b> tag. Note that render(text) returns the text wrapped by the helper.

We'll use the helper to show the header and instantiate the widget.

var resultsTemplate = '{{#results}}' +
  ' <div>'+
  '   <div>' +
  '     <a href="{{link}}">'+
  '       <img src="{{image_link}}" alt="{{link}}">'+
  '     </a>'+
  '     <div>'+
  '       <a target="_blank" data-df-hitcounter="{{dfid}}" href="{{link}}">'+
  '         <div>{{#bold}}{{title}}{{/bold}}</div>' +
  '         <div>{{description}}</div>' +
  '         <div>' +
  '          <span>{{#format-currency}}{{price}}{{/format-currency}}</span>' +
  '         </div>'+
  '       </a>' +
  '    </div>' +
  '  </div>' +
  '</div>' +
  '{{/results}}';

var resultsWidget = new doofinder.widgets.ScrollResults('#scroll', {
  template: resultsTemplate,
  templateFunctions: {
    bold: function(){
      return function(text, render){
        return "<b>" + render(text) + "</b>"
      }
    }
  }
});

Issues in embedded dependencies (or what is npm-shrinkwrap file)

We've added this file to deal with issues in embedded dependencies. You have there the whole dependencies tree so you can import your own fork when anything happen with the official ones. Since this suppose a work around, this file can appears and disappears. More information here

Issue related	Dependency modified
v4.1.9 Edge showing nothing.	grunt-browserify > browserify > stream-http. Loop using `Symbol.iterator` fails silently.

Keywords

doofinder

FAQs

What is doofinder?

Is doofinder popular?

Is doofinder well maintained?

Package last updated on 20 Nov 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

doofinder

jsDoofinder

Summary

Installation

npm

bower

Downloadable minified javascript file

CSS

Quick Start

Classes

Controller

constructor

search

nextPage

getPage

addFilter

removeFilter

addParam

clearParam

reset

setSearchParam

refresh

addWidget

bind

Events

registerSession

registerClick

registerCheckout

options

Widget

widgets.QueryInput

constructor

bind

one

off

trigger

Events

widgets.Display

constructor

Options

bind

one

off

trigger

Events

widgets.Results

constructor

bind

one

off

trigger

Events

widgets.ScrollResults

constructor

Options

bind

one

off

trigger

Events

widgets.TermFacet

constructor

Options

bind

one

off

trigger

Events

widgets.RangeFacet

constructor

Options

bind

one

off

trigger

Events

widgets.FacetPanel

constructor

Options

Example