OrderComments container

The OrderComments container displays order-level comments on the Order Details page. It renders a read-only list of comments associated with the order, each showing a timestamp and message.

• Comment list: Displays all comments from the CustomerOrder.comments GraphQL field in a chronological list, with each entry showing a formatted date and time alongside the comment message.
• Empty state: When there are no comments for the order, the container displays an empty state message (“No order comments.”).
• Loading state: While order data is being fetched, the container displays a skeleton loader.

The container listens to the order/data event to receive order data. When order data becomes available, it extracts the comments array and renders the comment list.

Configurations

The OrderComments container provides the following configuration options:

Options	Type	Req?	Description
orderData	OrderDataModel	No	A structured object containing transformed order data. It can be used as an initial value if data is not fetched from the backend, serving as a fallback.
className	string	No	Allows custom CSS classes to be applied to the container.

Example

The following example demonstrates how to render the OrderComments container:

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

export default async function decorate(block) {
  await orderRenderer.render(OrderComments, {})(block);
}