Skip to main content

@elfsquad/configurator

ConfiguratorContext

The ConfiguratorContext class is a wrapper around the Elfsquad configurator API. The class contains methods to start visualize configurations.

constructor(_options)

Initializes a new instance with the provided options.

Method parameters

_options required (IConfiguratorOptions)

The options that are used to configure the context.

import { ConfiguratorContext, AuthenticationMethod } from '@elfsquad/configurator';

const context = new ConfiguratorContext({
  authenticationMethod: AuthenticationMethod.ANONYMOUS,
  tenantId: 'your-tenant-id',
});

getConfigurationModels(languageIso?)

Retrieve the available configuration models, categories & languages for the current showroom & user.

Method parameters

languageIso optional (string | undefined)

the language iso will be used for setting feature texts in the DTO.

Returns (Promise<ConfigurationModels>)

DTO containing the configuration models, categories & languages.

const context = new ConfiguratorContext();
const configurationModels = await context.getConfigurationModels();
console.log('Models: ', configurationModels.features);
console.log('Categories: ', configurationModels.categories);
console.log('Languages: ', configurationModels.languages);

newConfiguration(name, language, preview, includeSearchbarResults)

Start a new configuration with the provided feature model id, feature model name or configuration code.

Method parameters

name required (string)

The feature model id, feature model name or configuration code.

language required (string)

The language to start the configuration in.

preview required (boolean)

Whether the configuration should be started in preview mode.

includeSearchbarResults required (boolean)

Whether results in display type searchbar should be included or not.

Returns (Promise<Configuration>)

The new configuration.

const context = new ConfiguratorContext();
const feautureModelName = 'YourFeatureModelName';
const configuration = await context.newConfiguration(feautureModelName);

openConfiguration(configurationId, includeSearchbarResults)

Open an existing configuration with the provided configuration id or configuration code.

Method parameters

configurationId required (string)

The configuration id or configuration code.

includeSearchbarResults required (boolean)

Whether results in display type searchbar should be included or not.

Returns (Promise<Configuration>)

The opened configuration.

const context = new ConfiguratorContext();
const configurationId = 'YourConfigurationId';
const configuration = await context.openConfiguration(configurationId);

getSettings(language)

Retrieve the settings for the current showroom.

Method parameters

language required (string)

The language is used for retrieving localized texts.

Returns (Promise<Settings>)

The settings for the current showroom & user.

const context = new ConfiguratorContext();
const settings = await context.getSettings();
console.log('Settings: ', settings);

getLayout2d(configurationId, stepId)

Retrieve the 2D layout for a coniguration. The 2dlayout can be used for visualizing the configuration in a 2D view.

Method parameters

configurationId required (string | null)

The configuration id. If not provided, the root configuration id will be used.

stepId required (string)

The step id.

Returns (Promise<Layout2d[]>)

The 2D layout for the configuration.

const context = new ConfiguratorContext();
const layout2d = await context.getLayout2d();
console.log('Layout2d: ', layout2d);

getLayout3d(configurationId)

Retrieve the 3D layout for a coniguration. The 3dlayout can be used for visualizing the configuration in a 3D view.

Method parameters

configurationId required (string | null)

The configuration id. If not provided, the root configuration id will be used.

Returns (Promise<Layout3d[]>)

The 3D layout for the configuration.

const context = new ConfiguratorContext();
const layout3d = await context.getLayout3d();
console.log('Layout3d: ', layout3d);

getLinkedConfigurationOverview()

Retrieve the linked configuration overview for the current root configuration. This overview can be used to display a navigator for the linked configurations.

Returns (Promise<LinkedConfigurationOverview>)

The linked configuration overview for the current root configuration.

const context = new ConfiguratorContext();
const linkedConfigurationOverview = await context.getLinkedConfigurationOverview();
console.log('LinkedConfigurationOverview: ', linkedConfigurationOverview);

getOverview(configurationId)

Retrieve the overview for the current configuration. The overview can be used to display a summary of the configuration, for example on the checkout page.

Method parameters

configurationId required (string | null)

The configuration id. If not provided, the root configuration id will be used.

Returns (Promise<OverviewGroups[]>)

The overview for the configuration.

const context = new ConfiguratorContext();
const overview = await context.getOverview();
console.log('Overview: ', overview);

onUpdate(f)

Registers a callback function that will be called whenever a configuration is updated.

