Skip to content

Search is only available in production builds. Try building and previewing the site to test it out locally.

ShippingStatus container

The ShippingStatus container displays information about shipments, including product images, the delivery service used, and tracking numbers. A separate block is rendered for each shipment created for the order. It also lists products that have not yet been shipped, providing a clear overview of the shipping status for all items.

ShippingStatus  container

ShippingStatus container

Configurations

The ShippingStatus container provides the following configuration options:

Options Type Req? Description
slots.DeliveryTimeLineslotNo Allows integration of the delivery process in a timeline format. Displays key events from dispatch to arrival, making it easier to track delivery progress and view the current stage in real-time.
slots.DeliveryTrackActionsslotNo Enables integration of custom actions related to order and delivery tracking. Allows customization with parameters such as delivery type, status updates, and timestamps, providing flexibility and control over user interactions and tracking.
slots.ReturnItemsDetailsslotNo Supports adding or customizing additional data for return items, enabling tailored content to meet specific requirements.
classNamestringNo CSS class for additional styling customization of the container.
collapseThresholdnumberNo Sets the minimum number of elements required for images to be displayed in an accordion view.
orderDataOrderDataModelNo Contains order data, including the order ID and a list of items.
routeOrderDetailsfunctionNo A function that returns the URL for the product details route.
routeTrackingfunctionNo Specifies the URL where the customer should be redirected when clicking the tracking number link.
routeProductDetailsfunctionNo A function that returns the URL for the product details page.

Example

The following example demonstrates how to render the ShippingStatus container:

export default async function decorate(block) {
await orderRenderer.render(ShippingStatus, {
routeTracking: ({ carrier, number }) => {
if (carrier?.toLowerCase() === 'ups') {
return `${UPS_TRACKING_URL}?tracknum=${number}`;
}
return '';
},
routeProductDetails: (data) => {
if (data?.orderItem) {
return `/products/${data?.orderItem?.productUrlKey}/${data?.orderItem?.product?.sku}`;
}
if (data?.product) {
return `/products/${data?.product?.urlKey}/${data?.product?.sku}`;
}
return '#';
},
})(block);
}