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 | RerenderViewHookPayload | 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.
fetchProjectProperties
▸ fetchProjectProperties(params): Promise\<unknown>
This method fetches the project properties from the configured CaaS. It uses fsxa-api/fetchByFilter to get them.
Parameters
| Name | Type | Description |
|---|---|---|
params |
FetchProjectPropertiesParams |
Parameters to use to fetch the project properties. |
Returns
Promise\<unknown>
the resolved project properties
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 | RerenderViewHookPayload | 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
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)
})