Skip to content

Personalization Data & Events

The Personalization drop-in uses the event bus to emit and listen to events for communication between drop-ins and external integrations.

Version: 3.1.0
EventDirectionDescription
cart/initializedListensFired by Cart (cart) when the component completes initialization.
cart/updatedListensFired by Cart (cart) when the component state is updated.
order/placedListensFired by Order (order) when an order is placed.
personalization/updatedEmits and listensTriggered when the component state is updated.

The following sections provide detailed information about each event, including its direction, event payload, and usage examples.

Fired by Cart (cart) when the component completes initialization.

CartModel | null

See CartModel for full type definition.

import { events } from '@dropins/tools/event-bus.js';
events.on('cart/initialized', (payload) => {
console.log('cart/initialized event received:', payload);
// Add your custom logic here
});

Fired by Cart (cart) when the component state is updated.

CartModel | null

See CartModel for full type definition.

import { events } from '@dropins/tools/event-bus.js';
events.on('cart/updated', (payload) => {
console.log('cart/updated event received:', payload);
// Add your custom logic here
});

Fired by Order (order) when an order is placed.

OrderDataModel

See OrderDataModel for full type definition.

import { events } from '@dropins/tools/event-bus.js';
events.on('order/placed', (payload) => {
console.log('order/placed event received:', payload);
// Add your custom logic here
});

personalization/updated (emits and listens)

Section titled “personalization/updated (emits and listens)”

Triggered when the component state is updated.

PersonalizationData,
'personalization/type-matched': string,
'cart/initialized': CartModel | null

See PersonalizationData, CartModel for full type definitions.

import { events } from '@dropins/tools/event-bus.js';
events.on('personalization/updated', (payload) => {
console.log('personalization/updated event received:', payload);
// Add your custom logic here
});

The following data models are used in event payloads for this drop-in.

Used in: cart/initialized, cart/updated, personalization/updated.

interface CartModel {
id: string;
}

Used in: order/placed.

interface OrderDataModel {
id: string;
}

Used in: personalization/updated.

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