Personalization functions

The personalization drop-in component provides the following API endpoints.

fetchPersonalizationData

The fetchPersonalizationData can be used to request the customer group, applied segments, and cart rules from Adobe Commerce based on the cart ID.

export const fetchPersonalizationData = async (
    cartId: string
): Promise<PersonalizationData | null>

Parameters

Parameter	Type	Req?	Description
cartId	string	Yes	The ID of the shopping cart.

Returns

Returns a promise that resolves to the PersonalizationData object containing the IDs of groups, segments, and cart price rules.

export interface PersonalizationData {
    segments: string[],
    groups: string[],
    cartRules: string[]
}

Usage

The following example demonstrates how to request the personalization data:

const {
  groups,
  segments,
  cartRules
} = await fetchPersonalizationData(cartId);

savePersonalizationData

The savePersonalizationData function saves the personalization data to a cookie and emits the personalization/updated event.

export const savePersonalizationData = async (
    data: PersonalizationData
): Promise<void>

Parameters

Parameter	Type	Req?	Description
data	PersonalizationData	Yes	Personalization data containing groups, segment, and cart price rules.

Returns

Returns a promise that resolves to a void.

Usage

The following example demonstrates how to save the personalization data:

savePersonalizationData({
    segments: ['MQ==', 'Mg=='],
    groups: ['Mw=='],
    cartRules: ['NA==', 'NQ==']
});

getPersonalizationData

The getPersonalizationData function retrieves the saved personalization data from a cookie.

export const getPersonalizationData = (): PersonalizationData

Returns

Returns a PersonalizationData object.

export interface PersonalizationData {
    segments: string[],
    groups: string[],
    cartRules: string[]
}

Usage

The following example demonstrates how to retrieve the personalization data:

const {
  groups,
  segments,
  cartRules
} = getPersonalizationData();

getStoreConfig

The getStoreConfig function returns information about the store configuration related to personalization.

export const getStoreConfig = async (): Promise<StoreConfigModel | null>

Returns

Returns a promise that resolves to a StoreConfigModel object or null.

export interface StoreConfigModel {
  shareActiveSegments: boolean;
  shareCustomerGroup: boolean;
  shareAppliedCartRule: boolean;
  customerAccessTokenLifetime: number;
}

Usage

The following example demonstrates how to retrieve the store configuration:

const {
  shareActiveSegments,
  shareCustomerGroup,
  shareAppliedCartRule,
  customerAccessTokenLifetime
} = await getStoreConfig();