Configurator Events

The Configurator heavily relies on events to notify when something has happened or when the Configurator is ready. Below we can see an example of the Configurator firing an event when it is ready or if it failed. The coreAPI:ready is the best place to start if you need to make any modifications to the data of the Configurator.

<head>
    <!-- Import other scripts above and below this. -->
    <script src="https://cdn.jsdelivr.net/npm/@epigraph/configurator"></script>
</head>

<!-- A container around the web component is completely optional but we highly recommend it. -->
<div class="epg-configurator-container">
    <!-- A client-access-key can only be linked to a single domain. 
    So if you would like to whitelist more than one domain, 
    please request a separate key for the each. -->
    <epigraph-configurator 
        id="wcEpigraphConfigurator" 
        client-access-key="<key-provided-by-epigraph>">
    </epigraph-configurator>
</div>

<script>
    const EPIGRAPH_CONFIGURATOR_WC = document.getElementById("wcEpigraphConfigurator");

    EPIGRAPH_CONFIGURATOR_WC.addEventListener(
        "coreApi:ready", 
        function (event) 
        {
            console.log("Core API successfully initialised.");

            /** Start setting up the behaviour of the website 
             * if the configurator was successfully initialised 
             * without any errors
             */
            EPIGRAPH_CONFIGURATOR_WC.api.core.<anyMethodFromTheApi>();
        }
    );

    EPIGRAPH_CONFIGURATOR_WC.addEventListener(
        "coreApi:failed", 
        function (event) 
        {
            console.error("Failed to initialise core api.");

            /** Gracefully exit and probably show a modal to the user 
             * with a proper reasoning for the API to not initialise. 
             * This could be a hardware limitation too and 
             * not just a problem with the configurator web component
             */
            console.error(event.details);
        }
    );
</script>

As we can see above, we get a reference to the Configurator by it's ID, and then subscribe to both the coreApi:ready and coreApi:failed events.

While these two events are useful initially for knowing whether the Configurator successfully started, it is also your entry point to modifying any data within the Configurator. You may want to set pricing or inventory in the Configurator, the coreApi:ready event is where you would do this. An example of this can be found here:

Update Pricing and Inventory

Additional Events

Outside of the coreApi:ready and coreApi:failed events, there are a number of other events that you may wish to subscribe to. They are listed below:

EVENTS = {
    UI: {
        PreloadScreen_Show: "preload:show",
        PreloadScreen_Hide: "preload:hide",
        ContextMenu_InfoBtnClicked: "infoButtonClicked_ContextMenu",
        ContextMenu_Show: "contextMenu:show",
        ContextMenu_Hide: "contextMenu:hide",
        UtilityMenu_Show: "utilityMenu:show",
        UtilityMenu_Hide: "utilityMenu:hide",
        ShareButton_Show: "shareButton:show",
        ShareButton_Hide: "shareButton:hide",
        ViewInYourSpaceButton_Show: "viewInYourSpace:show",
        ViewInYourSpaceButton_Hide: "viewInYourSpace:hide",
        ResetButton_Show: "resetBtn:show",
        ResetButton_Hide: "resetBtn:hide",
        DimensionsButton_Show: "dimensionsBtn:show",
        DimensionsButton_Hide: "dimensionsBtn:hide",
      },
    SCENE: {
        Item_Added: "item:added",
        Item_Removed: "item:removed",
        Items_Updated: "items:updated",
        FittingSkuIds_Updated: "fittingSkuIds:updated",
        CartItems_Updated: "reviewItems:updated",
        Hotspot_Enter: "hotspot:enter",
        Hotspot_Exit: "hotspot:exit",
        SavedConfiguration_Loaded: "loaded-saved-configuration",
        MaterialOverrides_Exists: "materialOverrideExists",
        Cart_Checkout: "cart:checkout",
        ReplaceableCategory_Updated: "replaceableCategory:updated",
      }
};