Skip to main content

Core Events

PROBLEM​

Usually when we subscribe to a JS event, we use a string for the event name. This approach leads to many issues with the primary concern being, a misspelled event name and the browser never even complaining about the event name being incorrect because there is no way to know.

SOLUTION​

In order to tackle this, we store all our events in an object and then use that object to both fire and subscribe to them. With this approach, if you try to subscribe to an event that doesn't exist. You will see a "TypeError" to indicate the problem.

IMPORTANT: Note that the only events that we do not expose through this solution are:

  • coreApi:ready
  • coreApi:failed

USAGE​

To fetch an event for subscription from core api:

// USAGE PATTERN:
EPIGRAPH_CONFIGURATOR_WC.api.core.EVENTS.<eventCategory>.<eventName>

// EXAMPLE:
EPIGRAPH_CONFIGURATOR_WC.addEventListener(
  EPIGRAPH_CONFIGURATOR_WC.api.core.EVENTS.SCENE.Item_Added, 
  () => {
    console.log("An item was added to the scene");
  }
);

// In the example above on line "EPIGRAPH_CONFIGURATOR_WC.api.core.EVENTS.SCENE.Item_Added"
//  -- SCENE: is the <eventCategory>
//  -- Item_Added: is the <eventName>

Here is a list of all available events in the Core Api.

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",
      }
};