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.
b2b-quick-order/error	Emits	Emitted when a network error occurs during any Quick Order API call.
quick-order/grid-ordering-variants	Emits and listens	Provides variant data to QuickOrderVariantsGrid. Emitted externally or when initialVariants is set.
quick-order/grid-ordering-selected-variants	Emits	Notifies when selected variants or quantities change in the QuickOrderVariantsGrid. Debounced.
quick-order/grid-ordering-reset-selected-variants	Listens	Resets the current grid selection (clears all quantities).
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[]

b2b-quick-order/error (emits)

Emitted when a network error occurs during any Quick Order API call. Does not fire for intentional user cancellations (AbortError).

Event payload

{
  source: 'auth';
  type: 'network';
  error: Error;
}

Example

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

events.on('b2b-quick-order/error', ({ source, type, error }) => {
  console.error('Quick Order network error:', error.message);
});

quick-order/grid-ordering-variants (emits and listens)

Provides variant data to QuickOrderVariantsGrid. Emitted externally by the integration layer (for example, the Product Details block) after fetching product variants. Also emitted by QuickOrderVariantsGrid itself when initialVariants is provided as a prop. Not required if initialVariants is passed directly.

Event payload

ProductVariant[]  // Array of product variants

Example

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

// Emit after fetching variants from the PDP
events.emit('quick-order/grid-ordering-variants', productVariants);

quick-order/grid-ordering-selected-variants (emits)

Emitted by QuickOrderVariantsGrid when the user changes quantities for any variant. Payload contains only variants with quantity > 0. Emissions are debounced. Captured by the PDP integration layer to execute bulk add-to-cart.

Event payload

Array<{
  sku: string;
  name: string;
  inStock: boolean;
  attributes: Record<string, { label: string; value: string }>;
  price: number;
  quantity: number;
  subtotal: number;
  image: string;
}>

Example

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

events.on('quick-order/grid-ordering-selected-variants', (selectedVariants) => {
  console.log('Selected variants:', selectedVariants);
  // selectedVariants contains only variants with quantity > 0
});

quick-order/grid-ordering-reset-selected-variants (listens)

Listens for this event to reset all quantities in the QuickOrderVariantsGrid to zero. Typically emitted by the integration layer after a successful add-to-cart operation.

Event payload

void

Example

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

// Reset the grid after successful add-to-cart
events.emit('quick-order/grid-ordering-reset-selected-variants');

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.