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.

QuickOrderMultipleSku slots

The QuickOrderMultipleSku container exposes one slot for customizing the “Add to List” button.

interface QuickOrderMultipleSkuProps {
  slots?: {
    AddToListButton?: SlotProps<{
      handleAddToList: (values?: SubmitSkuValue) => void;
      loading: boolean;
      textAreaValue: string;
    }>;
  };
}

AddToListButton slot

Context: { handleAddToList: (values?: SubmitSkuValue) => void; loading: boolean; textAreaValue: string }. Use this to replace the default “Add to List” button with custom UI. Call handleAddToList() to trigger the add-items flow.

Example

import QuickOrderMultipleSku from '@dropins/storefront-quick-order/containers/QuickOrderMultipleSku.js';
import { render as quickOrderProvider } from '@dropins/storefront-quick-order/render.js';

quickOrderProvider.render(QuickOrderMultipleSku, {
  slots: {
    AddToListButton: (ctx) => {
      const { handleAddToList, loading, textAreaValue } = ctx;
      const button = document.createElement('button');
      button.textContent = loading ? 'Adding...' : 'Custom Add to List';
      button.disabled = loading;
      button.addEventListener('click', () => handleAddToList());
      ctx.replaceWith(button);
    },
  },
})(quickOrderMultipleSkuContainer);

QuickOrderVariantsGrid slots

The QuickOrderVariantsGrid container exposes slots for customizing each cell type in the variants grid, as well as the action bar.

interface QuickOrderVariantsGridProps {
  slots?: {
    Actions?: SlotProps<{ onClear: () => void; onSaveToCsv: () => void; onCollectData: () => VariantTableData[]; isDisabled: boolean; variantsCount: number }>;
    ImageCell?: SlotProps<{ variant: ProductVariant; quantity: number; onQuantityChange: (sku: string, qty: number) => void }>;
    SKUCell?: SlotProps<{ variant: ProductVariant; quantity: number; onQuantityChange: (sku: string, qty: number) => void }>;
    AvailabilityCell?: SlotProps<{ variant: ProductVariant; quantity: number; onQuantityChange: (sku: string, qty: number) => void }>;
    PriceCell?: SlotProps<{ variant: ProductVariant; quantity: number; onQuantityChange: (sku: string, qty: number) => void }>;
    QuantityCell?: SlotProps<{ variant: ProductVariant; quantity: number; onQuantityChange: (sku: string, qty: number) => void }>;
    SubtotalCell?: SlotProps<{ variant: ProductVariant; quantity: number; onQuantityChange: (sku: string, qty: number) => void }>;
    [customColumnKey: string]: SlotProps<{ variant: ProductVariant; quantity: number; onQuantityChange: (sku: string, qty: number) => void }> | undefined;
  };
}

Actions slot

Context: { onClear, onSaveToCsv, onCollectData, isDisabled, variantsCount }. Replace the entire action bar (Clear, Save to CSV, and Collect Data buttons) with custom UI.

ImageCell slot

Context: { variant, quantity, onQuantityChange }. Customize image cell rendering for each variant row.

SKUCell slot

Context: { variant, quantity, onQuantityChange }. Customize the SKU cell rendering.

AvailabilityCell slot

Context: { variant, quantity, onQuantityChange }. Customize availability/stock status display.

PriceCell slot

Context: { variant, quantity, onQuantityChange }. Customize price display for each variant.

QuantityCell slot

Context: { variant, quantity, onQuantityChange }. Replace the quantity input with custom controls. Call onQuantityChange(sku, qty) to update state.

SubtotalCell slot

Context: { variant, quantity, onQuantityChange }. Customize subtotal calculation and display.

Custom column slots

For any column defined in the columns prop with a custom key, provide a slot named {key}Cell. Context is the same as other cell slots.

Example: Custom VariantOptionAttributesCell

import QuickOrderVariantsGrid from '@dropins/storefront-quick-order/containers/QuickOrderVariantsGrid.js';
import { render as quickOrderProvider } from '@dropins/storefront-quick-order/render.js';

quickOrderProvider.render(QuickOrderVariantsGrid, {
  columns: [{ key: 'variantOptionAttributes', label: 'Variant' }],
  slots: {
    VariantOptionAttributesCell: (ctx) => {
      const { variant } = ctx;
      const { variantOptionAttributes } = variant.product;
      const cellWrapper = document.createElement('div');
      variantOptionAttributes.forEach((attr) => {
        const item = document.createElement('div');
        item.textContent = `${attr.label}: ${attr.value}`;
        cellWrapper.appendChild(item);
      });
      ctx.appendChild(cellWrapper);
    },
  },
})(gridOrderingContainer);