The personalized JavaScript file provided by Tweakwise contains all necessary configuration that is needed to get your JS Implementation up and running. However 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.

The first step in doing so is adding a configuration object to the page using JavaScript. To do this copy the snippet below into your HTML.

<script>
  window["twn-starter-config"] = {
    // JS Implementation options
  };
</script>

After the configuration object has been added to the page we can start expanding it with options. For a full overview of all available options see the list below.

Options reference

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

<script>
  window["twn-starter-config"] = {
    instancekey: 'abcdefgh'
  };
</script>

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

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

output

output: string

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

Example

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

cid

cid?: string

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

Example

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

lang

lang?: string

A string with the language of the user interface.

Example

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

filters.position

position?: string

A string determining the position of the filters.

Example

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

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

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

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

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

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

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

products.mobile

mobile?: number

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

Example

<script>
  window["twn-starter-config"] = {
    products: {
      mobile: 2
    }
  };
</script>

products.tablet

tablet?: number

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

Example

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

products.desktop

desktop?: number

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

Example

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

products.mobileView

mobileView?: "grid" | "list"

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

Example

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

products.tabletView

tabletView?: "grid" | "list"

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

Example

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

products.desktopView

desktopView?: "grid" | "list"

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

Example

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

pagination.type

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

An option that determines which type of pagination to use.

Example

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

ui.colorSwatches

colorSwatches?: boolean

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

Example

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

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

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

ui.scrollToTopOnFilter

scrollToTopOnFilter?: boolean

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

Example

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

ui.scrollToTopOnPagination

scrollToTopOnPagination?: boolean

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

Example

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

ui.sliderInputFields

sliderInputFields?: boolean

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

Example

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

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

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

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

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

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.

Enter ga when using analytics.js. (deprecated)

Example

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

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.

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

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

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

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