Cart data & events

The Cart 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.

Auto-generated on 2025-10-21. Do not edit this page directly.

Emits Reference

Events produced by this drop-in that you can subscribe to.

Event	Direction	Description
cart/initialized	Emits	Emitted when the component completes initialization
cart/product/added	Emits	Emitted when an item is added
cart/product/removed	Emits	Emitted when an item is removed
cart/product/updated	Emits	Emitted when the component state is updated

Listens Reference

Events this drop-in listens for from external sources.

Event	Direction	Description
checkout/initialized	Listens	Fired by Checkout (checkout) when the component completes initialization
checkout/updated	Listens	Fired by Checkout (checkout) when the component state is updated
companyContext/changed	Listens	Fired by Company Context (companyContext) when a change occurs

Emits and Listens Reference

Bidirectional events that both emit state changes and listen for external updates.

Event	Direction	Description
cart/data	Emits and Listens	Triggered when data is available or changes
cart/merged	Emits and Listens	Triggered when data is merged
cart/reset	Emits and Listens	Triggered when the component state is reset
cart/updated	Emits and Listens	Triggered when the component state is updated
shipping/estimate	Emits and Listens	Triggered when an estimate is calculated

Event Details

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

cart/initialized (emits)

Emitted when the component completes initialization

Data payload

CartModel | null

Tip

CartModel is a complex type with multiple properties. Key properties typically include id, domain-specific data fields, and metadata.

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/product/added (emits)

Emitted when an item is added

Data payload

Item[] | null

Tip

Item is a complex type with multiple properties. Key properties typically include id, domain-specific data fields, and metadata.

Usage

Listen to this event in your storefront:

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

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

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

cart/product/removed (emits)

Emitted when an item is removed

Data payload

Caution

No TypeScript definition available. Refer to the event implementation for payload structure details.

Usage

Listen to this event in your storefront:

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

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

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

cart/product/updated (emits)

Emitted when the component state is updated

Data payload

Item[] | null

Tip

Item is a complex type with multiple properties. Key properties typically include id, domain-specific data fields, and metadata.

Usage

Listen to this event in your storefront:

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

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

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

checkout/initialized (listens)

Fired by Checkout (checkout) when the component completes initialization

Data payload

Caution

No TypeScript definition available. Refer to the event implementation for payload structure details.

Usage

Listen to this event in your storefront:

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

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

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

checkout/updated (listens)

Fired by Checkout (checkout) when the component state is updated

Data payload

any

Usage

Listen to this event in your storefront:

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

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

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

companyContext/changed (listens)

Fired by Company Context (companyContext) when a change occurs

Data payload

Caution

No TypeScript definition available. Refer to the event implementation for payload structure details.

Usage

Listen to this event in your storefront:

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

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

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

cart/data (emits and listens)

Triggered when data is available or changes

Data payload

Caution

No TypeScript definition available. Refer to the event implementation for payload structure details.

Usage

Listen to this event in your storefront:

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

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

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

cart/merged (emits and listens)

Triggered when data is merged

Data payload

{
oldCartItems: Item[] | null;
newCart: CartModel | null;
}

Property	Type	Description
oldCartItems	Item[] | null	See type definition in source code
newCart	CartModel | null	See type definition in source code

Usage

Listen to this event in your storefront:

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

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

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

cart/reset (emits and listens)

Triggered when the component state is reset

Data payload

void

Usage

Listen to this event in your storefront:

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

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

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

cart/updated (emits and listens)

Triggered when the component state is updated

Data payload

CartModel | null

Tip

CartModel is a complex type with multiple properties. Key properties typically include id, domain-specific data fields, and metadata.

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();

shipping/estimate (emits and listens)

Triggered when an estimate is calculated

Data payload

{
address: PartialAddress;
shippingMethod: ShippingMethod | null;
}

Property	Type	Description
address	PartialAddress	See type definition in source code
shippingMethod	ShippingMethod | null	See type definition in source code

Usage

Listen to this event in your storefront:

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

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

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