README.md

@contentful/ecommerce-app-base

@contentful/ecommerce-app-base

Table of contents

Type Aliases

• AdditionalDataRenderer
• AdditionalDataRendererProps
• Config
• DeleteFn
• DisabledPredicateFn
• Integration
• MakeCTAFn
• MakeSaveBtnTextFn
• OpenDialogFn
• Pagination
• ParameterDefinition
• Product
• ProductCardVersion
• ProductPreviewsFn
• ProductsFn
• RenderDialogFn
• SKUType
• ValidateParametersFn

Functions

• LinkDataItemRenderer
• MetaDataRenderer
• RawDataRenderer
• renderSkuPicker
• setup

Type Aliases

AdditionalDataRenderer

Ƭ AdditionalDataRenderer<P>: (props: AdditionalDataRendererProps<P>) => ReactNode

Type parameters

Name	Type
P	extends Product = Product

Type declaration

▸ (props): ReactNode

Parameters

Name	Type
props	AdditionalDataRendererProps<P>

Returns

ReactNode

---

AdditionalDataRendererProps

Ƭ AdditionalDataRendererProps<P>: Object

Type parameters

Name	Type
P	extends Product = Product

Type declaration

Name	Type
product	P

---

Config

Ƭ Config: Record<string, unknown>

Object containing all information configured on the app configuration page.

---

DeleteFn

Ƭ DeleteFn: (index: number) => void

Type declaration

▸ (index): void

Parameters

Name	Type
index	number

Returns

void

---

DisabledPredicateFn

Ƭ DisabledPredicateFn: (currentValue: string[], config: Config) => boolean

Type declaration

▸ (currentValue, config): boolean

Function that should return true when the button should be disabled.

Parameters

Name	Type	Description
currentValue	string[]	Currently selected skus
config	Config	App configuration

Returns

boolean

true, if the button in the field location should be disabled. false, if the button should be enabled

---

Integration

Ƭ Integration<P>: Object

Type parameters

Name	Type
P	extends Product = Product

Type declaration

Name	Type	Description
additionalDataRenderer?	AdditionalDataRenderer<P>	render additional data with for Product Card version "v2"
color	string	The app's primary color
description	string	Short description of the app
fetchProductPreviews	ProductPreviewsFn<P>	Function that returns a list for a given list of skus. The returned value is used to render a product preview. Param List of skus Param App configuration
isDisabled	DisabledPredicateFn	Function that should return true when the button should be disabled. Param Currently selected assets Param App configuration
isInOrchestrationEAP?	boolean	-
logo	string	Path to the app's logo
makeCTA	MakeCTAFn	Returns the text that is displayed on the button in the field location. Param Type of the field the app is used for.
name	string	Name of the app
openDialog	OpenDialogFn	Function that gets called when app wants to open a dialog. Should return an updated list of skus as a Promise. You probably want to call sdk.openCurrentApp. Example javascript async function openDialog(sdk, currentValue, config) { return await sdk.dialogs.openCurrentApp({ parameters: { config, currentValue }, }); } Param FieldExtensionSDK Param Array of currently selected skus Param App configuration
parameterDefinitions	ParameterDefinition[]	Parameter definition which can be customized on the app configuration page and used in the callback functions.
productCardVersion?	ProductCardVersion	Opt-in to the new Product Card component
renderDialog	RenderDialogFn	Function that gets called within the Iframe when the app is rendered in a dialog location. Example javascript function renderDialog(sdk) { const config = sdk.parameters.invocation; const container = document.createElement('div'); container.innerHTML = `<iframe src="https://example.com/dam?folder=${config.folder}" width="400" height="650" style="border:none;"/>`; document.body.appendChild(container); } Param DialogExtensionSDK
skuTypes?	SKUType[]	If your app supports multiple sku types (for example - product, product variant, category...) you can provide a list here. This configuration will be stored under the skuTypes key in your installation parameters.
validateParameters	ValidateParametersFn	Custom code that validates installation parameters that is run before saving. Param Object containing the entered parameters.

---

MakeCTAFn

Ƭ MakeCTAFn: (fieldType: string, skuType?: string) => string

Type declaration

▸ (fieldType, skuType?): string

Returns the text that is displayed on the button in the field location.

Parameters

Name	Type	Description
fieldType	string	Type of the field the app is used for.
skuType?	string	SKU type of the current field. Undefined if only a single SKU type is supported by the app.

Returns

string

Text that should be displayed on the button

---

MakeSaveBtnTextFn

Ƭ MakeSaveBtnTextFn: (selectedSKUs: string[], skuType?: string) => string

Type declaration

▸ (selectedSKUs, skuType?): string

Returns the text that is used for confirming the dialog selection.

Parameters

