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);
});