Web-component API

• Last updated on August 1, 2024
• •
• 1 minute to read

The Web-component API is an API that allows you to interact with a web component by calling its methods or receiving and modifying data using its properties, as well as events that the web component sends.

To work with the Web-component API, you need to get the appropriate HTML element using any method available in the Document Object Model (DOM). For example, it can be the getElementByTagName(tag) method:

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

After receiving the item, you can use this API as follows:

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

The API of the web component will only be available after it has been loaded and initialized. If you use the Plugin API, you can use it only after calling the function bootstrap(providers, effects).

Methods

init(configuration)

Description: Opens a product and initializes the editor with the specified settings and resource paths.

Arguments:

• configuration: IHandyEditorInitArgs

Returns: void

Example:

handyEditor?.init(
    integration: {
        tenantId: <yourTenantId>,
        user: {
            id: <userId>,
            token: <userToken>
        },
        storefrontId: <yourStorefrontId>,
        cchubApiGatewayUrl: "https://api.customerscanvashub.com/"
    },
    input: {
        productId: <productId>
    },
    resources: {
        assetLibrary: {
            clipartsFolder: "/Image Library/Clipart"
        }
    },
    settings: {
        designViewer: {
            grid: {
                step: 10
            }
        }
    }
);

getChoices()

Description: Returns a HashMap of the selected option values when you enabled the CC options element in workflow.

Arguments: none

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

Example:

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

setChoices(choices)

Description: Allows you to set the selected option values.

Arguments:

• choices: Record<number, number[]>

Returns: Promise<void>

Example:

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

getChoicesValues()

Description: Returns the selected option values in the format option name : value name. If multiple selection is possible, an array of the value names is returned.

Arguments: none

Returns: Record<number, number[]>

Example:

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

Properties

injector

Description: Allows you to get the provider values.

Type: Injector

Example:

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

Events

addToCart

Description: The Handy Editor triggers this event when the customer has finished their customization and added the product to a shopping cart. This event passes the data corresponding to a line item — a single product added to the cart.

Example: This is how you can handle this event:

editor.addEventListener("addtocart", event => {
    const cartItem = event.detail;
    console.log(cartItem);
});