Basic stylesheet

In the example below we provide some basic CSS styling you can use on the default 'automatic' mode.
It can be extended however you like. In the example the cssPrefix is defined as lt.

Templating

When you want to completely change how the configuration is represented you can use your own templates.
To apply a custom template, just use HTML. In this HTML you can place some template keys in which the configurator will fill the corresponding values.

Example:

The available template keys are:

{{image}} : This will render an image element (<img src />)

{{description}} : Renders the answer description

{{price}} : Renders the price of the answer

{{size}} : Renders additional size information (Length x Width x Height)

{{cssPrefix}} : will be replaced with the value you provided for the cssPrefix property in the init method

The data-ref attribute is optional. If provided; the HTML element will not be rendered if the value of the template key is empty.

For example:

If no price is available, this block won't be visible.

Two default templates are provided. In the init method you're able to set the template under renderOptions > renderValueTemplate.
If none is provided, the default will be set to valueTemplate1.

LTConfigurator.valueTemplate1 will be rendered as:

LTConfigurator.valueTemplate2 will be rendered as:

Usage

To use one of the default templates:

To use your own template (example):

Stylling examples

Basic stylesheet#

Templating#

Usage#

Basic stylesheet

Templating

Usage