Configuration

12 min

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

Object 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". Enter terms as lowercase.	{}
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
fetchSettings	fallback	Set "true" to activate the fetch fallback to use fetch interface with url + headers. This is useful native fetch function has been replaced.
dataProtection	useConsent	Set "true" to activate data protection system. This defines if consent should be checked site-wide. This is an opt-in system.	false
dataProtection	consentState	The value of the consent state for the current user. This value should be set based on whether the user has given consent to send data to Klevu.	false

Useful Configuration Setting Examples

The above configuration settings can be passed directly into the main klevu function as an object as shown below.

Code Example

klevu({
  search: {
    minChars: 2,
    placeholder: "Ready to search?",
    redirects: {
      "my cool blue": "https://mywebsite.com/my-cool-blue-product",
      "hot": "https://mywebsite.com/sale"
    }
  }
});

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 Example

// 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 Data Protection Settings

Klevu's Template JS library uses an opt-in consent system that controls whether the library can or cannot send user activity data to Klevu. This does not stop Klevu services like Search and Recommendations from working, but rather it can block any user activity data from being sent to Kelvu. This data is what can power personalized user experiences and the main algorythm that powers all of Klevu.

In other words, when you opt-in to using the consent system, each user can consent or not consent to sending this activity data. You can use any mechanism you would like to ask and track this consent, but you can use the following settings to tell the library that a user has given or not given consent.

Basic Code Example

klevu({
  dataProtection: {
    useConsent: true, // enable the consent system for all users
    consentState: false, // user-specific setting to opt-in or out
  }
});

Because the consent system is opt-in, it is not required to use these settings. If you do want to use the consent system, then make sure useConsent is always set to "true". And for each user, set their consentState to "true" or "false".

Most customer that use the consent system will set useConsent to "true" and consentState to "false" until the user has specifically given consent. Then you can set consentState to "true" for that user.

Robust Code Example

If you encouter any issues where you get errors or the consentState is not showing the value you are setting by using the Basic Code Example, try this version instead.

window._klvReady = window._klvReady || [];
window._klvReady.push(function () {
  // Replace the return value with the site's own consent logic.
  function getConsentState() {
    return false; 
  }

  // initChain runs on every klevu() call before values are persisted,
  // so pinning them here makes the site's values win.
  klevu.settings.chains.initChain.addBefore('dataProtectionCheck', {
    name: 'siteConsentGuard',
    fire: function (data) {
      klevu.setObjectPath(data, 'dataProtection.useConsent', true);
      klevu.setObjectPath(data, 'dataProtection.consentState', getConsentState());
    }
  });

  // Necessary call to re-run the initChain.
  klevu({ dataProtection: {} });
});

This version wraps the dataProtection code in a function that waits for the KIevu library to be ready and also waits to send the dataProtection values after all other settings are applied to ensure they are applied properly.

Useful Session Storage Settings

For Key Names that include [apiKey] you would replace this with your account's apiKey value. Here's an example:

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

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