Quote

Purpose

The Quote component renders the quote flow.

It supports two states:

Create: create a new quote based on the current cart (model.CartData).

Get: view an existing quote’s details (model.QuoteDetail).

Where it’s rendered

Template: Components/Quote/Default.liquid

Inputs (model contract)

Settings

model.Settings.Id (string): used as the wrapper id (comp-{{ id }}).

model.Settings.CssClass (string, optional): additional classes on the wrapper.

Model shape

Below are sanitized samples (Create + Get) based on real storefront payloads.

Create

{
  "state": "Create",
  "cartData": {
    "id": "Cart Id",
    "token": "Cart Token",
    "companyId": "Company Id",
    "customerId": "Customer Id",
    "finalPrice": 98.89,
    "finalPriceText": "98,89 €",
    "netValue": 89.9,
    "netValueText": "89,90 €",
    "vatValue": 8.99,
    "vatValueText": "8,99 €",
    "cartItems": [
      {
        "id": "Cart Line Id",
        "productId": "Product Id",
        "productVariantId": "Variant Id",
        "quantity": 1,
        "productTitle": "Sample title",
        "link": "sample-alias",
        "imageLink": "https://example.com/sample",
        "masterProductImageLink": "https://example.com/sample",
        "unitId": "Unit Id",
        "unitText": "Sample unit",
        "categoryId": "Category Id",
        "originalPrice": 0,
        "originalPriceText": "0,00 €",
        "finalPrice": 89.9,
        "finalPriceText": "89,90 €",
        "subTotalPrice": 98.89,
        "subTotalPriceText": "98,89 €",
        "subTotalNetValue": 89.9,
        "subTotalVatValue": 8.99,
        "quantityConstraints": {
          "additive": {
            "minimum": 1,
            "maximum": 999998,
            "step": 1,
            "isValid": true
          },
          "absolute": {
            "minimum": 1,
            "maximum": 999999,
            "step": 1,
            "isValid": true
          }
        }
      }
    ],
    "validation": {
      "errors": [],
      "isSuccess": true,
      "lines": [
        {
          "lineId": "Cart Line Id",
          "isSuccess": true,
          "errors": []
        }
      ]
    }
  },
  "quoteDetail": null,
  "settings": {
    "id": "Component Id",
    "cssClass": "(UNDEFINED)"
  }
}

Get

{
  "state": "Get",
  "quoteDetail": {
    "id": "Quote Id",
    "code": "Q20260427-141131392",
    "status": "Accepted",
    "title": "Sample title",
    "notes": "",
    "creatorName": "Sample name",
    "createdAt": "2026-04-27T14:11:31.394672+00:00",
    "finalNetAmount": 417.39,
    "finalNetAmountText": "417,39 €",
    "initialNetAmount": 419.9,
    "initialNetAmountText": "419,90 €",
    "vatAmount": 85.13,
    "vatAmountText": "85,13 €",
    "discountRate": 0.006,
    "discountRateText": "0,6 %",
    "discountValue": 2.52,
    "discountValueText": "2,52 €",
    "lines": [
      {
        "lineId": "Quote Line Id",
        "productId": "Product Id",
        "productVariantId": "Variant Id",
        "sku": "SKU-0000",
        "title": "Sample title",
        "link": "product/sample-alias",
        "imageLink": "https://example.com/sample",
        "quantity": 2,
        "initialPricePerItem": 100,
        "initialPricePerItemText": "100,00 €",
        "finalPricePerItem": 99.25,
        "finalPricePerItemText": "99,25 €",
        "netValue": 198.5,
        "netValueText": "198,50 €",
        "lineValue": 198.5,
        "lineValueText": "198,50 €",
        "initialLineValue": 200,
        "initialLineValueText": "200,00 €",
        "vatRate": 23,
        "vatValue": 46,
        "vatValueText": "46,00 €",
        "discountRate": 0.0075,
        "discountRateText": "0,75 %",
        "discountValue": 1.5,
        "discountValueText": "1,50 €",
        "discountValuePerItem": 0.75,
        "discountValuePerItemText": "0,75 €",
        "categoryId": "Category Id",
        "brandId": "Brand Id",
        "unitId": "Unit Id",
        "masterProductImageLink": "https://example.com/sample",
        "minOrderQuantity": 1,
        "startQuantity": 12
      }
    ],
    "validation": {
      "errors": [],
      "isSuccess": true,
      "lines": [
        {
          "lineId": "Quote Line Id",
          "isSuccess": true,
          "errors": []
        }
      ]
    }
  },
  "cartData": null,
  "settings": {
    "id": "Component Id",
    "cssClass": "(UNDEFINED)"
  }
}

Required fields

model.State

For State=Create: model.CartData (expects cartItems to exist)

For State=Get: model.QuoteDetail (expects lines to exist)

Optional fields

model.Settings.CssClass

model.QuoteDetail / model.CartData may include a validation object.

Template behavior (Liquid + Alpine)

Source: Components/Quote/Default.liquid.

Chooses modelData based on model.State:

Create uses model.CartData

Get uses model.QuoteDetail

Initializes Alpine with:

x-data='quotedefault.initComponent({{ modelData | serialize | escape }})'

Uses $store.quote.quoteData as the client-side source of truth.

Uses Alpine.store("quote").quoteData as the client-side source of truth.

The template also references $store.quote.quoteData directly.

This implies the $store.quote store is expected to exist at runtime.

Shows a validation errors box when validation.isSuccess == false.

Data contract (JS runtime)

`quotedefault.initComponent(data)`

Source: Components/Quote/Default.js.

Writes the payload to Alpine.store("quote").quoteData.

Builds a simplified validation model via parseQuoteValidation(...):

groups errors by error.type

counts distinct failing lineIds per type

JavaScript

Source: Components/Quote/Default.js.

Sticky summary

Tracks header height and sets sticky aside offset:

reads document.querySelector("header").clientHeight

sets .quote-aside { top: <headerHeight>px }

Quote actions

handleCreateQuote(...):

Opens Alpine.store("modal").open(...).

Calls servicesreusabledefault.createQuote(quoteData).

Redirects to /quote/{quoteId}.

handleOrderQuote(...):

Writes localStorage.quoteToken = Alpine.store("quote").quoteData.id.

Redirects to /checkout?quote=<quoteId>.

Updating quote lines (debounced)

Uses axios cancel tokens to cancel in-flight requests.

Updates stored quote data in localStorage.quoteData and calls:

servicesreusabledefault.updateProductCart(...)

servicesreusabledefault.updateProductQuantity(...)

Dependencies

Reusables/Services/Default.js (servicesreusabledefault)

Alpine stores:

Alpine.store("quote")

Alpine.store("toast")

Alpine.store("modal")

External libs/helpers:

axios

prepareListProducts(...), sendGAEvent(...)

Notes

The component assigns translation strings into Liquid variables (from model.Translations) and uses them inside the template and JS.

Quote

Purpose#

Where it’s rendered#

Inputs (model contract)#

Settings#

Model shape#

Create#

Get#

Required fields#

Optional fields#

Template behavior (Liquid + Alpine)#

Data contract (JS runtime)#

quotedefault.initComponent(data)#

JavaScript#

Sticky summary#

Quote actions#

Updating quote lines (debounced)#

Dependencies#

Notes#