Web-component API

• Last updated on February 20, 2025
• •
• 1 minute to read

This API enables interactions with CC Options by calling its methods and accessing or modifying its properties. It also handles events sent by the web component.

The CC Options API becomes accessible only after it has finished loading and initializing. To utilize it, you must retrieve the HTML element using a method provided by the Document Object Model (DOM). For example, you can use getElementByTagName(tag):

const ccOptions = document.getElementByTagName("au-cc-options").item(0);

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

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

Methods

init(configuration)

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

Arguments:

• configuration: ICcOptionsInitArgs

Returns: void

Example:

ccOptions.init(
    configVersion: 2,
    integration: {
        tenantId: <yourTenantId>,
        user: {
            id: <userId>,
            token: <userToken>
        },
        storefrontId: <yourStorefrontId>,
        cchubApiGatewayUrl: "https://api.customerscanvashub.com/"
    },
    input: {
        externalProductId: <externalProductReference>
    },
    settings: {
        general: {
            quantityEnabled: true,
            quantityValues: "Any"
        }
    }
);

getChoices()

Description: Returns a HashMap of the selected option values.

Arguments: none

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

Example:

const choises = ccOptions.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 ccOptions.setChoices({ 'Color': ['green'] });

getOptionById(id)

Description: Returns extended information about the option by ID.

Arguments:

• id: number | string

Returns: IOptionOutput

Example:

const option = ccOptions.getOptionById(75154);
console.log(option);

getValueById(id)

Description: Returns extended information about the value by ID.

Arguments:

• id: number | string

Returns: IOutputValue

Example:

const value = ccOptions.getValueById(266756);
console.log(value);

Events

loaded

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

Example:

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

changed

Description: The CC Options triggers this event when a customer changes the values, it outputs the hashmap from the option and its selected values. For reference, read the Output data topic.

Example: This is how you can handle this event:

ccOptions.addEventListener("changed", event => console.log(event.detail));

For a single-choice option, the console output may lookk as follows:

{
    "75154": [266756]
}