Order Details

For installation instructions, see Getting Started with Unify Widgets.

Basic Implementation

As a dialog (default)

<unify-order-details-widget
  api-key="your-api-key"
  order-id="your-order-id"
></unify-order-details-widget>

<button onclick="document.querySelector('unify-order-details-widget').open = true">
  View Order Details
</button>

Inline (no dialog)

<unify-order-details-widget
  api-key="your-api-key"
  order-id="your-order-id"
  no-dialog
></unify-order-details-widget>

Component Attributes

Attribute	Type	Required	Description
`api-key`	String	Yes	API key for Unify requests
`order-id`	String	Yes	Order identifier to fetch and display details
`open`	Boolean	No	Controls dialog visibility (dialog mode only)
`no-dialog`	Boolean	No	Renders content inline instead of in a dialog
`demo`	Boolean	No	Enable demo mode for testing

Component Properties

Property	Type	Required	Description
`config`	Object	No	Configuration object (see Config Options)

Config Options

Customize widget labels, formatting, and display behavior through the config property.

document.querySelector('unify-order-details-widget').config = {
  dialogTitle: 'Order Details',
  hidePrice: true,
  locale: 'en-US'
};

Dialog & Display

Option	Default	Description
`dialogTitle`	`"Order Details"`	Title of the details dialog
`loadingMessage`	`"Loading order details"`	Text shown while fetching data
`errorMessage`	`"Error loading data"`	Error message on load failure

Order Information Labels

Option	Default	Description
`orderIdLabel`	`"Order"`	Label for order number
`dateLabel`	`"Date:"`	Label for order date
`orderDetails`	`"Order details"`	Title for order information section
`basketPriceLabel`	`"Basket"`	Label for item subtotal
`shippingPriceLabel`	`"Shipping fees"`	Label for shipping cost
`totalPriceLabel`	`"Total"`	Label for total amount

Package & Delivery Labels

Option	Default	Description
`deliveryLabel`	`"Delivery and billing"`	Section title for delivery info
`noPackageDetails`	`"No package details available"`	Message when package data missing
`packageNumber`	`"Package N°"`	Label for package number
`packageStatus`	`"Status:"`	Label for package status
`carrierLabel`	`"Carrier:"`	Label for shipping carrier
`trackingNumber`	`"Tracking number:"`	Label for single tracking number
`trackingNumbers`	`"Tracking numbers:"`	Label for multiple tracking numbers
`noCarrier`	`"No carrier information"`	Message when carrier data missing

Delivery Type Labels

Option	Default	Description
`homeDelivery`	`"Delivery"`	Label for home delivery
`storeDelivery`	`"Delivery"`	Label for store delivery
`relayDelivery`	`"Delivery"`	Label for relay/point delivery

Address Labels

Option	Default	Description
`shippingAddressLabel`	`"Shipping address"`	Label for shipping address section
`billingAddressLabel`	`"Billing address"`	Label for billing address section
`noAddress`	`"No address information"`	Message when address data missing

Product Display

Option	Default	Description
`noProducts`	`"This order has no products"`	Message when order has no items
`colorLabel`	`"Color:"`	Label for product color attribute
`sizeLabel`	`"Size:"`	Label for product size attribute
`quantityLabel`	`"Quantity:"`	Label for product quantity

Status Labels

Status display text can be customized using the pattern {statusName}Status. The status name comes from the API; the whole list can be found in the Data types documentation. For example, to customize the "shipped" status label, set the shippedStatus option.

Default behavior capitalizes and formats status names from API (e.g., shipped → "Shipped", available_in_store → "Available In Store").

Formatting Options

Option	Default	Description
`hidePrice`	`false`	Hide all product pricing when true
`locale`	`"en-US"`	Locale for price and date formatting (e.g., `"fr-FR"`, `"de-DE"`)

Styling

CSS Custom Properties (recommended)

All visual tokens (colors, sizes, spacing, fonts) are exposed as CSS custom properties prefixed with --unify-. This is the stable styling API.

Set them on the widget element or any ancestor:

unify-order-details-widget {
  --unify-dialog-bg: #f9f9f9;
  --unify-dialog-color: #333;
}

To discover all available properties:

Open browser DevTools
Inspect the <unify-order-details-widget> element
Look at the Computed tab for all --unify-* entries
Edit them live in the Styles panel to preview

CSS Parts

Structural elements can be targeted using ::part():

unify-order-details-widget::part(dialog) {
  border-radius: 12px;
}

unify-order-details-widget::part(product) {
  border-radius: 8px;
}

⚠️ Parts may change between versions. Use CSS custom properties where possible.

To find available parts, inspect the widget's shadow DOM in DevTools — every element with a part attribute is targetable from outside.

Events

`dialog-opened`

Fired when the dialog open/close state changes.

document.querySelector('unify-order-details-widget').addEventListener('dialog-opened', (event) => {
  console.log('Dialog is', event.detail.open ? 'open' : 'closed');
});

Detail shape:

{
  open: boolean  // true when opened, false when closed
}

Examples

Basic dialog setup

const widget = document.querySelector('unify-order-details-widget');

widget.config = {
  dialogTitle: 'Order Details',
  locale: 'en-US'
};

// Open the dialog
widget.open = true;

Hiding pricing and customizing labels

const widget = document.querySelector('unify-order-details-widget');

widget.config = {
  hidePrice: true,
  orderDetails: 'Items Ordered',
  deliveryLabel: 'Shipping & Billing',
  shippingAddressLabel: 'Delivery Address',
  billingAddressLabel: 'Invoice Address',
  locale: 'fr-FR'
};