Quick Order Containers
The Quick Order B2B drop-in provides four container components: three for the Quick Order page (bulk ordering by SKU, search, or CSV) and one for Grid Ordering on the product detail page (PDP).
What are containers?
Section titled “What are containers?”Containers are pre-built UI components that combine functionality, state management, and presentation. They communicate exclusively via the event bus (for example, quick-order/add-items, quick-order/loading). SKUs added in QuickOrderCsvUpload, QuickOrderMultipleSku, or via the search within QuickOrderItems appear in the QuickOrderItems list.
Because communication is event-driven, each container remains independent. Any container can be replaced with a custom implementation that follows the defined event contracts and payload structure. All Quick Order containers support extensibility through Slots.
Available containers
Section titled “Available containers”| Container | Description |
|---|---|
| QuickOrderCsvUpload | CSV file upload with required “SKU” and “QTY” columns (max 200 rows). Validates file, parses data, and emits quick-order/add-items. Provides sample CSV download. |
| QuickOrderItems | Product list with search, quantity editing, product options for configurables, validation, and “Add All to Cart”. Listens to quick-order/add-items and coordinates with the other two containers. |
| QuickOrderMultipleSku | Text area for entering multiple SKUs (comma, space, or newline separated). Parses and deduplicates SKUs, then emits quick-order/add-items to add them to the list. |
| QuickOrderVariantsGrid | Grid interface on the product detail page for configurable products. Displays variants with quantity inputs and bulk add-to-cart. Used when Grid Ordering is enabled. |
Quick Order
Section titled “Quick Order”The Quick Order page combines QuickOrderCsvUpload, QuickOrderItems, and QuickOrderMultipleSku for bulk ordering by SKU, search, or CSV upload. Render all three containers together so they communicate via the event bus.
Grid Ordering (PDP)
Section titled “Grid Ordering (PDP)”The Grid Ordering feature introduces a new B2B purchasing experience designed specifically for configurable products. Buyers view all product variants within a single grid interface and specify quantities for multiple variants at once before adding them to the cart. This feature is exclusive to Adobe Storefront and provides an efficient workflow for purchasing multiple variant combinations without navigating through individual product pages.
The QuickOrderVariantsGrid container runs on the Product Details Page (PDP) when Grid Ordering is enabled for configurable products, and the Product Details block integrates it. See the QuickOrderVariantsGrid container for configuration and the Product Details drop-in for block setup.