Purchase Order Slots

The Purchase Order drop-in exposes slots for customizing specific UI sections. Use slots to replace or extend container components. For default properties available to all slots, see Extending drop-in components.

Version: 1.0.0-beta2

Container	Slots
PurchaseOrderStatus	PurchaseOrderActions

PurchaseOrderStatus slots

The slots for the PurchaseOrderStatus container allow you to customize its appearance and behavior.

interface PurchaseOrderStatusProps {
  slots?: {
    PurchaseOrderActions: SlotProps<PurchaseOrderStatusSlotContext>;
  };
}

PurchaseOrderActions slot

The PurchaseOrderActions slot allows you to customize the purchase order actions section of the PurchaseOrderStatus container.

Example

import { render as provider } from '@dropins/storefront-purchase-order/render.js';
import { PurchaseOrderStatus } from '@dropins/storefront-purchase-order/containers/PurchaseOrderStatus.js';

await provider.render(PurchaseOrderStatus, {
  slots: {
    PurchaseOrderActions: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom PurchaseOrderActions';
      ctx.appendChild(element);
    }
  }
})(block);