Quick Order Slots

The Quick Order B2B drop-in exposes slots for specific UI sections, primarily on QuickOrderItems. Use slots to replace or extend the product price, product options (configurables), add-to-cart button, and search UI. See Extending drop-in components for slot behavior.

Container	Slots
QuickOrderItems	ProductPrice, ProductOptions, AddAllToCartButton, QuickOrderItemSearch, QuickOrderSearchAutocompleteItem
QuickOrderMultipleSku	AddToListButton (optional)
QuickOrderVariantsGrid	Actions, ImageCell, SKUCell, AvailabilityCell, PriceCell, QuantityCell, SubtotalCell, VariantOptionAttributesCell, custom column keys

QuickOrderItems slots

The QuickOrderItems slots let you replace the default product price, configurable product options, “Add All to Cart” button, and search/autocomplete UI.

interface QuickOrderItemsProps {
  slots?: {
    ProductPrice?: SlotProps<ProductPriceContext>;
    ProductOptions?: SlotProps<ProductOptionsContext>;
    AddAllToCartButton?: SlotProps<AddAllToCartContext>;
    QuickOrderItemSearch?: SlotProps<QuickOrderItemSearchContext>;
    QuickOrderSearchAutocompleteItem?: SlotProps<QuickOrderSearchAutocompleteItemContext>;
  };
}

ProductPrice slot

Context: { item: OrderItem; scope: string }. Use this slot to render price with the PDP drop-in ProductPrice container (or a custom component) for correct tier pricing and currency. The boilerplate passes scope and initialData: ctx.item to the PDP container.

ProductOptions slot

Context: { item: OrderItem; scope: string }. Use this slot to render configurable product options (for example, size, color) with the PDP drop-in ProductOptions container. Required for configurables in the Quick Order list so users can select options before adding to cart.

AddAllToCartButton slot

Context: { handleAddToCart: () => void; clearItems: () => void; loading: boolean; isDisabledButton: boolean }. Replace the default “Add All to Cart” button with custom UI or behavior. Call handleAddToCart() to trigger add-to-cart. Call clearItems() after success to reset the list.

QuickOrderItemSearch slot

Context: { item: OrderItem; scope: string; handleSearchChange: (e: Event) => void; searchResults: OrderItem[]; searchValue: string; shouldShowResults: boolean; handleItemClick: (item: OrderItem) => void }. Customize the search input and results area for adding or replacing an item via search.

QuickOrderSearchAutocompleteItem slot

Context: { item: OrderItem; index: number; activeIndex: number; createItemClickHandler: (item: OrderItem) => () => void }. Customize how each search result option renders in the autocomplete list.

Example: ProductPrice and ProductOptions

The Commerce boilerplate wires PDP containers into Quick Order so each list item shows price and options correctly:

import { render as quickOrderProvider } from '@dropins/storefront-quick-order/render.js';
import QuickOrderItems from '@dropins/storefront-quick-order/containers/QuickOrderItems.js';
import * as pdpApi from '@dropins/storefront-pdp/api.js';
import * as searchApi from '@dropins/storefront-product-discovery/api.js';
import { render as pdpProvider } from '@dropins/storefront-pdp/render.js';
import ProductPrice from '@dropins/storefront-pdp/containers/ProductPrice.js';
import ProductOptions from '@dropins/storefront-pdp/containers/ProductOptions.js';

quickOrderProvider.render(QuickOrderItems, {
  getProductsData: pdpApi.getProductsData,
  productsSearch: searchApi.search,
  handleAddToCart: async (values) => { /* ... */ },
  slots: {
    ProductPrice: (ctx) => {
      const priceContainer = document.createElement('div');
      priceContainer.className = 'product-price-slot';
      pdpProvider.render(ProductPrice, { scope: ctx.scope, initialData: ctx.item })(priceContainer);
      ctx.replaceWith(priceContainer);
    },
    ProductOptions: (ctx) => {
      const optionsContainer = document.createElement('div');
      optionsContainer.className = 'product-options-slot';
      pdpProvider.render(ProductOptions, { scope: ctx.scope })(optionsContainer);
      ctx.replaceWith(optionsContainer);
    },
  },
})(quickOrderItemsContainer);

Tip

For configurable products, providing the ProductOptions slot is required so users can select options before adding to cart; otherwise validation will show “Configuration required” for those items.