Options

The personalized JavaScript file provided by Tweakwise contains all necessary configuration that is required to get your JS Implementation up and running.

In certain scenarios it may be necessary to override and/or expand this configuration. For example when an option doesn't have a fixed value but differs per page.

📘

Important

Make sure you have followed the installation guide. After the configuration object has been added to the page it can be extended with available options, see the list below.

instancekey

instancekey: string

A string overriding the instancekey used to make requests to the Tweakwise API. We do not recommend using this option when running the JS Implementation in a production environment.

Example

window["twn-starter-config"] = {
  // ...
  instancekey: 'abcdefgh',
};

input

input: string[]

An array of strings with valid CSS Selectors leading to the input elements that should be used for the JS Implementation.

Example

window["twn-starter-config"] = {
  // ...
  input: [
    "#tweakwise-input",
    "#tweakwise-input-secondary"
  ]
};

output

output: string

A string with a valid CSS Selector leading to the output element that should be used for the JS Implementation.

Example

window["twn-starter-config"] = {
  // ...
  output: "#tweakwise-output"
};

cid

cid?: string

A string with the root category ID of the search results.

Example

window["twn-starter-config"] = {
  // ...
  cid: "1"
};

lang

lang?: string

A string with the language of the user interface.

Example

window["twn-starter-config"] = {
  // ...
  lang: "en" // or 'nl', 'de', 'es', 'fr', 'it'
};

parameters

parameters?: string

A string with the hidden filters that should be sent with every request. This is a string containing one or more keys (facet url name) with their corresponding values. Please note that only the filter values should be URL encoded.

Example

window["twn-starter-config"] = {
  // ...
  parameters: "brand=Coca%20Cola%7CPepsi"
};

parametersExcept

parametersExcept?: string

A string with the hidden exclusion filters that should be sent with every request, meaning matching products will be excluded from the response. This is a string containing one or more keys (facet url name) with their corresponding values. Please note that only the filter values should be URL encoded.

Example

window["twn-starter-config"] = {
  // ...
  parametersExcept: "brand=Coca%20Cola%7CPepsi"
};

navigation.cid

cid?: string

A string with the category ID that should be used to display the product lister page. Adding a value for this option will trigger the Level Medium functionality of the JS Implementation. This means that on page load; the output container will be replaced with a product lister page.

Example

window["twn-starter-config"] = {
  // ...
  navigation: {
    cid: "1"
  }
};

navigation.output

output?: string

A string with a valid CSS Selector leading to an alternative output element that should be used for the product lister page. When omitted, the default output will be used.

Example

window["twn-starter-config"] = {
  // ...
  navigation: {
    output: "#tweakwise-output-navigation"
  }
};

navigation.parameters

parameters?: string

A string with hidden filters that should be sent with every product lister page request. When omitted, the default parameters option will be used. This is a string containing one or more keys (facet url name) with their corresponding values. Please note that only the filter values should be URL encoded.

Example

window["twn-starter-config"] = {
  // ...
  navigation: {
    parameters: "brand=Coca%20Cola%7CPepsi"
  }
};

navigation.parametersExcept

parametersExcept?: string

A string with the hidden exclusion filters that should be sent with every request, meaning matching products will be excluded from the response. When omitted, the default parametersExcept option will be used. This is a string containing one or more keys (facet url name) with their corresponding values. Please note that only the filter values should be URL encoded.

Example

window["twn-starter-config"] = {
  // ...
  navigation: {
    parametersExcept: "brand=Coca%20Cola%7CPepsi"
  }
};

navigation.filters

filters?: { [key: string]: string }

A dictionary with the filters that should be selected when the product lister page is first loaded. This option offers a similar functionality to the parameters or navigation.parameters option. Except that the user will see that the filters are selected and will be able to deselect the filter.

As opposed to the parameters and navigation.parameters option. The values of this option do need to be URL encoded.

Example

window["twn-starter-config"] = {
  // ...
  navigation: {
    filters: {
      "brand": "Coca%20Cola%7CPepsi",
      "option": "330ml"
    }
  }
};

filters.position

position?: string

A string determining the position of the filters.

Example

window["twn-starter-config"] = {
  // ...
  filters: {
    position: "left" // or "top"
  }
};

filters.leftCategory

leftCategory?: boolean

A toggle determining whether the category filter should be shown on the left side. This option only applies when the filters.position option is set to "top".

Example

window["twn-starter-config"] = {
  // ...
  filters: {
    position: "top",
    leftCategory: false // or true
  }
};

filters.displayThreshold

displayThreshold?: number

The amount of filters that should be shown by default, the rest is hidden behind "Show more" toggle. If not set, no threshold is applied and all filters remain visible. This option only applies when the filters.position option is set to "top".

Example

window["twn-starter-config"] = {
  // ...
  filters: {
    position: "top",
    displayThreshold: 5 
  }
};

filters.activeFirst

activeFirst?: boolean

