tweakwiseGuidedSelling
function tweakwiseGuidedSelling(options: GuidedSellingOptions): void
This function is added to the window
object once the Guided Selling module has finished loading.
The first argument is an object containing options for the Guided Selling.
GuidedSellingOptions
An object with options for the Guided Selling.
output
output: string
A string with a valid CSS selector leading to an HTML element on the page. This element will be used to display the user interface.
Example
tweakwiseGuidedSelling({
// ...
output: "#guided-selling"
});
instancekey
instancekey: string
A string with the instance specific key.
Example
tweakwiseGuidedSelling({
// ...
instancekey: "abcdefgh"
});
code
code: string
A string with the unique Guided Selling code configured in the Tweakwise App.
Example
tweakwiseGuidedSelling({
// ...
code: "unique-code"
});
lang
lang?: string
A string with the language of the user interface.
Example
tweakwiseGuidedSelling({
// ...
lang: "en" // or 'nl', 'de', 'es', 'fr', 'it'
});
ui.autoAdvance
autoAdvance?: boolean
A toggle determining whether to automatically advance to the next page on input when answering a single answer question.
Example
tweakwiseGuidedSelling({
// ...
ui: {
// ...
autoAdvance: true
}
});
ui.scrollToTop
scrollToTop?: boolean
A toggle determining whether to automatically scroll to the top of the container when answering a question.
Example
tweakwiseGuidedSelling({
// ...
ui: {
// ...
scrollToTop: true
}
});
ui.scrollToTopOffset
scrollToTopOffset?: number
The previous settings may not work as intended when Guided Selling is, for example, used on a page with a sticky header. Therefore this option is here to allow you to set a top margin offset that is going to be taken into consideration when calculating where the top of the container is. Value is a number in pixels.
Example
tweakwiseGuidedSelling({
// ...
ui: {
// ...
scrollToTopOffset: 280 // in pixels
}
});
theme.color
color?: string
A string with the primary color of the user interface. The value of this option should be a valid CSS color notation.
Example
tweakwiseGuidedSelling({
// ...
theme: {
// ...
color: "#00b7cd"
}
});
theme.rounded
rounded?: boolean
A toggle determining whether the user interface should be displayed with rounded corners.
Example
tweakwiseGuidedSelling({
// ...
theme: {
// ...
rounded: true
}
});
results.handle
handle?: (event: { data: GuidedSelling }) => void
A function overriding the default behavior of what happens when all questions are answered. Specifying this option will prevent the default results from being shown.
This option can be used to redirect the customer to an existing lister page after having completed the questionnaire. Please note that implementing such behavior requires custom JavaScript code that creates a translation from the selected filters in Tweakwise to the filters on the existing lister page.
Example
tweakwiseGuidedSelling({
// ...
results: {
// ...
handle: function (event) {
var results = event.data;
// Override default behaviour here...
}
}
});
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
tweakwiseGuidedSelling({
// ...
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
tweakwiseGuidedSelling({
// ...
currency: {
// ...
symbolPosition: "right"
}
});
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.
Key |
---|
"Question {n}/{t}" (where {n} is the current question and {q} is the total count) |
"Show more" |
"Show less" |
"Back" |
"Skip" |
"Next" |
"Results" |
"{n} items" (where {n} is the amount of products) |
"Add to cart" |
Example
tweakwiseGuidedSelling({
// ...
translations: {
en: {
"Next": "Continue" // <-- Override English translation
},
sv: {
"Next": "Nästa" // <-- Add Swedish translation
}
}
});
on
on?: { [key: string]: Function }
A dictionary containing event handlers for different events in the Guided Selling JS. The key is the name of the event. The value is the event handler in the form of a JavaScript function.
The on option currently supports the following events:
Event Name | Description |
---|---|
twn.add-to-cart | This event is triggered when the add-to-cart button is pressed |
twn.add-to-favorites | This event is triggered when the add-to-favorites button is pressed |
twn.product.visible | Product tile is visible on a screen |
twn.product.click | A link on a Product tile has been clicked |
Example
tweakwiseGuidedSelling({
// ...
on: {
// ...
'twn.add-to-cart': function (event) {
// ...
}
}
});
starterProductTile
starterProductTile?: boolean
The starter product tile option determines whether the layout and styling of the JS Implementation should be used within the Guided Selling JS. This option is enabled by default.
Example
tweakwiseGuidedSelling({
// ...
starterProductTile: true
});