Purpose

Quotes is the Profile-tab reusable that lists a customer’s quotes and provides:

Filter by status.

Pagination.

A link to open a quote detail page in a new tab.

Where it's rendered

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

{% render 'Reusables\\Quotes\\Default',
    quoteData: quoteData
%}

Inputs (Liquid render parameters)

Quotes is rendered with a single parameter.

Model shape (storefront example)

Below is a sanitized excerpt based on a real Profile component model dump containing the quoteData passed to this reusable.

{
  "quoteData": {
    "list": [
      {
        "id": "Quote Id",
        "quoteCode": "Q20260427-141131392",
        "status": "Accepted",
        "title": "Sample title",
        "creatorName": "Sample name",
        "createdAt": "2026-04-27T14:11:31.394672+00:00",
        "updatedAt": "2026-04-27T14:41:00.374933+00:00"
      },
      {
        "id": "Quote Id",
        "quoteCode": "Q20260427-132337669",
        "status": "Pending",
        "title": "Sample title",
        "creatorName": "Sample name",
        "createdAt": "2026-04-27T13:23:37.6717406+00:00",
        "updatedAt": "2026-04-27T13:23:38.255779+00:00"
      }
    ],
    "sort": "-updatedat",
    "availableStatuses": [
      "All",
      "Pending",
      "Accepted",
      "Completed",
      "Expired"
    ],
    "availableSorts": [
      "updatedat",
      "createdat"
    ],
    "pagination": {
      "totalCount": 21,
      "pageSize": 12,
      "pageNumber": 1,
      "numberOfPages": 2
    }
  }
}

Required fields

quoteData (object)

pagination.pageNumber

pagination.numberOfPages

list (array)

Optional fields

Filter state:

quoteData.status (string)

Filter options:

quoteData.availableStatuses (array)

Sorting (currently not rendered as a UI control in this reusable, but can exist in the payload):

quoteData.sort (string)

quoteData.availableSorts (array)

Template behavior (Liquid + Alpine)

Source: Reusables/Quotes/Default.liquid.

Computes pagination “sliding window” in Liquid and builds a pages array.

Initializes Alpine with:

x-data="quotesreusabledefault.initComponent({{ currentPage }}, {{ totalPages }}, {{ quoteData | serialize | escape }})"

Status filter updates the URL query parameters via redirectToState(1).

Empty states:

If quoteData == nil, it renders Reusables.Quotes.Translations.NoQuotesText.

If quoteData.list.size == 0, it renders Reusables.Quotes.Translations.NoResultsText.

Quote detail link:

/quote/{{ quote.id }}

Data contract (JS runtime)

`quotesreusabledefault.initComponent(currentPage, totalPages, quoteData)`

Source: Reusables/Quotes/Default.js.

State highlights:

currentPage, totalPages

quoteData

status (initialized from quoteData.status or All)

JavaScript

Source: Reusables/Quotes/Default.js.

`redirectToState(newPage = null)`

Builds query parameters and navigates:

quotePage (page number)

quoteStatus (status string, omitted when All)

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

Notes

This reusable expects quoteData.pagination to exist. If quoteData is present but pagination is missing, Liquid pagination variables like quoteData.pagination.pageNumber will be nil.

Quotes

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)#

quotesreusabledefault.initComponent(currentPage, totalPages, quoteData)#

JavaScript#

redirectToState(newPage = null)#

Notes#

Quotes#