spz-order-detail

Supported layouts: container

When to Use

When you need to display order details, typically used on order detail pages.

Code Demonstration

Basic Usage

This component encapsulates all the business logic, allowing us to directly use the encapsulated data to display order details.

Template Data

Multilingual data needed is already supported inside the component and can be used directly. (Only includes data processed by the component, original API data remains unchanged)

Order Detail Data:

Attribute Name	Description	Type
`showAddToCart`	Whether to show the add-to-cart button	boolean
`order_info.orderStatus`	Order status	string
`order_info.orderStatusColor`	Order status color	string
`order_info.orderTip`	Order tip message, e.g., `The order is awaiting your payment`	string
`line_items[0].parsedProperties`	Parse the `properties` attribute in the product data into an object	Object
`line_items[0].shippingStatus`	Shipping status of the order	string
`line_items[0].xQty`	Quantity with `x` prefix, e.g., `x12`	string
`line_items[0].optionValueJoinInSlash`	Display values from `options` array in product data separated by `/`, e.g., `black / L`	string
`line_items[0].optionsJoinInColon`	Format name/value in `options` array in product data as `name: value`, e.g., `color: black`	Array
`summary`	-	Object

Summary Object Data

Below is the description of the summary object data and which original fields each entry is composed of.

{
  "contact_name": {
    "label": "Contact name",
    "value": "..." // => `${shipping_address.first_name} ${shipping_address.last_name}`
  },
  "address": {
    "label": "Address",
    "value": "...", // => `${shipping_address.address}`
    "value1": "...", // => `${shipping_address.province} ${shipping_address.country}`
    "value2": "...", // => `${shipping_address.address1} ${shipping_address.area} ${shipping_address.city}`
    "value3": "...", // => `${shipping_address.address},${shipping_address.address1},${shipping_address.area},${shipping_address.city},${shipping_address.province}`
  },
  "company": {
    "label": "Company",
    "value": "...", // => `${shipping_address.company}`
  },
  "zip": {
    "label": "Zip Code",
    "value": "...", // => `${shipping_address.zip}`
  },
  "contact_info": {
    "label": "Contact Info",
    "email": "...", // => `${shipping_address.email}`
    "phone": "..." // => `${shipping_address.phone}`
  },
  "cpf": {
    "label": "...", // => `${shippingAddress.extra_info?.tax_text || 'CPF/CNPJ'}`,
    "value": "..." // => `${shippingAddress.extra_info?.cpf}`
  },
  "create_time": {
    "label": "Order time",
    "value": "...", // => `${order_info.create_time}`
    "parsedTime": {/* ... */} // => parsedTime Object
  },
  "order_no": {
    "label": "Order ID",
    "value": "..." // => `${order_info.order_no}`
  },
  "shipping_status": {
    "label": "Shipment status",
    "value": "..." // => Corresponding multilingual status for orderInfo.fulfillment_status
  },
  "payment_status": {
    "label": "Payment status",
    "value": "..." // => Corresponding multilingual status for order_info.financial_status
  },
  "email": "...", // => `${shipping_address.email}`
  "phone": "...", // => `${shipping_address.phone}`
  "payment_methods": {
    "label": "...", // => Based on order

_info.payment_progress to decide the displayed text
    "lines": [/* ... */], // => Filter non-conforming gift card data from order.payment_lines array
    "available": "Boolean", // => Whether gift card needs to be displayed
    "hasExchangeRate": "Boolean" // => Gift
  },
  "total": {
    "label": "Total amount",
    "value": "..." // => order_info.total
  },
  "sub_total": {
    "label": "Product amount",
    "value": "..." // => order_info.sub_total
  },
  "discount_total": {
    "label": "Product amount",
    "value": "..." // => order_info.discount_total
  },
  "code_discount_total": {
    "label": "Discount code",
    "label1": "...", // => `${order_info.code_discount_total} (${order_info.discount_code})`
    "value": "...", // => order_info.code_discount_total
  },
  "total_tip_received": {
    "label": "Tip",
    "value": "..." // => order_info.total_tip_received
  },
  "shipping_total": {
    "label": "Shipping cost",
    "value": "..." // => order_info.shipping_total
  },
  "tax_total": {
    "label": "Tax",
    "value": "..." // => order_info.tax_total
  }
}

parsedTime Object Data

Attribute Name	Description	Output
`YYYY`	Four-digit year	2023
`M`	Month, starting from 1	1-12
`MM`	Two-digit month	01-12
`MMM`	Abbreviated month name	Jan-Dec
`D`	Day of the month	1-31
`DD`	Two-digit day of the month	01-31
`ddd`	Abbreviated weekday name	Mon-Sun
`H`	Hour	0-23
`HH`	Two-digit hour	00-23
`h`	Hour, 12-hour clock	1-12
`hh`	Two-digit hour, 12-hour clock	01-12
`m`	Minute	0-59
`mm`	Two-digit minute	00-59
`s`	Second	0-59
`ss`	Two-digit second	00-59
`a`	AM or PM, lowercase	am \| pm
`A`	AM or PM, uppercase	AM \| PM

parsedProperties Object Data

Attribute Name	Description	Type
name	Custom property name	string
value	Custom property value	any
isImage	Whether the custom property value is an image type	boolean

<spz-order-detail layout="container" order-id="xxx">
  <template>
    <div>
      <h3>Order Detail</h3>
      <!-- ... -->
    </div>
  </template>
</spz-order-detail>

Attributes

Attribute Name	Description	Type	Default Value	Required
order-id	Order ID	string	-	Yes

AI Summary (LLM Ready)

Component ID: spz-order-detail
One-line purpose: Displays order details.
Detected attribute rows: 1
Detected method subsections: 0
Detected event subsections: 0
Top attribute names: order-id
Top method names: none (needs manual completion)
Top event names: none (needs manual completion)
Reading order: start from usage/examples, then verify attributes, methods, and events.
Related docs: /en/guide/actions-and-events/ , /en/guide/layouts/

spz-order-detail#

#When to Use

#Code Demonstration

#Basic Usage

#Template Data

#Attributes