Skip to content

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