Quick Order Data & Events

The Quick Order drop-in uses the event bus to coordinate containers (QuickOrderCsvUpload, QuickOrderItems, QuickOrderMultipleSku) and to integrate with the Cart drop-in. Events coordinate adding items, loading states, and add-to-cart success or error handling.

Events reference

Event	Direction	Description
quick-order/add-items	Emits and listens	Items added via CSV upload, multiple SKU entry, or Quick Order search within QuickOrderItems. Payload: SubmitSkuValue (array of { sku, quantity }). Triggers product fetch and list update in QuickOrderItems.
quick-order/loading	Emits and listens	Loading state changed. Payload: boolean. Disables inputs and shows loading indicators while processing.
quick-order/add-to-cart	Emits	Request to add items to cart when no custom handleAddToCart is used. Payload: array of cart item values. Default cart handler processes items.
quick-order/add-to-cart-error	Emits	Add-to-cart operation failed. Payload: { message: string }. Shows error notification.
cart/product/added	Listens	Products added to cart successfully. Payload: any[]. Quick Order shows success notification.

Note

The drop-in also emits quick-order/add-to-cart-success (payload: void) internally when the add-to-cart operation completes. For integration, listen to cart/product/added from the Cart drop-in instead.

Event details

quick-order/add-items (emits and listens)

QuickOrderCsvUpload and QuickOrderMultipleSku emit this when the user adds items via CSV or the SKU text area. QuickOrderItems also emits it when the user adds a product via the integrated search (autocomplete). QuickOrderItems listens, fetches product data, and updates the list.

Event payload

type SubmitSkuValue = Array<{ sku: string; quantity: number }>;

When triggered

• After CSV file is validated and parsed (QuickOrderCsvUpload)
• After user clicks “Add to List” in QuickOrderMultipleSku with parsed SKUs
• When user selects a product from the search autocomplete in QuickOrderItems

Example

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

events.on('quick-order/add-items', (payload) => {
  console.log('Items to add:', payload); // SubmitSkuValue
});

quick-order/loading (emits and listens)

Containers emit this when a loading state starts or ends (for example, while fetching products or adding to cart).

Event payload

boolean

Example

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

events.on('quick-order/loading', (isLoading) => {
  console.log('Quick Order loading:', isLoading);
});

quick-order/add-to-cart (emits)

QuickOrderItems emits this when the user clicks “Add All to Cart” and no custom handleAddToCart is provided. A default handler may listen and call the Cart API.

Event payload

any[]  // Cart item values (sku, quantity, options, and so on)

quick-order/add-to-cart-error (emits)

QuickOrderItems emits this when add-to-cart fails (backend error or custom handler returns an error message string).

Event payload

{ message: string }

Example

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

events.on('quick-order/add-to-cart-error', ({ message }) => {
  console.error('Add to cart failed:', message);
});

cart/product/added (listens)

The Cart drop-in emits this when products are added to the cart. Quick Order listens and shows a success notification.

Event payload

any[]

PDP integration events (internal)

QuickOrderItems emits PDP-scoped events to enable reuse of PDP containers (for example, ProductPrice, ProductOptions) within the Quick Order interface:

Event	Payload	Description
{scope}/pdp/data	OrderItem	Scoped event for product data updates per item.
{scope}/pdp/values	option values	Captures selected product options for configurable products.

These events are used internally by the slot system and typically do not require custom handling.

Grid Ordering events

The QuickOrderVariantsGrid container (Grid Ordering on PDP) uses these events:

Event	Direction	Description
quick-order/grid-ordering-variants	Emitted externally (integration layer)	Provides variant data to QuickOrderVariantsGrid. Payload: array of product variants. Typically emitted after variants are fetched on the PDP. Not required if initialVariants prop is used.
quick-order/grid-ordering-selected-variants	Emitted by QuickOrderVariantsGrid	Notifies when selected variants or quantities change. Payload: array of selected variants (quantity > 0) with enriched data (sku, attributes, price, quantity, subtotal). Captured by PDP integration for bulk add-to-cart. Emissions are debounced.
quick-order/grid-ordering-reset-selected-variants	Emitted externally	Resets current grid selection (clears all quantities). Typically used after successful add-to-cart.

Listening to events

All Quick Order events use the centralized event bus:

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

events.on('quick-order/add-items', handleAddItems);
events.on('quick-order/loading', handleLoading);
events.on('quick-order/add-to-cart-error', handleAddToCartError);
events.on('cart/product/added', handleCartProductAdded);

// Clean up when needed
events.off('quick-order/add-items', handleAddItems);

Tip

When using a custom handleAddToCart in QuickOrderItems, you control redirects and error messages; the drop-in still emits quick-order/add-to-cart-error when your handler returns an error message string.