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}.",
noResultsLabel: "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 noResultsLabel:
- {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',