Name	Type	Description
selectedSKUs	string[]	An array of SKUs chosen.
skuType?	string	-

Returns

string

Text that should be displayed on the button

---

OpenDialogFn

Ƭ OpenDialogFn: (sdk: FieldAppSDK, currentValue: string[] | string, config: Config) => Promise<string[]>

Type declaration

▸ (sdk, currentValue, config): Promise<string[]>

Function that gets called when app wants to open a dialog. Should return an updated list of skus as a Promise.

You probably want to call sdk.openCurrentApp.

Parameters

Name	Type	Description
sdk	FieldAppSDK	FieldExtensionSDK
currentValue	string[] | string	List of currently selected akus
config	Config	App configuration

Returns

Promise<string[]>

Promise containing a list of selected skus

Example

async function openDialog(sdk, currentValue, config) {
  return await sdk.dialogs.openCurrentApp({
    parameters: { config, currentValue },
  });
}

---

Pagination

Ƭ Pagination: Object

Type declaration

Name	Type
count	number
hasNextPage?	boolean
limit	number
offset	number
total	number

---

ParameterDefinition

Ƭ ParameterDefinition: Object

Definition of app configuration parameters

Type declaration

Name	Type	Description
default?	unknown	Default value
description	string	Short description/explanation
id	string	Unique id. Used as key in Config object.
name	string	Name / Label
required	boolean	Whether it is possible without providing a value.
type	"Symbol" | "List" | "Number"	Parameter type - Symbol: Text - List: List of texts - Number: Integer

---

Product

Ƭ Product: Object

Type declaration

Name	Type
category?	string
description?	string
displaySKU?	string
externalLink?	string
id	string
image	string
name	string
sku	string

---

ProductCardVersion

Ƭ ProductCardVersion: "v1" | "v2"

---

ProductPreviewsFn

Ƭ ProductPreviewsFn<P>: (skus: string[], config: Config, skuType?: string) => Promise<P[]>

Type parameters

Name	Type
P	extends Product = Product

Type declaration

▸ (skus, config, skuType?): Promise<P[]>

Function that returns a list for a given list of skus. The returned value is used to render a product preview.

Parameters

Name	Type	Description
skus	string[]	List of skus
config	Config	App configuration
skuType?	string	SKU type of the current field. Undefined if only a single SKU type is supported by the app.

Returns

Promise<P[]>

List of Products which is used to render a preview.

---

ProductsFn

Ƭ ProductsFn<P>: (search: string, pagination?: Partial<Pagination>) => Promise<ProductsFnResponse<P>>

Type parameters

Name	Type
P	extends Product = Product

Type declaration

▸ (search, pagination?): Promise<ProductsFnResponse<P>>

Parameters

Name	Type
search	string
pagination?	Partial<Pagination>

Returns

Promise<ProductsFnResponse<P>>

---

RenderDialogFn

Ƭ RenderDialogFn: (sdk: DialogAppSDK) => void

Type declaration

▸ (sdk): void

Function that gets called within the Iframe when the app is rendered in a dialog location.

Parameters

Name	Type	Description
sdk	DialogAppSDK	DialogExtensionSDK

Returns

void

Example

function renderDialog(sdk) {
  const config = sdk.parameters.invocation;

  const container = document.createElement('div');
  container.innerHTML = `<iframe src="https://example.com/dam?folder=${config.folder}" width="400" height="650" style="border:none;"/>`;
  document.body.appendChild(container);
}

---

SKUType

Ƭ SKUType: Object

Type declaration

Name	Type
default?	boolean
id	string
name	string

---

ValidateParametersFn

Ƭ ValidateParametersFn: (parameters: Record<string, string>) => string | null

Type declaration

▸ (parameters): string | null

Custom code that validates installation parameters that is run before saving.

Parameters

Name	Type	Description
parameters	Record<string, string>	Object containg the entered parameters.

Returns

string | null

string containing an error message. null if the parameters are valid.

Functions

LinkDataItemRenderer

▸ LinkDataItemRenderer(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
props	PropsWithChildren<Props>
context?	any

Returns

null | ReactElement<any, any>

---

MetaDataRenderer

▸ MetaDataRenderer(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
props	PropsWithChildren<MetaDataProps>
context?	any

Returns

null | ReactElement<any, any>

---

RawDataRenderer

▸ RawDataRenderer(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
props	PropsWithChildren<Props>
context?	any

Returns

null | ReactElement<any, any>

---

renderSkuPicker

▸ renderSkuPicker(elementId, «destructured»): void

Parameters

Name	Type
elementId	string
«destructured»	Props

Returns

void

---

setup

▸ setup<P>(integration): void

Type parameters

Name	Type
P	extends Product = Product

Parameters

Name	Type
integration	Integration<P>

Returns

void