Access Client API in Preview Context

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 fired in an asynchronous way. As soon as the internal APIs are ready, the payload is passed to the registered hook function. If you register the hook at a later point in time, the hook is 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 is therefore not subject to guaranteed 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: February 26, 2024