Class: EcomApi

Frontend API for Connect for Commerce.

Example

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

const api = new EcomApi(
  'http://localhost:3001/api', // The URL to your backend service
  LogLevel.DEBUG // The loglevel to use for clientside logs
);

api.setDefaultLocale('de_DE'); // Default language to use (can also be set on the server)

await api.init();

Export

Constructors

constructor

• new EcomApi(baseUrl, logLevel?)

Creates an instance of EcomApi.

Parameters

Name	Type	Default value	Description
`baseUrl`	`string`	`undefined`	URL of the backend service.
`logLevel`	`LogLevel`	`LogLevel.INFO`	0: DEBUG 1: INFO 2: WARNING 3: ERROR 4: NONE

Properties

defaultLocale

• Optional defaultLocale: string

Methods

addHook

▸ addHook\<Name, Func>(name, func): void

Register a new hook.

Type parameters

Name	Type
`Name`	extends `EcomHooks`
`Func`	extends `null` \| `FindPageItem` \| `PageTarget` \| `SectionCreatingCancelledPayload` \| `PageCreationFailedPayload` \| `ContentChangedHookPayload` \| `OpenStoreFrontUrlHookPayload` \| `CreateSectionHookPayload` \| `RequestPreviewElementHookPayload` \| `PageCreatedHookPayload` \| `PreviewInitializedHookPayload`

Parameters

Name	Type	Description
`name`	`Name`	Name of the hook.
`func`	(`payload`: `Func`) => `void`	The hook's callback.

Returns

void

Example

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

type OpenStoreFrontUrlPayload = {
  id: string; // ID of the element to open.
  type: string; // Type of the element to open.
  url: string; // URL of the element to open in the storefront.
};

const handleHook = (payload: OpenStorefrontUrlHookPayload) => {
  // ... Custom logic
}

api.addHook(EcomHooks.OPEN_STOREFRONT_URL, handleHook); <-- Register Hook

clear

▸ clear(): void

Clears the DOM.

Returns

void

createPage

▸ createPage(payload): Promise\<any>

Creates a FirstSpirit page according to shop identifiers.

Parameters

Name	Type	Description
`payload`	`CreatePagePayload`	Payload to use when creating the page.

Returns

Promise\<any>

Whether the page was created.

createSection

▸ createSection(payload): Promise\<any>

Creates a section within a given FirstSpirit page.

Parameters

Name	Type	Description
`payload`	`CreateSectionPayload`	Payload to use when creating a section.

Returns

Promise\<any>

Whether the section was created.

fetchNavigation

▸ fetchNavigation(params): Promise\<FetchNavigationResponse>

Fetches the navigation service.

Parameters

Name	Type	Description
`params`	`FetchNavigationParams`	Parameters to use when fetching the navigation.

Returns

Promise\<FetchNavigationResponse>

Details about the navigation.

findElement

▸ findElement(params): Promise\<FindPageItem>

Finds a CaaS element.

Parameters

Name	Type	Description
`params`	`FindElementParams`	Parameters to use to find the element.

Returns

Promise\<FindPageItem>

Details about the element.

findPage

▸ findPage(params): Promise\<null | FindPageItem>

Finds a CaaS page.

Parameters

Name	Type	Description
`params`	`FindPageParams`	Parameters to use to find the page.

Returns

Promise\<null | FindPageItem>

Details about the page.

init

▸ init(): Promise\<boolean>

Initialize the API.

Returns

Promise\<boolean>

Whether the initialization was successful.

removeHook

▸ removeHook\<Name, Func>(name, func): void

Remove a registered hook.

Type parameters

Name	Type
`Name`	extends `EcomHooks`
`Func`	extends `null` \| `FindPageItem` \| `PageTarget` \| `SectionCreatingCancelledPayload` \| `PageCreationFailedPayload` \| `ContentChangedHookPayload` \| `OpenStoreFrontUrlHookPayload` \| `CreateSectionHookPayload` \| `RequestPreviewElementHookPayload` \| `PageCreatedHookPayload` \| `PreviewInitializedHookPayload`

Parameters

Name	Type	Description
`name`	`Name`	Name of the hook.
`func`	(`payload`: `Func`) => `void`	The hook's callback.

Returns

void

Example

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

const handleHook = (payload) => {
  // ... Custom logic
}

api.addHook(EcomHooks.OPEN_STOREFRONT_URL, handleHook);

// To remove the registered hook, pass the exact instance
api.removeHook(EcomHooks.OPEN_STOREFRONT_URL, handleHook); <-- Remove hook

setDefaultLocale

▸ setDefaultLocale(locale): void

Setting the default locale.

Parameters

Name	Type	Description
`locale`	`string`	FirstSpirit compatible language code of the locale to set.

Returns

void

setElement

▸ setElement(pageTarget): Promise\<void>

Sets the element currently displayed in the storefront.

Parameters

Name	Type	Description
`pageTarget`	`PageTarget`	Parameter

Returns

Promise\<void>

Deprecated

In favor of setPage, this method is not maintained anymore and will be removed in a future release

setPage

▸ setPage(pageTarget): Promise\<null | FindPageItem>

Sets the element currently displayed in the storefront, finds the page and, if specified, creates a page if missing. After that, the requested page object is returned.

Parameters

Name	Type	Description
`pageTarget`	`null` \| `PageTarget`	A complete representation of the desired page object in FS with all necessary information to create a missing page.

Returns

Promise\<null | FindPageItem>

an existing page, newly created if ensureExistence is demanded or null if non-existent.

Example

const pageResult: FindPageItem | null = await api.setPage({

  // ensuring a page existence is disabled for FS-driven pages.
  isFsDriven: false,

  id: ...,
  fsPageTemplate: ...,
  type: ...,
  displayNames: {
    EN: ...,
    DE: ...,
  locale: ...

  // Enable page creation when the page does not already exist.
  ensureExistence: true

});

extractSlotSections

▸ Static extractSlotSections(page, slotName): PageSection[]

Returns all sections belonging to a specified slotName inside a provided FindPageResponse.

Parameters

Name	Type	Description
`page`	`FindPageItem`	response of calling `findPage()`.
`slotName`	`string`	SlotName to filter the sections on.

Returns

PageSection[]

Filtered sections as flat Array.

Example

const slotName = 'sup_content'

api
  .findPage({
    locale: 'de_DE',
    id: `Content Page`,
    type: 'content',
  })
  .then((pageResult) => {
    const sections = extractSlotSections(pageResult, slotName); // <-- Extract Sections
    console.log('Sections:', sections)
  })

Last update: March 22, 2024