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. For common events shared across multiple drop-ins (such as locale, error, authenticated, etc.), see the Common events reference.

Version: 1.0.1

Tip

New to drop-in events? Learn about the event system architecture, including the publish-subscribe pattern, subscription configuration, and best practices for event handling.

Events reference

Event	Direction	Description
cart/initialized	Listens	Fired by Cart (cart) when the component completes initialization
cart/updated	Listens	Fired by Cart (cart) when the component state is updated
order/placed	Listens	Fired by Order (order) when an order is placed
personalization/updated	Emits and listens	Triggered when the component state is updated

Event details

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

cart/initialized (listens)

Fired by Cart (cart) when the component completes initialization

Data payload

CartModel | null

Usage

Listen to this event in your storefront:

import { events } from '@dropins/tools/event-bus.js';

const cartInitializedListener = events.on('cart/initialized', (data) => {
  console.log('cart/initialized event received:', data);
  // Add your custom logic here
});

// Later, when you want to stop listening
cartInitializedListener.off();

cart/updated (listens)

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

Data payload

CartModel | null

Usage

Listen to this event in your storefront:

import { events } from '@dropins/tools/event-bus.js';

const cartUpdatedListener = events.on('cart/updated', (data) => {
  console.log('cart/updated event received:', data);
  // Add your custom logic here
});

// Later, when you want to stop listening
cartUpdatedListener.off();

order/placed (listens)

Fired by Order (order) when an order is placed

Data payload

OrderDataModel

Usage

Listen to this event in your storefront:

import { events } from '@dropins/tools/event-bus.js';

const orderPlacedListener = events.on('order/placed', (data) => {
  console.log('order/placed event received:', data);
  // Add your custom logic here
});

// Later, when you want to stop listening
orderPlacedListener.off();

personalization/updated (emits and listens)

Triggered when the component state is updated

Data payload

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

Usage

Listen to this event in your storefront:

import { events } from '@dropins/tools/event-bus.js';

const personalizationUpdatedListener = events.on('personalization/updated', (data) => {
  console.log('personalization/updated event received:', data);
  // Add your custom logic here
});

// Later, when you want to stop listening
personalizationUpdatedListener.off();