Library Reference

Configuration

6min

﻿
Specific configuration values used by Klevu are kept as a snippet of code which looks something like the following:

  var options = {
     url : {
       search: 'https://eucs3v2.ksearchnet.com/cs/v2/search',
       landing: '/search-results',
       queryParam: 'q'
     },
     search: {
       apiKey: 'klevu-123XXXXXXXXXXXXXX',
       searchBoxSelector: 'input#klevu-search',
     }
     analytics: {
       apiKey: 'klevu-123XXXXXXXXXXXXXX'
     }
  };
  klevu(options);
 

﻿
Settings
Settings available within options object
Array name
Field Name
Description
Default value
powerUp
quick
QuickSearch Module
true
powerUp
landing
Landing Page Module
true
powerUp
catnav
Category Page Module
true
powerUp
recsModule
Recommendations Module
true
url
search
Klevu APIv2 Cloud Search URL endpoint 
﻿REQUIRED﻿
url
landing
The URL of the Search Results Landing Page (SRLP)
/search-results
url
queryParam
The query parameter appended to the SRLP URL
q
search
apiKey
Klevu JS Api Key which will be used for search requests
﻿REQUIRED﻿
search
infiniteScrollOffset
Determines the pixel distance from bottom of the quicksearch (faceted layout display) to trigger the next result dataset
50
search
infiniteScrollOffsetLanding
Determines the pixel distance from bottom of the webpage to trigger the next result dataset
Determines the pixel distance of the page to trigger the next result dataset
50
search
searchBoxSelector
The id, class, or handle used to bind the search input field
﻿REQUIRED﻿
search
searchBoxTarget
Define a target for the results generation
false
search
showQuickOnEnter
Disable the enter/return key in the quick search
false
search
sliderPriceDelimiter
Set the delimiter between the currency symbol and the price for the price slider
" "
search
fullPageLayoutEnabled
Avoid focusout event
false
search
minChars
Number of typed characters required
3
search
placeholder
Placeholder text of the search box
""
search
personalisation
Control of personalisation
false
search
redirects
Redirects for specific search term
"term": "https://full-url.com"
﻿
recs
apiKey
Klevu JS Api Key used for Smart Recommendations
﻿
analytics
apiKey
Klevu JS Api Key used for general analytics reporting
﻿REQUIRED﻿
global
apiKey
Klevu JS Api Key used for all components
OPTIONAL
theme
quicksearch:
loadDefaultStyles
Stop Klevu Quicksearch template styles from loading
true
theme
landing:
loadDefaultStyles
Stop Klevu SRLP template styles from loading
true
theme
catnav:
loadDefaultStyles
Stop Klevu Category template styles from loading
true
theme
setTemplates
Specify one or more Klevu templates to override. Read Set Template﻿ for more information.
﻿
theme:
modules:
resultInfiniteScroll
quickSearch:
enable
Set "true" to enable Infinite Scroll
﻿
theme:
modules:
resultInfiniteScroll
searchResultsPage:
enable
Set "true" to enable Infinite Scroll
﻿
theme:
modules:
resultInfiniteScroll
categoryPage:
enable
Set "true" to enable Infinite Scroll
﻿
Useful Local Storage Settings
Key Name
Key Value Default
Description
klv_limits_productList
12
By default the Template JS library makes 12, 24, and 36 options available, but this can be set to any number.
klv_limits_contentList
12
By default the Template JS library makes 12, 24, and 36 options available, but this can be set to any number.
Code Eample
JS
// This code waits for klevu.js to load first.
window._klvReady= window._klvReady|| [];
window._klvReady.push(function(){
  
  // We will set the items per page one time using a variable.
  var itemsPerPage = 24;
  
  // Now we can use the variable to set both the product and content tab
  // items per page.
  localStorage.setItem('klv_limits_productList', itemsPerPage);
  localStorage.setItem('klv_limits_contentList', itemsPerPage);
});
// This code waits for klevu.js to load first.
window._klvReady= window._klvReady|| [];
window._klvReady.push(function(){
  
  // We will set the items per page one time using a variable.
  var itemsPerPage = 24;
  
  // Now we can use the variable to set both the product and content tab
  // items per page.
  localStorage.setItem('klv_limits_productList', itemsPerPage);
  localStorage.setItem('klv_limits_contentList', itemsPerPage);
});
﻿
Useful Session Storage Settings
For Key Names that include [apiKey] you would replace this with your account's apiKey value. Here's an example:
JS
sessionStorage.setItem(`klv_view_klevu-14728819608184175_productList`, 'grid');
sessionStorage.setItem(`klv_view_klevu-14728819608184175_productList`, 'grid');
﻿
Key Name
Key Value Default
Description
klv_view_[apiKey]_productList
grid
Available values are "grid" and "list".
klv_view_[apiKey]_contentList
list
Available values are "grid" and "list".
Code Example
JS
// This code waits for klevu.js to load first.
window._klvReady= window._klvReady|| [];
window._klvReady.push(function(){

  // Run this function when Search and/or Category pages load.
  klevu.beforeActivation('landing,catnav', function(data ,scope){
    
    // Set session storage value using a useful function to dynamically 
    // retrieve your apiKey.
    sessionStorage.setItem(`klv_view_${klevu.pageMeta.getApiKey()}_productList`, 'list');
    
  }, 'build');
});
// This code waits for klevu.js to load first.
window._klvReady= window._klvReady|| [];
window._klvReady.push(function(){

  // Run this function when Search and/or Category pages load.
  klevu.beforeActivation('landing,catnav', function(data ,scope){
    
    // Set session storage value using a useful function to dynamically 
    // retrieve your apiKey.
    sessionStorage.setItem(`klv_view_${klevu.pageMeta.getApiKey()}_productList`, 'list');
    
  }, 'build');
});
﻿
﻿

