Orders

Purpose

Orders is the Profile-tab reusable that lists a customer’s past orders and provides:

Search by order code (with optional voice search).

Filtering by status and year.

Pagination.

A detail preview for a selected order.

“Order again” functionality (adds the order lines back to the cart in bulk).

Where it's rendered

In Components/Profile/Default.liquid (tab orders):

{% render 'Reusables\\Orders\\Default', orderData: orderData %}

Inputs (Liquid render parameters)

Orders is rendered with a single parameter.

Model shape (storefront example)

Below is a sanitized excerpt from a real Profile component model dump containing the orderData passed to this reusable.

{
  "orderData": {
    "pagination": {
      "totalCount": 27,
      "pageSize": 12,
      "pageNumber": 1,
      "numberOfPages": 3
    },
    "availableStatuses": [
      "Placed",
      "Cancelled",
      "Processing",
      ...
    ],
    "availableYears": [
      "2026",
      "2025",
      "2024",
      ...
    ],
    "list": [
      {
        "id": "Order Id",
        "status": "Placed",
        "code": "ORD00000027",
        "placedAt": "2026-04-01T09:47:15.2948642+00:00",
        "billingAddress": {
          "address1": "Sample address",
          "city": "Sample city",
          "postalCode": "11147",
          "state": "Sample state",
          "country": "Sample country"
        },
        "shippingAddress": {
          "address1": "Sample address",
          "city": "Sample city",
          "postalCode": "11147",
          "state": "Sample state",
          "country": "Sample country"
        },
        "shippingLine": {
          "title": "Sample title",
          "carrierId": "Carrier Id",
          "carrierCode": "Sample code",
          "netPrice": 0,
          "totalAmount": 0,
          "totalAmountText": "0.00 €",
          "vatLines": []
        },
        "payment": {
          "name": "Sample name",
          "provider": "COD",
          "amount": 0,
          "serviceAmount": 2,
          "serviceAmountText": "2.00 €"
        },
        "documentType": "Receipt",
        "totalQuantity": 1,
        "totalAmount": 125,
        "totalAmountText": "125.00 €",
        "netAmount": 100,
        "vatAmount": 23,
        "lines": [
          {
            "id": "Order Line Id",
            "productId": "Product Id",
            "productVariantId": "Product Variant Id",
            "productTitle": "Sample title",
            "quantity": 1,
            "link": "sample-alias",
            "unitText": "Sample unit",
            "price": 100,
            "netValue": 100,
            "vatValue": 23,
            "vatRate": 23,
            "mediaItem": {
              "id": "Media Item Id",
              "link": "https://example.com/sample",
              "position": 0,
              "alt": "sample",
              "mediaType": "Image"
            }
          },
          ...
        ],
        "vatAnalysis": [
          {
            "vatRate": 23,
            "vatAmount": 23,
            "vatCode": "",
            "netAmount": 100
          },
          ...
        ]
      },
      ...
    ]
  }
}

Required fields

orderData (object)

pagination.pageNumber

pagination.numberOfPages

list (array)

Optional fields

Orders reads additional fields when present:

Search/filter state:

orderData.code (string)

orderData.year (string)

orderData.status (string)

Filter options:

availableStatuses

availableYears

For “order again”:

each order line uses productId, productVariantId, quantity (and optional fields like dim1Value, dim2Value, price, initialPrice).

Template behavior (Liquid + Alpine)

Source: Reusables/Orders/Default.liquid.

Computes pagination “sliding window” server-side in Liquid and builds a pages array for UI rendering.

Initializes Alpine with:

x-data='ordersreusabledefault.initComponent({{ currentPage }}, {{ totalPages }}, {{ orderData | serialize | escape }})'

Filters (code/status/year) trigger navigation by updating the URL query parameters.

Uses a “preview mode” controlled by hideOrderPreview.

Uses fallback image logic for order line product images.

Data contract (JS runtime)

`ordersreusabledefault.initComponent(currentPage, totalPages, orderData)`

Source: Reusables/Orders/Default.js.

State highlights:

currentPage, totalPages

orderData

orders = orderData.list || []

filter models: code, year, status

hideOrderPreview / selectedOrder

isAdding (guards repeated bulk-add)

JavaScript

Source: Reusables/Orders/Default.js.

`init()`

Builds a local years array (current year decreasing, length 10).

Watches Alpine.store('profile').tabChanged to reset preview state when the Profile tab changes.

`redirectToState(newPage = null)`

Builds query parameters (page, code, year, status) and navigates:

window.location.href = `${window.location.pathname}?${params.toString()}`;

`triggerVoiceSearch()`

Uses SpeechRecognition / webkitSpeechRecognition to fill the code model.

`viewOrder(index)`

Switches to the order preview view and scrolls into place.

`formatDate(dateString)`

Formats dates using toLocaleDateString('el-GR').

`orderAgain(items, errorMessages)`

Extracts a variations array from order lines.

Calls:

servicesreusabledefault.addMultipleToCart(variations)

Shows toasts on failure.

Handles response.data.lineFailures by mapping failure types to messages with getLineFailureMessages(...).

`getLineFailureMessages(lineFailure, errorMessages, selectedProductTitle)`

Maps error types to translation-based messages.

Returns a list of toast messages prefixed with the product title.

Global Alpine stores

Directly used:

$store.toast

Used for error reporting.

$store.profile

Reads tabChanged to reset preview state.

Services / API calls

servicesreusabledefault.addMultipleToCart(variations)

Dependencies

Reusables/Orders/Default.liquid

Reusables/Orders/Default.js

Reusables/Orders/Default.json (translations)

Components/Profile/Default.liquid (render site)

$store.toast and $store.profile in Assets/js/theme.js

servicesreusabledefault.addMultipleToCart

Browser Speech Recognition API (optional)

Notes

Voice search depends on browser support; when unsupported it shows an alert(...).

The reusable renders two very different states (list vs preview) driven by hideOrderPreview.

Examples

Render from the Profile orders tab:

{% render 'Reusables\\Orders\\Default', orderData: orderData %}

Orders

Purpose#

Where it's rendered#

Inputs (Liquid render parameters)#

Model shape (storefront example)#

Required fields#

Optional fields#

Template behavior (Liquid + Alpine)#

Data contract (JS runtime)#

ordersreusabledefault.initComponent(currentPage, totalPages, orderData)#

JavaScript#

init()#

redirectToState(newPage = null)#

triggerVoiceSearch()#

viewOrder(index)#

formatDate(dateString)#

orderAgain(items, errorMessages)#

getLineFailureMessages(lineFailure, errorMessages, selectedProductTitle)#

Global Alpine stores#

Services / API calls#

Dependencies#

Notes#

Examples#