Web-component API

• Last updated on September 22, 2024
• •
• 1 minute to read

This API allows you to interact with a web component through calls to its methods or to receive and modify data using its properties. This also includes events that the web component sends.

The API of the web component will only be available after it has been loaded and initialized, and you will need to get the HTML element using a method available in the Document Object Model (DOM). For example, you can use getElementByTagName(tag):

const configurator = document.getElementByTagName("au-configurator").item(0);

After obtaining the element, you can use this API as follows:

const choisesValues = editor.getChoices();
console.log(choisesValues);

Methods

init(configuration)

Description: Initializes the component after reading parameters from the workflow and opening a product.

Arguments:

• configuration: IConfiguratorInitArgs

Returns: void

Example:

configurator.init(
    configVersion: 2,
    integration: {
        tenantId: <yourTenantId>,
        user: {
            id: <userId>,
            token: <userToken>
        },
        storefrontId: <yourStorefrontId>,
        cchubApiGatewayUrl: "https://api.customerscanvashub.com/"
    },
    input: {
        productReferenceId: <externalProductReference>,
        productId: <ccProductId>
    },
    settings: {
        measureUnit: "mm",
        showUploadButton: false
    }
);

getChoices()

Description: Returns a HashMap of the selected option values.

Arguments: none

Returns: Record<string, string | string[]>

Example:

const choises = configurator.getChoices();
console.log(choises);

setChoices(choices)

Description: Sets the option values based on the input HashMap.

Arguments:

• choices: Record<number, number[]>

Returns: Promise<void>

Example:

await configurator.setChoices({ 'Color': ['green'] });

getPrice()

Description: Returns data on the price of the selected option and quantity.

Arguments: none

Returns: LineItemCostDto

Example:

const configuredPrice = configurator.getPrice();

getCurrentSKU()

Description: Returns the SKU of the current product variant.

Arguments: none

Returns: string

Example:

const currentSKU = configurator.getCurrentSKU();
console.log(currentSKU);

getCurrentVariant()

Description: Returns the current productVariantId.

Arguments: none

Returns: number

Example:

const productVariant = configurator.getCurrentVariant();
console.log(productVariant);

getSpecParameters()

Description: Returns the mockup parameters.

Arguments: none

Returns: Record<string, any>

Example:

const mockupParameters = configurator.getSpecParameters();
console.log(mockupParameters);

showLoader(value)

Description: Enables and disables the component loader on the page.

Arguments:

• value: boolean

Returns: void

Example: This is how you can display the loader.

configurator.showLoader(true);

Events

loaded

Description: When the Configurator is loaded to the page and initialized, it triggers this event.

Example:

configurator.addEventListener("loaded", event => console.log(event));

submit

Description: The Configurator triggers this event when a customer has finished configuring the product. This event passes the price data and visual assets for the configured product. For reference, read the Output data topic.

Example: This is how you can handle this event:

configurator.addEventListener("submit", event => {
    console.log(event);
});