ThankYouPage

Purpose

The ThankYouPage component renders the post-checkout “order completed” page.

It:

shows different empty/error states when the order token is missing/invalid

renders the success header + order code

renders order information (billing/shipping addresses, shipping & payment method)

renders an order summary list of purchased items + totals

triggers GA4 purchase once per order and marks the order as “viewed” backend-side

performs post-checkout cleanup (cart tokens/cookies/local storage)

Inputs (model contract)

Model shape (storefront example)

{
  "tokenIsInvalid": false,
  "tokenIsMissing": false,
  "thankYouPageViewed": true,
  "order": {
    "id": "Order Id",
    "orderId": "Order Id",
    "orderCode": "Sample text",
    "discountPercent": "0",
    "billingAddress": {
      "firstName": "Sample text",
      "lastName": "Sample text",
      "phoneNumber": "Sample text",
      "email": "sample@example.com",
      "address1": "Sample text",
      "city": "Sample text",
      "postalCode": "Sample text",
      "state": "Sample text",
      "country": "Sample text"
    },
    "shippingAddress": {
      "firstName": "Sample text",
      "lastName": "Sample text",
      "phoneNumber": "Sample text",
      "email": "sample@example.com",
      "address1": "Sample text",
      "city": "Sample text",
      "postalCode": "Sample text",
      "state": "Sample text",
      "country": "Sample text"
    },
    "completedDate": "2026-01-01T00:00:00.0000000+00:00",
    "payment": {
      "name": "Sample text",
      "serviceAmountText": "Sample price text",
      "serviceAmount": 2
    },
    "shippingLine": {
      "title": "Sample text",
      "serviceAmountText": "Sample price text",
      "serviceAmount": 0,
      "logo": {
        "alt": "Sample text",
        "link": "https://example.com/media/sample.jpg"
      }
    },
    "cartItems": [
      {
        "id": "Cart Item Id",
        "productId": "Product Id",
        "productVariantId": "Variant Id",
        "productTitle": "Sample text",
        "quantity": 1,
        "imageLink": "https://example.com/media/sample.jpg",
        "link": "product/sample-product",
        "finalPriceText": "Sample price text",
        "finalPrice": 25
      },
      "..."
    ],
    "invoiceData": {
      "companyName": "",
      "tin": ""
    },
    "netValue": 38.71,
    "vatValue": 9.29,
    "finalPrice": 50,
    "discountFromCoupons": 0,
    "netValueText": "Sample price text",
    "vatValueText": "Sample price text",
    "finalPriceText": "Sample price text",
    "discountFromPointsText": "Sample price text",
    "discountFromCouponsText": "Sample price text",
    "loyaltyPricing": {
      "usePoints": false,
      "useCoupon": false,
      "couponCodes": []
    },
    "pricingBeforeDiscount": {
      "totalAmount": 48,
      "totalAmountText": "Sample price text",
      "netAmount": 38.71,
      "netAmountText": "Sample price text",
      "vatAmount": 9.29,
      "vatAmountText": "Sample price text",
      "expenseAmount": 0,
      "expenseAmountText": "Sample price text"
    }
  },
  "name": "ThankYouPage",
  "view": "Default",
  "section": "SectionA",
  "settings": {
    "id": "Component Id",
    "section": "SectionA",
    "type": "NoirThankYouPage",
    "name": "ThankYouPage",
    "configuredInContentApi": true,
    "view": "Default",
    "displayName": "",
    "cssClass": ""
  },
  "translations": {
    "orderSummary": "Sample text",
    "goToHomepage": "Sample text",
    "thankYouForYourOrder": "Sample text",
    "...": "..."
  }
}

Required fields

settings.id

Optional fields

tokenIsMissing, tokenIsInvalid

When true, the component shows the matching error UI and omits the order details.

thankYouPageViewed

Controls whether GA purchase + backend cleanup runs.

order

When null/missing, the component renders a “No order found” flow.

settings.cssClass

translations.*

JavaScript

Global object

Components/ThankYouPage/Default.js exposes:

Liquid binds it via Alpine:

<section
  x-data='thankyoupagedefault.initComponent(order, orderViewed, orderViewedErrorMessage)'
>

`initComponent(order, orderViewed, orderViewedErrorMessage)`

What it does

Creates and returns the Alpine state object.

`init()`

What it does

Performs post-checkout cleanup (cart tokens and Alpine cart store).

Clears existing toasts.

If the order wasn’t marked as viewed:

sends GA4 purchase

calls servicesreusabledefault.triggerOrderViewedCleanup(order.id)

Key behaviors / edge cases

GA items are mapped via prepareItemsForCheckoutProcess(order.cartItems).

On cleanup API failure, it shows a toast with orderViewedErrorMessage.

`performPostCheckoutCleanup()`

What it does

Removes checkout/cart tokens from localStorage.

Clears cartToken and checkoutToken cookies (via theme setCookie(...) if present).

Resets the Alpine cart store (if it exists).

Key behaviors / edge cases

Wrapped in a try/catch (fails gracefully).

Global Alpine stores (used by ThankYouPage)

`$store.toast` (user feedback)

Used to show an error if the “order viewed cleanup” API call fails.

`$store.cart` (post-checkout reset)

If present, it’s updated to an empty cart in performPostCheckoutCleanup().

Services / API calls

servicesreusabledefault.triggerOrderViewedCleanup(orderId)

Marks the order as viewed server-side.

Dependencies

Alpine.js

Theme utilities:

prepareItemsForCheckoutProcess(...)

sendGAEvent(...)

setCookie(...) (if available)

Alpine stores:

toast

cart

Notes

The template formats order dates using inline Alpine: new Date(rawDate).toLocaleDateString('el-GR', ...).

Product images fall back to the global noImage setting (or theme Assets/images/no-image.svg).

Extras

Template behavior (Liquid + Alpine)

Shows 3 mutually exclusive states:

token missing

token invalid

order details

Shows different thank-you line for B2C vs B2B (uses GlobalData.User.CustomerName for B2B).

Displays shipping method and payment method only if they exist.

ThankYouPage

Purpose#

Inputs (model contract)#

Model shape (storefront example)#

Required fields#

Optional fields#

JavaScript#

Global object#

initComponent(order, orderViewed, orderViewedErrorMessage)#

init()#

performPostCheckoutCleanup()#

Global Alpine stores (used by ThankYouPage)#

$store.toast (user feedback)#

$store.cart (post-checkout reset)#

Services / API calls#

Dependencies#

Notes#

Extras#

Template behavior (Liquid + Alpine)#

Purpose

Inputs (model contract)

Model shape (storefront example)

Required fields

Optional fields

JavaScript

Global object

`initComponent(order, orderViewed, orderViewedErrorMessage)`

`init()`

`performPostCheckoutCleanup()`

Global Alpine stores (used by ThankYouPage)

`$store.toast` (user feedback)

`$store.cart` (post-checkout reset)

Services / API calls

Dependencies

Notes

Extras

Template behavior (Liquid + Alpine)