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.

Example

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

type OpenStoreFrontUrlPayload = {
  id: string; // ID of the element to open.
  name: string; // Display name of the element to open · Only passed when triggered via report.
  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

Type parameters

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

Parameters

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

Returns

void

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<FindPageItem>

Finds a CaaS page.

Parameters

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

Returns

Promise<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.

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

Type parameters

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

Parameters

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

Returns

void

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>

extractSlotSections

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

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

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)
  })

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.

Last update: September 8, 2023