RequisitionListSelector Container

Provides a selector interface for choosing a requisition list when adding products from the catalog.

Version: 1.0.0-beta4

Configuration

The RequisitionListSelector container provides the following configuration options:

Parameter	Type	Req?	Description
canCreate	boolean	No	Controls whether users can create new requisition lists from the selector dropdown. Set to false to restrict users to only adding products to existing lists, useful when list creation should happen through a separate flow or requires additional permissions.
sku	string	Yes	Specifies the product SKU to add to the selected requisition list. Required to identify the exact product variant being added. Must match a valid product SKU in your catalog.
selectedOptions	string[]	No	Provides an array of selected product option IDs for configurable products. Captures variant selections such as size, color, or other configurable attributes. Required for configurable products to identify the specific variant being added.
quantity	number	No	Sets the quantity of the product to add to the requisition list. Defaults to 1 if not specified. Use to allow bulk additions or pre-populate quantities from previous orders or saved preferences.
beforeAddProdToReqList	function	No	Callback function to handle validation before the Add to Requisition List dropdown opens when the button is clicked. Use to validate if the product can be added directly (e.g., check if a configurable product needs options selected) and redirect to the product detail page if needed. If the callback throws an error or rejects, the dropdown will not open, enabling patterns like redirecting complex products to their detail pages.

Slots

This container does not expose any customizable slots.

Usage

The following example demonstrates how to use the RequisitionListSelector container:

import { render as provider } from '@dropins/storefront-requisition-list/render.js';
import { RequisitionListSelector } from '@dropins/storefront-requisition-list/containers/RequisitionListSelector.js';

await provider.render(RequisitionListSelector, {
  sku: "PRODUCT-SKU-123",
  canCreate: true,
  selectedOptions: [],
})(block);