Extend with custom functionality

Accessing internal APIs

We provide a way to extend the standard functionality of the Frontend API Client. You can access a set of internal features via the PREVIEW_INITIALIZED hook.

See this example on how to implement this feature:

Asynchronous Hook

This hook is being fired in an asynchronous way. As soon as the internal APIs are ready, it will provide the payload to the registered hook function. If you register the hook at a later point, the hook will be called instantly. This ensures that you can register this hook at any time.

Maintenance Disclaimer

This file represents an example implementation for advanced use-cases. This code is not maintained and therefore not subject to ensured compatibility with the Connect for Commerce Frontend API.

  import { EcomApi, EcomHooks, LogLevel } from 'fcecom-frontend-api-client';

  const ecomApi = new EcomApi('https://example.com', LogLevel.INFO);

  ecomApi.addHook(EcomHooks.PREVIEW_INITIALIZED, async ({ TPP_BROKER }) => {
    // Register a button inside the TPP preview frame
    TPP_BROKER.registerButton(
      {
        label: 'customButton',
        isEnabled: () => Promise.resolve(true),
      },
      1
    );

    // Show the FirstSpirit edit dialog for the current set element
    TPP_BROKER.showEditDialog(await TPP_BROKER.getPreviewElement());
  });

  ecomApi.init();

---

Last update: October 27, 2023