Web-component API

• Last updated on May 27, 2025
• •
• 1 minute to read

This API allows you to interact with a Simple Editor web component through calls to its methods or to receive and modify data using its properties.

The API of the Simple Editor 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 simpleEditor  = document.getElementByTagName("au-simple-editor").item(0);

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

const choicesValues = simpleEditor.getChoicesValues();
console.warn(choicesValues);

Methods

init(configuration)

Description: Initializes the component after reading parameters from the workflow file.

Arguments:

• configuration: ISimpleEditorElementInitArgsV2

Returns: void

Example:

simpleEditor.init({
    "configVersion": 2,
    "integration": {
        "tenantId": 12345,
        "storefrontId": 123456,
        "cchubApiGatewayUrl": "https://api.customerscanvashub.com/",
        "user": {
            "id": "john.wood",
            "token": "fcmVhZCIsIlN0b3JlZnJvbnRVc2Vyc19mdWxsIiwiU3R..."
        }
    }
    "input": {
        "productId": 2502
    },
    "settings": {
        "pageSelector": { "enabled": true },
        "options": { "disableUnavailable": true }
    },
    "resources": {}
});

getChoices()

Description: Returns a HashMap of the selected option values.

Arguments: none

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

Example:

const choices = simpleEditor.getChoices();
console.log(choices);

setChoices(choices)

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

Arguments:

• choices: Record<number, number[]>

Returns: Promise<void>

Example:

await simpleEditor.setChoices({ '123': ['23'] });

getChoicesValues()

Description: Returns data on the selected options in the format: option name : value name. If multiple selections are possible, an array of selected value names is returned.

Arguments: none

Returns: Record<number, number[]>

Example:

const choicesValues = simpleEditor.getChoicesValues();
console.log(choicesValues);

showLoader(value)

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

Arguments:

• value: boolean

Returns: void

Example:

simpleEditor.showLoader(true);

setVariantBySku(sku)

Description: Sets the current variant by SKU.

Arguments:

• sku: string

Returns: void

Example:

// Set the current variant to the one with SKU "SKU12345".
simpleEditor.setVariantBySku("SKU12345");

setQuantity(quantity)

Description: Programmatically sets the product quantity.

Arguments:

• quantity: number

Returns: void

Example:

// Set the quantity to 5.
simpleEditor.setQuantity(5);

getVDPData()

Description: Returns a HashMap of variables by surfaces.

Arguments: none

Returns: Record<string, any>

Example:

const variables = simpleEditor.getVDPData();
console.log(variables);

Properties

injector

Description: Allows you to get the provider values.

Type: Injector

Example:

const store = simpleEditor.injector.get("STORE_TOKEN");
console.log(store);