User Account Slots

The User Account drop-in exposes 10 slots in 9 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.2.0

Container	Slots
AddressForm	AddressFormActions, AddressFormInputs
Addresses	None
AddressesWrapper	None
CustomerInformation	CustomerData
ChangePassword	CustomerData
Fields	AddressFormInputs
useForm	None
OrdersList	OrdersListAction, OrdersListCard, OrderItemImage
OrdersListWrapper	OrdersListCard, OrderItemImage

AddressForm slots

interface AddressFormProps

slots?: {
  AddressFormActions?: SlotProps<AddressFormActionsContext>;
  AddressFormInputs?: SlotProps<AddressFormInputsContext>;
};

---

Addresses slots

interface AddressesProps

slots?: {
  [key: string]: SlotProps;
};

---

AddressesWrapper slots

interface AddressesWrapperProps

slots?: {
  [key: string]: SlotProps;
};

---

CustomerInformation slots

interface CustomerInformationProps

slots?: {
  CustomerData?: SlotProps<CustomerDataContext>;
};

---

ChangePassword slots

interface ChangePasswordProps

slots?: {
  CustomerData?: SlotProps<CustomerDataContext>;
};

---

Fields slots

interface FieldsProps

slots?: {
  AddressFormInputs?: SlotProps<AddressFormInputsContext>;
};

---

useForm slots

interface useFormProps

slots?: {
  [key: string]: SlotProps;
};

---

OrdersList slots

interface OrdersListProps

slots?: {
  OrdersListAction?: SlotProps<OrdersListActionContext>;
  OrdersListCard?: SlotProps<OrdersListCardContext>;
  OrderItemImage?: SlotProps<{
    data: OrderItem;
    defaultImageProps: ImageProps;
  }>;
};

OrderItemImage example

This example from the Commerce Orders List block shows how to customize the OrderItemImage slot:

import { render as provider } from '@dropins/storefront-account/render.js';
import OrdersList from '@dropins/storefront-account/containers/OrdersList.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(OrdersList, {
  slots: {
    OrderItemImage: (ctx) => {
      const { data, defaultImageProps } = ctx;
      const anchor = document.createElement('a');
      anchor.href = createProductLink(ctx.data);
      tryRenderAemAssetsImage(ctx, {
        alias: data.product.sku,
        imageProps: defaultImageProps,
        wrapper: anchor,
        params: {
          width: defaultImageProps.width,
          height: defaultImageProps.height,
        },
      });
    }
  }
})(document.querySelector('.orders-list'));

---

OrdersListWrapper slots

interface OrdersListWrapperProps

slots?: {
  OrdersListCard?: SlotProps<OrdersListCardContext>;
  OrderItemImage?: SlotProps<{
    data: OrderItem;
    defaultImageProps: ImageProps;
  }>;
};

---