Advanced Widgets options

The next options can be added to the script:

window._sn.searchpages.push({ 
engineid: '-insert-your-engine-id',
-- insert your options here --
});
Labels (optional)

Gives you the possibility to provide your own translations for specific text in the widget.

Usage: (below is the current default text labels)

labels: {
searchButtonText: "Search",
refineResultsLabel: "Filter",
showResultsLabel: "{0} results found for '{1}'. Showing page {2} of {3}.",
showNoResultsLabel: "No results found for '{0}'",
searchfieldPlaceholder: "What are you searching for?"
},

The placeholders for showResultsLabel:

  • {0} = Number of results
  • {1} = Search keywords
  • {2} = Current page
  • {3} = Total pages


The placeholders for showNoResultsLabel

  • {0} = Search keywords

 

pageParam

The page param is added to the querystring or to the anchor when you go to another page in the search results.
Default this is "p" but you might want to change this.

Usage: 

pageParam: 'p',

 

scrollCorrection

When paging / filtering occurs then the page will scroll to the top position of the results. This correction will be added. Default value is 100 pixels.

Usage:

scrollCorrection: 100,

 

facetScrollToTop

When filtering by using the facets, specify if the widget should auto scroll to top.

Usage:

facetScrollToTop: true,

 

numberOfPages

With this setting you can alter the maximum number of pages that will be shown in the navigation bar. Default value is 10 pages.

Usage

numberOfPages: 10,

 

searchParam

This configures the query string or hash key. Default setting is q, so searching will alter the current page url by adding #q={keyword}

Usage:

searchParam: 'q',

 

searchParamInQuerystring

The default setting is to read the current page URL hash value #q={keyword}. By changing this value to true we will use the query string instead ?q={keyword}

Usage:

searchParamInQuerystring: false,

enableCollapse

This option requires facets filtering on the page. 
This feature auto collapse facets that have been collapsed before the ajax call took place.
If you have your own HTML templates and javascript logic in place you  might want to disable this feature.

Usage:

enableCollapse: true,

allowEmptySearchField

This setting allows you to create a overview widget without using a search phrase. 
By default it's set to false thus the widget only returns results when there is a search phrase specified.

Usage:

allowEmptySearchField: true,

disableSearchField

You can prevent widget from using search phrases (and providing interaction based with the search field)
By default it's set to false. Please note that this feature is currently only available when using a custom searchine-searchform template to disable the render of the search field.


Usage:

disableSearchField: true,

templatePrefix

With this setting you can use multiple widgets with custom templates on the same page.
With every widget being able to use a different template. This setting is disabled by default.
Please note that every custom template for a widget that uses the templatePrefix needs to have the prefix.


Usage:

templatePrefix: 'example1-',
id="example1-searchine-searchform"
Using on 404 page (optional)

This optional feature enables the widget to give search results based on the URL of the 404 page.
No search form will be used / available.

Usage:

is_404_widget: default(false),

Specify CSS query selectors

Usage

loader: '.js-loader', 
searchContainer: '.js-search-form', // override the searchContainer where the term input is located
searchField: '.js-search-input', // override the searchField CSS Selector what the term input field is.
searchButton: '.js-search-button', // override the searchButton field

searchResultsContainer: '.js-search-results-container',
searchResultsCollection: '.js-search-results-collection',
searchResultsInformationContainer: '.js-search-results-information',
facetsContainer: '.js-facets-container',
facetsCollection: '.js-facets-collection',
facetsGroup: '.js-facets-group',
facetsGroupBody: '.js-facets-group-body',
facetsGroupHeader: '.js-facets-group-header',
facetMobToggler: '.js-facet-toggle',
facetBody: '.js-facets-body',
selectedFacetsContainer: '.js-active-facets-container',
selectedFacetsCollection: '.js-active-facets-collection',
paginationContainer: '.js-pager-container',
paginationCollection: '.js-pager-collection',

 

 

 

Basics
Templates