Order Slots

The Order drop-in exposes 11 slots in 6 containers 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.4.0

Container	Slots
ReturnOrderProductList	Footer, ReturnOrderItem, CartSummaryItemImage
KeysSortOrder	OrderReturnInformation, PaymentMethodIcon
OrderProductList	Footer, CartSummaryItemImage
OrderProductListContent	Footer, CartSummaryItemImage
OrderStatus	OrderActions
OrderStatusContent	OrderActions

ReturnOrderProductList slots

interface ReturnOrderProductListProps

slots?: {
  Footer: SlotProps;
  ReturnOrderItem: SlotProps;
  CartSummaryItemImage?: SlotProps<{
    data: OrderItemModel;
    defaultImageProps: ImageProps;
  }>;
};

---

KeysSortOrder slots

interface KeysSortOrderProps

slots?: {
  OrderReturnInformation: SlotProps<OrdersReturnPropsModel | undefined>;
  PaymentMethodIcon: SlotProps<Record<string, string>>;
};

---

OrderProductList slots

interface OrderProductListProps

slots?: {
  Footer: SlotProps;
  CartSummaryItemImage?: SlotProps<{
    data: OrderItemModel;
    defaultImageProps: ImageProps;
  }>;
};

Footer example

This example from the Commerce Order Product List block shows how to customize the Footer slot:

import { render as provider } from '@dropins/storefront-order/render.js';
import OrderProductList from '@dropins/storefront-order/containers/OrderProductList.js';
import { tryRenderAemAssetsImage } from '@dropins/tools/lib/aem/assets.js';
import { render as CartProvider } from '@dropins/storefront-cart/render.js';
import GiftOptions from '@dropins/storefront-cart/containers/GiftOptions.js';

provider.render(OrderProductList, {
  slots: {
    Footer: (ctx) => {
      const giftOptions = document.createElement('div');
      CartProvider.render(GiftOptions, {
        item: ctx.item,
        view: 'product',
        dataSource: 'order',
        isEditable: false,
        slots: {
          SwatchImage: (swatchCtx) => {
            const { defaultImageProps, imageSwatchContext } = swatchCtx;
            tryRenderAemAssetsImage(swatchCtx, {
              alias: imageSwatchContext.label,
              imageProps: defaultImageProps,
              wrapper: document.createElement('span'),
              params: {
                width: defaultImageProps.width,
                height: defaultImageProps.height,
              },
            });
          },
        },
      })(giftOptions);
      ctx.appendChild(giftOptions);
    }
  }
})(document.querySelector('.order-product-list'));

CartSummaryItemImage example

This example from the Commerce Order Product List block shows how to customize the CartSummaryItemImage slot:

import { render as provider } from '@dropins/storefront-order/render.js';
import OrderProductList from '@dropins/storefront-order/containers/OrderProductList.js';
import { tryRenderAemAssetsImage } from '@dropins/tools/lib/aem/assets.js';
import { getProductLink } from '../../scripts/commerce.js';
const createProductLink = (item) => getProductLink(item.urlKey, item.sku);

provider.render(OrderProductList, {
  slots: {
    CartSummaryItemImage: (ctx) => {
      const { data, defaultImageProps } = ctx;
      const anchor = document.createElement('a');
      anchor.href = createProductLink(data);
      tryRenderAemAssetsImage(ctx, {
        alias: data.product.sku,
        imageProps: defaultImageProps,
        wrapper: anchor,
        params: {
          width: defaultImageProps.width,
          height: defaultImageProps.height,
        },
      });
    }
  }
})(document.querySelector('.order-product-list'));

---

OrderProductListContent slots

interface OrderProductListContentProps

slots?: {
  Footer: SlotProps;
  CartSummaryItemImage?: SlotProps<{
    data: OrderItemModel;
    defaultImageProps: ImageProps;
  }>;
};

---

OrderStatus slots

interface OrderStatusProps

slots?: {
  OrderActions: SlotProps<DefaultSlotContext>;
};

---

OrderStatusContent slots

interface OrderStatusContentProps

slots?: {
  OrderActions: SlotProps<DefaultSlotContext>;
};

---