hb-order-list — order list

Category: commerce
Tags: commerce, order

What it does

Order summary view driven by a payment JSON object: order number header, optional tracking area, list of line items with image and name, and a footer showing the order total including tax and optional shipment fee. Exposes the item image via the item_image CSS part.

Custom element

hb-order-list

Attributes (snake_case; use string values in HTML)

• id, style (optional): strings.
• payment (required): JSON string — OrderPayment with orderNumber, countryCode, items (shop line items plus image per row), plus cart/tax fields from shared checkout types.

Events

None declared.

Styling (Bulma)

Layout uses Bulma container and columns / column with fractional widths (is-10, is-2, etc.). Theme tokens are registered on :host via Bulma’s light theme and setup-theme. Customize colors and spacing from the page by setting --bulma-* variables (for example --bulma-text, --bulma-scheme-main, --bulma-column-gap); see extra/docs.ts and styles/bulma.scss.

Usage notes

• CSS parts: item_image.
• Serialize payment as a single JSON attribute; see builder/src/wc/order-list/types/webcomponent.type.d.ts and examples in extra/docs.ts.

Minimal HTML example

<hb-order-list
  payment='{"orderNumber":"1001","countryCode":"EU","items":[{"id":"1","name":"Item","unitaryPrice":10,"taxPercentage":22,"image":"https://example.com/a.jpg"}]}'
></hb-order-list>