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

doofinder

Package Overview
Dependencies
Maintainers
1
Versions
198
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

doofinder

Javascript Library for Doofinder Search API

  • 3.0.8
  • Source
  • npm
  • Socket score
Version published
Maintainers
1
Created
Source

jsDoofinder

This library allows you to make requests to Doofinder Search Engines and show 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/doofinder/latest/doofinder.min.js

CSS

We offer some simple CSS. You can download it in the link https://cdn.jsdelivr.net/doofinder/latest/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/doofinder/latest/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
ArgumentRequiredTypeDescription
clientYesdoofinder.ClientThe Search API wrapper
widgetsYesdoofinder.Widget Array(doofinder.Widget)Array of widgets for interacting and rendering the results
searchParametersNoObjectAn 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.

ArgumentRequiredTypeDescription
queryYesStringThe query terms.
paramsNoObjectAn object with search parameters. You can use here all the parameters defined in Doofinder Search API.
nextPage

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.

ArgumentRequiredTypeDescription
pageYesNumberThe page requested
addFilter

Adds a filter to the currently applied in the search.

ArgumentRequiredTypeDescription
facetYesStringThe name of the facet.
valueYesString ObjectThe 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.

ArgumentRequiredTypeDescription
facetYesStringThe name of the facet.
valueYesString ObjectThe 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.

ArgumentRequiredTypeDescription
paramYesStringThe name of the param.
valueYesMixedThe value of the param.
clearParam

Removes a parameter from the current status.

ArgumentRequiredTypeDescription
paramYesStringThe name of the param.
reset

Gets the params to the initial state.

setSearchParam

Sets a param for every query.

ArgumentRequiredTypeDescription
paramYesStringThe name of the param.
valueYesMixedThe 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.

ArgumentRequiredTypeDescription
widgetYesdoofinder.WidgetThe 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.

ArgumentRequiredTypeDescription
eventYesStringThe event name.
callbackYesFunctionThe function which receives the API Search response.

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 NameCallback ArgumentsDescription
df:search
  • eventObject: object with the event information.
  • paramsObject: the object will be send as params to the Search API.
This event is triggered when controller.search is called.
df:next_page
  • eventObject: object with the event information.
  • paramsObject: the object will be send as params to the Search API.
This event is triggered when controller.nextPage is called.
df:get_page
  • eventObject: object with the event information.
  • paramsObject: the object will be send as params to the Search API.
This event is triggered when controller.getPage is called.
df:results_received
  • eventObject: object with the event information.
  • resObject: the Search API response
This event is triggered when new results are received from Search API.

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);
});
hit

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

ArgumentRequiredTypeDescription
dfidYesStringUnique product identifier.

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
   	  }

Widget

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
ArgumentRequiredTypeDescription
selectorYesStringInput CSS selector.
optionsNoObjectOptions to configure the input.

The options to configure the input are:

OptionTypeDescription
waitNumbermilliseconds that the widget waits to check the input content length.
captureLengthNumbernumber of Requireds typed when first search is performed

widgets.QueryInput has no associated events.

widgets.Display

This widget shows 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
ArgumentRequiredTypeDescription
containerYesStringResults container CSS selector.
optionsNoObjectOptions to configure the input.
OptionTypeDescription
templateStringMustache template to shape the results.
templateVarsObjectExtra info you want to render in the template. Look at Example 2.
templateFunctionsObjectCustom helpers to use in your template. Look at Example 3.
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.

ArgumentRequiredTypeDescription
eventYesStringThe query terms.
callbackYesFunctionThe function which receives the API Search response.

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 NameCallback ArgumentsDescription
df:rendered
  • eventObject: object with the event information.
  • resObject: Doofinder Search API response.
This event is triggered when the results are rendered.

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

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
ArgumentRequiredTypeDescription
containerYesStringResults container CSS selector.
optionsNoObjectOptions to configure the input.

The options to configure the widget are:

OptionTypeDescription
templateStringMustache template to shape the results.
templateVarsObjectExtra info you want to render in the template. Look at Example 2.
templateFunctionsObjectCustom helpers to use in your template. Look at Example 3.
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.

ArgumentRequiredTypeDescription
eventYesStringThe query terms.
callbackYesFunctionThe function which receives the API Search response.

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 NameCallback ArgumentsDescription
df:rendered
  • eventObject: object with the event information.
  • resObject: Doofinder Search API response.
This event is triggered when the results are rendered.

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

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
ArgumentRequiredTypeDescription
containerYesStringResults container CSS selector.
optionsNoObjectOptions to configure the input.

The options to configure the widget are:

OptionTypeDescription
templateStringMustache template to shape the results.
templateVarsObjectExtra info you want to render in the template. Look at Example 2.
templateFunctionsObjectCustom helpers to use in your template. Look at Example 3.
scrollOffsetNumberDistance 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

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.

ArgumentRequiredTypeDescription
eventYesStringThe event name.
callbackYesFunctionThe function which receives the API Search response.

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 NameCallback ArgumentsDescription
df:rendered
  • eventObject: object with the event information.
  • resObject: Doofinder Search API response.
This event is triggered when the results are rendered.
df:hit
  • eventObject: object with the event information.
  • dfidString: Doofinder Item Identifier. Useful to make the controller.hit call.
  • urlString: The url associated to the item. Useful to make the controller.sendToGA call.
This event is triggered when a result link is clicked.

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

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

constructor
ArgumentRequiredTypeDescription
containerYesStringResults container CSS selector.
nameYesStringThe facet key.
optionsNoObjectOptions to configure the input.

The options to configure the widget are:

OptionTypeDescription
templateStringMustache template to shape the results.
templateVarsObjectExtra info you want to render in the template. Look at Example 2.
templateFunctionsObjectCustom helpers to use in your template. Look at Example 3.
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.

ArgumentRequiredTypeDescription
eventYesStringThe event name.
callbackYesFunctionThe function which receives the API Search response.

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 NameCallback ArgumentsDescription
df:rendered
  • eventObject: object with the event information.
  • resObject: Doofinder Search API response.
This event is triggered when the facet is rendered.

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

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
ArgumentRequiredTypeDescription
containerYesStringResults container CSS selector.
nameYesStringThe facet key.
optionsNoObjectOptions to configure the input.

The options to configure the widget are:

OptionTypeDescription
templateStringMustache template to shape the results.
templateVarsObjectExtra info you want to render in the template. Look at Example 2.
templateFunctionsObjectCustom helpers to use in your template. Look at Example 3.
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.

ArgumentRequiredTypeDescription
eventYesStringThe event name.
callbackYesFunctionThe function which receives the API Search response.

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 NameCallback ArgumentsDescription
df:rendered
  • eventObject: object with the event information.
  • resObject: Doofinder Search API response.
This event is triggered when the facet is rendered.

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

Client

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

constructor
ArgumentRequiredTypeDescription
hashidYesStringThe unique search engine identifier.
API Key/ZoneYesStringThe secret key to authenticate the request or the doofinder zone.
typesNoArrayAn 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.

ArgumentRequiredTypeDescription
queryYesStringThe query terms.
paramsNoObjectThe query terms.
callbackYesFunctionThe function which receives the API Search 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>"
      }
    }   
  }
});

Keywords

FAQs

Package last updated on 07 Apr 2016

Did you know?

Socket

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

Related posts

Supply Chain Attack Detected in Solana's web3.js Library

Security News

Supply Chain Attack Detected in Solana's web3.js Library

A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.

By Sarah Gooding  -  Dec 03, 2024
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc