Order Slots

The 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: 3.1.0

Container	Slots
CreateReturn	Footer, ReturnOrderItem, ReturnFormActions, ReturnReasonFormImage, CartSummaryItemImage
CustomerDetails	OrderReturnInformation, PaymentMethodIcon
OrderProductList	Footer, CartSummaryItemImage
OrderStatus	OrderActions
ReturnsList	ReturnItemsDetails, DetailsActionParams, ReturnListImage
ShippingStatus	DeliveryTimeLine, DeliveryTrackActions, ReturnItemsDetails, ShippingStatusCardImage, NotYetShippedProductImage, ShippingStatusReturnCardImage

Slot usage best practice

Do not use context methods inside other context methods (for example, appendChild() inside onChange()). See Slots best practices for details and examples.

CreateReturn slots

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

interface CreateReturnProps {
  slots?: {
    Footer: SlotProps;
    ReturnOrderItem: SlotProps;
    ReturnFormActions: SlotProps<{
    handleChangeStep: (value: StepsTypes) => void;
    }>;
    ReturnReasonFormImage?: SlotProps<{
    data: OrderItemModel;
    defaultImageProps: ImageProps;
    }>;
    CartSummaryItemImage?: SlotProps<{
    data: OrderItemModel;
    defaultImageProps: ImageProps;
    }>;
  };
}

Footer slot

The Footer slot allows you to customize the footer section of the CreateReturn container.

Example

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

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

ReturnOrderItem slot

The ReturnOrderItem slot allows you to customize the return order item section of the CreateReturn container.

Example

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

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

ReturnReasonFormImage slot

The ReturnReasonFormImage slot allows you to customize the return reason form image section of the CreateReturn container.

Example

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

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

CartSummaryItemImage slot

The CartSummaryItemImage slot allows you to customize the cart summary item image section of the CreateReturn container.

Example

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

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

CustomerDetails slots

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

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

OrderReturnInformation slot

The OrderReturnInformation slot allows you to customize the order return information section of the CustomerDetails container.

Example

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

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

OrderProductList slots

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

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

Footer slot

The Footer slot allows you to customize the footer section of the OrderProductList container.

Example

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

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

CartSummaryItemImage slot

The CartSummaryItemImage slot allows you to customize the cart summary item image section of the OrderProductList container.

Example

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

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

OrderStatus slots

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

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

OrderActions slot

The OrderActions slot allows you to customize the order actions section of the OrderStatus container.

Example

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

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

ReturnsList slots

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

interface ReturnsListProps {
  slots?: {
    ReturnItemsDetails?: SlotProps<{
    items: OrdersReturnItemsPropsModel[];
    }>;
    DetailsActionParams?: SlotProps<{
    returnOrderItem: OrdersReturnPropsModel;
    }>;
    ReturnListImage?: SlotProps<{
    data: OrdersReturnItemsPropsModel;
    defaultImageProps: ImageProps;
    }>;
  };
}

ReturnItemsDetails slot

The ReturnItemsDetails slot allows you to customize the return items details section of the ReturnsList container.

Example

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

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

DetailsActionParams slot

The DetailsActionParams slot allows you to customize the details action params section of the ReturnsList container.

Example

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

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

ReturnListImage slot

The ReturnListImage slot allows you to customize the return list image section of the ReturnsList container.

Example

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

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

ShippingStatus slots

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

interface ShippingStatusProps {
  slots?: {
    DeliveryTimeLine?: SlotProps;
    DeliveryTrackActions?: SlotProps;
    ReturnItemsDetails?: SlotProps;
    ShippingStatusCardImage?: SlotProps<{
    data: ShipmentItemsModel;
    defaultImageProps: ImageProps;
    }>;
    NotYetShippedProductImage?: SlotProps<{
    data: OrderItemModel;
    defaultImageProps: ImageProps;
    }>;
    ShippingStatusReturnCardImage?: SlotProps<{
    data: OrdersReturnItemsPropsModel;
    defaultImageProps: ImageProps;
    }>;
  };
}

DeliveryTimeLine slot

The DeliveryTimeLine slot allows you to customize the delivery time line section of the ShippingStatus container.

Example

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

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

DeliveryTrackActions slot

The DeliveryTrackActions slot allows you to customize the delivery track actions section of the ShippingStatus container.

Example

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

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

ReturnItemsDetails slot

The ReturnItemsDetails slot allows you to customize the return items details section of the ShippingStatus container.

Example

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

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

ShippingStatusCardImage slot

The ShippingStatusCardImage slot allows you to customize the shipping status card image section of the ShippingStatus container.

Example

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

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

NotYetShippedProductImage slot

The NotYetShippedProductImage slot allows you to customize the not yet shipped product image section of the ShippingStatus container.

Example

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

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

ShippingStatusReturnCardImage slot

The ShippingStatusReturnCardImage slot allows you to customize the shipping status return card image section of the ShippingStatus container.

Example

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

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