Determines whether active filters should be sorted first. Default value is true. This option only applies when the filters.position option is set to "top".

Example

window["twn-starter-config"] = {
  // ...
  filters: {
    position: "top",
    activeFirst: false // or true
  }
};

products.mobile

mobile?: number

The amount of products that should be shown next to each other on mobile devices.

Example

window["twn-starter-config"] = {
  // ...
  products: {
    mobile: 2
  }
}

products.tablet

tablet?: number

The amount of products that should be shown next to each other on tablet devices.

Example

window["twn-starter-config"] = {
  // ...
  products: {
    tablet: 3
  }
};

products.desktop

desktop?: number

The amount of products that should be shown next to each other on desktop devices.

Example

window["twn-starter-config"] = {
  // ...
  products: {
    desktop: 2
  }
};

products.mobileView

mobileView?: "grid" | "list"

The default view that should be used for the products on mobile devices.

Example

window["twn-starter-config"] = {
  // ...
  products: {
    mobileView: "grid" // or "list"
  }
};

products.tabletView

tabletView?: "grid" | "list"

The default view that should be used for the products on tablet devices.

Example

window["twn-starter-config"] = {
  // ...
  products: {
    tabletView: "grid" // or "list"
  }
};

products.desktopView

desktopView?: "grid" | "list"

The default view that should be used for the products on desktop devices.

Example

window["twn-starter-config"] = {
  // ...
  products: {
    desktopView: "grid" // or "list"
  }
};

pagination.type

type?: 'default' | 'button' | 'infinite'

An option that determines which type of pagination to use.

Example

window["twn-starter-config"] = {
  // ...
  pagination: {
    type: 'default' // or 'button', or 'infinite'
  }
};

ui.colorSwatches

colorSwatches?: boolean

A toggle determining whether the color filter is displayed in a grid (true) or list (false) view.

Example

window["twn-starter-config"] = {
  // ...
  ui: {
    colorSwatches: false // or true
  }
};

ui.productsViewButton

productsViewButton?: boolean

A toggle determining whether a button should be shown to switch between a grid or a list view for the products.

Example

window["twn-starter-config"] = {
  // ...
  ui: {
    productsViewButton: false // or true
  }
};

ui.scrollToTopOnFilter

scrollToTopOnFilter?: boolean

A toggle determining whether the page should scroll to top after (de)selecting a filter.

Example

window["twn-starter-config"] = {
  // ...
  ui: {
    scrollToTopOnFilter: false // or true
  }
};

ui.scrollToTopOnPagination

scrollToTopOnPagination?: boolean

A toggle determining whether the page should scroll to top after navigation to another page.

Example

window["twn-starter-config"] = {
  // ...
  ui: {
    scrollToTopOnPagination: false // or true
  }
};

ui.sliderInputFields

sliderInputFields?: boolean

A toggle determining whether the slider filter should have input fields.

Example

window["twn-starter-config"] = {
  // ...
  ui: {
    sliderInputFields: false // or true
  }
};

ui.scrollBehavior

scrollBehavior?: 'smooth' | 'instant'

Behavior that should be used for scrolling to top ('smooth' or 'instant'). Smooth by default.

Example

window["twn-starter-config"] = {
  // ...
  ui: {
    scrollBehavior: 'instant' // or 'smooth'
  }
};

currency.symbol

symbol?: string

A string with the currency symbol to be used on product tiles within the module. The default value is the euro sign €.

Example

window["twn-starter-config"] = {
  // ...
  currency: {
    symbol: "$"
  }
};

currency.symbolPosition

symbolPosition?: 'left' | 'right'

Some currencies usually display the symbol on the left of the price, others on the right. With this configuration you may choose its position. Default value is left.

Example

window["twn-starter-config"] = {
  // ...
  currency: {
    symbolPosition: "right"
  }
};

analytics.type

type?: string

The type of the Google Analytics integration that is used on the page. When this option is set; the JS Implementation will send search events to the specified integration.

Enter gtm when using Google Tag Manager.

Example

window["twn-starter-config"] = {
  // ...
  analytics: {
    type: "gtm"
  }
};

translations

translations?: { [key: string]: { [key: string]: string } }

An object with translations for the user interface. The values in this object will override the default translations.

Important: this option can also be used to add additional languages that are not supported by default.

The table below shows all available keys that can be translated. These keys are case sensitive.

Example

window["twn-starter-config"] = {
  // ...
  translations: {
    en: {
      "Search results": "Search results" // <-- Override English translation
    },
    sv: {
      "Search results": "Sökresultat" // <-- Add Swedish translation
    }
  }
};

on

on?: { [key: string]: Function }

A dictionary with event handlers for different events in the lifecycle of the JS Implementation. Where the key is the name of the event and the value is a JavaScript function that gets executed when that particular event is triggered.

The table below shows all events that are available to use.

Example

window["twn-starter-config"] = {
  // ...
  on: {
    // ...
    "twn.request.success": function (event) {
      // Do something here...
    }
  }
};