Method parameters

f required ((evt: CustomEvent) => void)

The callback function that will be registered.

import { ConfiguratorContext, Configuration } from '@elfsquad/configurator';
const context = new ConfiguratorContext();

const callback = (evt: CustomEvent<Configuration>) => {
 console.log('Configuration updated: ', evt.detail);
};
context.onUpdate(callback);

requestQuote(quotationRequest)

Request a quote for the current root configuration. This endpoint should be used when anonymous users want to request a quote.

Method parameters

quotationRequest required (QuotationRequest)

The quotation request.

const context = new ConfiguratorContext();
const quotationRequest = {
  email: 'john.doe@gmail.com',
  firstName: 'John',
  lastName: 'Doe',
}
await context.requestQuote(quotationRequest);

addToQuotation(quotationId, configurationIds)

Add the current configuration to a quotation. This endpoint should be used when a user is logged in and wants to add a configuration to a quotation.

Method parameters

quotationId required (string)

The quotation id.

configurationIds required (string[])

The configuration ids. If not provided, the root configuration id will be used.

const context = new ConfiguratorContext();
const quotationId = 'YourQuotationId';
await context.addToQuotation(quotationId);

_get(url)

Method parameters

url required (string)

Returns (Promise<Response>)

_put(url, object)

Method parameters

url required (string)

object required (any)

Returns (Promise<Response>)

_updateConfiguration(configuration)

Method parameters

configuration required (Configuration)

Configuration

The Configuration class is returned by the ConfiguratorContext and is used for managing the configuration state updating the configuration.

constructor(configuratorContext, data)

Method parameters

configuratorContext required (ConfiguratorContext)

data required (object)

updateRequirement(featureModelNodeId, isSelection, value, ignoreConflicts, includeSearchbarResults)

Updates a requirement on the this configuration. This can be used to (de)select a feature or set a value on a feature.

Method parameters

featureModelNodeId required (string)

The id of the feature model node to update

isSelection required (boolean)

Whether the feature should be selected or not

value required (number)

The value to set on the feature

ignoreConflicts required (boolean)

If ture, the API will try to automatically resolve conflicts.

includeSearchbarResults required (boolean)

If true, the API will include results in the display type searchbar.

Returns (Promise<void>)

A promise that resolves when the requirement has been updated

const nodeId = '00000000-0000-0000-0000-000000000000';
const value = 1;
const isSelection = true;

await configuration.updateRequirement(nodeId, isSelection, value);

updateText(featureModelNodeId, textValue)

Updates the text value of a feature on this configuration.

Method parameters

featureModelNodeId required (string)

The id of the feature model node to update

textValue required (string)

The text value to set on the feature

Returns (Promise<void>)

A promise that resolves when the text value has been updated

const nodeId = '00000000-0000-0000-0000-000000000000';
const textValue = 'Hello World';
await configuration.updateText(nodeId, textValue);

updateImage(featureModelNodeId, textValue)

Updates the image value of a feature on this configuration.

Method parameters

featureModelNodeId required (string)

The id of the feature model node to update

textValue required (string)

The image value to set on the feature

Returns (Promise<void>)

A promise that resolves when the image value has been updated

const nodeId = '00000000-0000-0000-0000-000000000000';
const textValue = 'https://example.com/image.png';
await configuration.updateImage(nodeId, textValue);

changeLanguage(languageIso)

Changes the language of this configuration.

Method parameters

languageIso required (string)

The ISO code of the language to change to

Returns (Promise<void>)

A promise that resolves when the language has been changed successfully

const languageIso = 'en';
await configuration.changeLanguage(languageIso);

getStepImage(stepId, size, background)

Deprecated: use getLayout2d on the ConfiguratorContext instead

Retrieves a rendered image of a step in this configuration.

Method parameters

stepId required (string)

The id of the step to render

size required (number)

The size of the image to render

background required (boolean)

Whether to render the background or not

Returns (Promise<Blob>)

A promise that resolves with the rendered image

const stepId = '00000000-0000-0000-0000-000000000000';
const size = 1080;
const background = true;
const image = await configuration.getStepImage(stepId, size, background);

getPdf()

Retrieves the PDF document for this configuration.

Returns (Promise<Blob>)

A promise that resolves with the PDF document

const context = new ConfiguratorContext();
const pdf = await configuration.getPdf();