tweakwiseGuidedSelling

function tweakwiseGuidedSelling(options: GuidedSellingOptions): void

This function is added to the window object once the plugin has finished loading. This function is available after the DOMContentLoaded event.

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...
    }
  }
});

results.redirect

redirect?: string

🚧

This option is deprecated. Please use the results.handle option to manually redirect instead.

The redirect option only works in combination with the JS Implementation. This option should contain a URL to a page where a JS Implementation lister page is configured. Once the questionnaire is completed the Guided Selling will redirect to the configured URL containing the selected filters.

Example

tweakwiseGuidedSelling({
  results: {
    redirect: "/results"
  }
});

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.

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:

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