By default Tweakwise JS contains all necessary configuration that is required to get your Search & Merchandising module 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.
auto
auto: boolean
Toggle to disable auto-initialization, in case manual is preferred. See Manual initialization.
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";
keyboard
keyboard?: string
A string with the keyboard to be used for search algorithms. All available options are: 'qwerty', 'azerty' or 'qwertz'.
Example
window["twn-starter-config"].keyboard = "qwerty"; // or "azerty" or "qwertz"
pageSize
pageSize?: number
The number of products that must be displayed per page. The standard value is configured at shop level. Only use this parameter to overrule this standard configured quantity.
Example
window["twn-starter-config"].pageSize = 24;
filterTemplateId
filterTemplateId?: number
Overruling the linked filter template with the specified template.
Example
window["twn-starter-config"].filterTemplateId = 2;
sortingTemplateId
sortingTemplateId?: number
Overruling the linked merchandising template with the specified template.
Example
window["twn-starter-config"].sortingTemplateId = 2;
lang
lang?: string
A string with the language of the user interface. Also serves as the language to be used for search algorithms. All available languages can be retrieved with the catalog call: /catalog/languages/{instancekey} .
Example
window["twn-starter-config"].lang = "en" // or 'nl', 'de', 'es', 'fr', 'it';
profileKey
profileKey?: string
A string to provide the personalization profilekey to be used.
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.pageSize
pageSize?: number
The number of products that must be displayed per page. The standard value is configured at shop level. Only use this parameter to overrule this standard configured quantity. When omitted, the default pageSize will be used.
Example
window["twn-starter-config"].navigation.pageSize = 24;
navigation.filterTemplateId
filterTemplateId?: number
Overruling the linked filter template with the specified template. When omitted, the default filterTemplateId will be used.
Example
window["twn-starter-config"].navigation.filterTemplateId = 2;
navigation.sortingTemplateId
sortingTemplateId?: number
Overruling the linked merchandising template with the specified template. When omitted, the default sortingTemplateId will be used.
Example
window["twn-starter-config"].navigation.sortingTemplateId = 2;
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.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.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.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'
ui.closeSearchButton
closeSearchButton?: boolean
Visibility of the "Close" button on a search overlay. By default, the option is true
, therefore showing the close button.
Example
window["twn-starter-config"].ui.closeSearchButton = false;
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";
grouped
grouped?: boolean
With this option set to true
a different endpoint will be used for search and navigation returning products grouped by a common group key. For example, you can use this option if you have many product variants with the same group code but only want to show a single product in search or navigation results. Defaults to false
.
Example
window["twn-starter-config"].grouped = true;
sourceName
sourceName?: string
Override the source added to each request's header (TWN-Source
) for traffic categorization. Defaults to Tweakwise Javascript Search & Merchandising
.
Example
window["twn-starter-config"].sourceName =: 'www.example-shop.com - Tweakwise JS Search & Merchandising';
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.
Key |
---|
"Search results" |
"Close" |
"Filters" |
"Show filters" |
"Apply filters" |
"All filters" |
"{n} results for {q}" (where {n} is the amount of products and {q} is the search term) |
"{n} items" (where {n} is the amount of products) |
"Selected filters" |
"Erase all filters" |
"Sort" |
"Erase" |
"Save" |
"Grid" |
"List" |
"Add to cart" |
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.
Key | Description |
---|---|
twn.search.started | Value change of one of the input elements detected |
twn.selection.change | Selection in search hash changed |
twn.request.started | Request to fetch search results started |
twn.request.success | Request to fetch search results succeeded |
twn.request.failed | Request to fetch search results failed |
twn.request.completed | Request to fetch search results completed |
twn.container.open | Search results container is opened |
twn.container.close | Search results container is closed |
twn.selection.navigation.change | Selection in navigation hash changed |
twn.request.navigation.started | Request to fetch navigation results started |
twn.request.navigation.success | Request to fetch navigation results succeeded |
twn.request.navigation.failed | Request to fetch navigation results failed |
twn.request.navigation.completed | Request to fetch navigation results completed |
twn.container.navigation.open | Navigation results container is opened |
twn.container.navigation.close | Navigation results container is closed |
twn.add-to-cart | Add to cart button is clicked |
twn.add-to-favorites | Add to favorites button is clicked |
twn.product.visible | Product tile is visible on the screen (at least 50%) |
twn.product.click | A link on a Product tile has been clicked |
Example
window["twn-starter-config"].on = {
// ...
"twn.request.success": function (event) {
// Do something here...
},
"twn.product.click": function (event) {
// Do something here...
}
};