Array name	Field Name	Description	Default value
powerUp	quick	QuickSearch Module	true
powerUp	landing	Landing Page Module	true
powerUp	catnav	Category Page Module	true
powerUp	recsModule	Recommendations Module	true
url	search	Klevu APIv2 Cloud Search URL endpoint	REQUIRED
url	landing	The URL of the Search Results Landing Page (SRLP)	/search-results
url	queryParam	The query parameter appended to the SRLP URL	q
search	apiKey	Klevu JS Api Key which will be used for search requests	REQUIRED
search	infiniteScrollOffset	Determines the pixel distance from bottom of the quicksearch (faceted layout display) to trigger the next result dataset	50
search	infiniteScrollOffsetLanding	Determines the pixel distance from bottom of the webpage to trigger the next result dataset Determines the pixel distance of the page to trigger the next result dataset	50
search	searchBoxSelector	The id, class, or handle used to bind the search input field	REQUIRED
search	searchBoxTarget	Define a target for the results generation	false
search	showQuickOnEnter	Disable the enter/return key in the quick search	false
search	sliderPriceDelimiter	Set the delimiter between the currency symbol and the price for the price slider	" "
search	fullPageLayoutEnabled	Avoid focusout event	false
search	minChars	Number of typed characters required	3
search	placeholder	Placeholder text of the search box	""
search	personalisation	Control of personalisation	false
search	redirects	Redirects for specific search term "term": "https://full-url.com"
recs	apiKey	Klevu JS Api Key used for Smart Recommendations
analytics	apiKey	Klevu JS Api Key used for general analytics reporting	REQUIRED
global	apiKey	Klevu JS Api Key used for all components	OPTIONAL
theme	quicksearch: loadDefaultStyles	Stop Klevu Quicksearch template styles from loading	true
theme	landing: loadDefaultStyles	Stop Klevu SRLP template styles from loading	true
theme	catnav: loadDefaultStyles	Stop Klevu Category template styles from loading	true
theme	setTemplates	Specify one or more Klevu templates to override. Read Set Template for more information.
theme: modules: resultInfiniteScroll	quickSearch: enable	Set "true" to enable Infinite Scroll
theme: modules: resultInfiniteScroll	searchResultsPage: enable	Set "true" to enable Infinite Scroll
theme: modules: resultInfiniteScroll	categoryPage: enable	Set "true" to enable Infinite Scroll

Key Name	Key Value Default	Description
klv_limits_productList	12	By default the Template JS library makes 12, 24, and 36 options available, but this can be set to any number.
klv_limits_contentList	12	By default the Template JS library makes 12, 24, and 36 options available, but this can be set to any number.

Key Name	Key Value Default	Description
klv_view_[apiKey]_productList	grid	Available values are "grid" and "list".
klv_view_[apiKey]_contentList	list	Available values are "grid" and "list".

Updated 25 Oct 2024

Did this page help you?

Structure

JS Library