Getting started

To get started you need to include two files on the webpage where the user will configurating the article.
This is an JS file (the configurator itself) and a basic stylesheet. The configurator depends on jQuery, so if you are not already using jQuery you should include it as well.

For additional styling examples see Styling Samples.

In the webpage you should create a <div> with an specific ID. This <div> is then used to render the configurator in.
For the examples below we expect a <div id="configurationcontainer"></div> somewhere on the page.

Basic example

Below a basic example for LogicTrade based articles is given.
It is possible to use other data sources, but you should change the type and the options could also differ a bit, see Swagger for more details.

Initialize

First you have to initialise the configurator.
Here you define which element (an <div> for example) will be used to place the configurator in.
Furthermore you define the basic renderOptions (see below for more possibilities) and the type for these articles is always logictrade.

Starting the configuration

When the configurator is initialized, you can start the actual configuration.
Here you provide the articleCode of the article that needs to be configured.

Finalizing the configuration / ordering

When the customer answered all required configuration steps, the onComplete event is called.
In this event we call the finish function of the configuration service. This will return the configuration summary, which includes the final configurationHeaderId.
This configurationHeaderId can be used with the API to create a Sales order with this specific configuration.

Verifying configuration

Since the configuration takes place at the clientside, it is advisable to verify the configuration in your backend before sending the order to the API.
In this way malicious edits of prices can be prevented.

You can use two simple checks to verify if the configuration has been tampered with:

The finished configuration object send by the client to your backend contains an articleCode. Verify that this articleCode is the same articleCode as used in the productpage.

Verify the configuration object by calling the verify endpoint (configurator.logictrade.app/api/logictrade/verify).This POST request takes the full configuration object from the finish response as body. The response is a simple true or false.

When the response is true and the articleCode is the same, you are certain that the configuration has not been tampered with.
In any other case, it is possible the configuration has expired, or the configuration has been tampered with.

Preview

A working preview of the examples given above can be seen in Preview.

Properties

There are multiple properties which can be set to customize your configuration

In the init function you have the following properties:

element the container were the configurator must be rendered

type the type configuration (logictrade, curtain, a.s.o.)

url the URL of the configuration service

token the token given by LogicTrade

onChange the function which will be executed when a change occurred, with the configuration as parameter

onComplete the function which will be executed when all required steps are answered, with the configuration as parameter

onError the function which will be executed when an error occurred, with the error as parameter

onPriceChange the function which will be executed when the price changed, with the price as parameter

onImageChange the function which will be executed when the article image is changed, with the image as parameter (object with 'rootImage' property)

renderOptions an object with some render options

renderLoader when set to true, container will be rendered for a loader

autoScroll when set to true, container will scroll to next configuration step

layout the layout of the configuration, flex for div, table for table

ccsPrefix the prefix of the CSS classes of the rendered controls

renderImages show the images of the possible values in the rendered layout

useSelect2 use the select2 library for rendering select control

renderValueTemplate the template to use for styling

initialValuePlaceholder When no answer is given, this placeholder text is shown

renderValueGroups true/false. Turn grouping on or off

valueImagePlaceholder URL or base64 encoded string. An image placeholder which will be shown when no answer image is available

renderAdditionalInformation show tooltip with additional information of the configuration step

renderPricePrefix adds a + prefix to the shown price in the steps

The parameter of the start function is an object, which is different for every type. The properties of this object can be found at the start function in Swagger.

Vue

You can also use the configurator in combination with an advanced JavaScript application framework, like Vue or React.
In the example below, we give an example of using the configurator with Vue. This example assumes you are using Vuex.

Since using the configurator requires loading the appropriate javascript files from external sources, you will need a library to do so from within your app framework.
In Vue, you can use the vue-plugin-load-script library for example to accomplish this. The example below uses this library.

First, create a JavaScript file named configurator.cs to load, initialize and interact with the configurator:

The example component below uses the configurator.js file to create a configurator:

The example above is by no means complete. It is merely an example of how to load the configurator and hook it up to the Vuex state.

Code samples

Getting started#

Basic example#

Initialize#

Starting the configuration#

Finalizing the configuration / ordering#

Verifying configuration#

Preview#

Properties#

Vue#