Offers

Purpose

Offers is the Profile-tab reusable that lists customer offers with status/sort filtering and pagination.

It renders responsive offer tables/cards and keeps filter/page state in URL query parameters.

Where it's rendered

In Components/Profile/Default.liquid:

{% render 'Reusables\\Offers\\Default', offerData: offerData %}

Inputs (Liquid render parameters)

Offers is rendered with a single parameter:

offerData

Model shape (storefront example)

Sanitized example of the payload used by this reusable:

{
  "offerData": {
    "status": "Open",
    "sort": "expiresAt_desc",
    "pagination": {
      "pageNumber": 1,
      "numberOfPages": 3
    },
    "availableStatuses": [
      "All",
      "Draft",
      "Open",
      "Accepted",
      "Expired",
      "Rejected"
    ],
    "availableSorts": [
      "expiresAt_desc",
      "expiresAt_asc",
      "insertdate_desc",
      "insertdate_asc"
    ],
    "list": [
      {
        "id": "Offer Id",
        "title": "Sample title",
        "customerName": "Sample name",
        "status": "Open",
        "insertDate": "2026-05-10T09:15:00Z",
        "expiresAt": "2026-06-10T09:15:00Z"
      }
    ]
  }
}

Required fields

offerData.pagination.pageNumber

offerData.pagination.numberOfPages

offerData.list

Optional fields

offerData.status

offerData.sort

offerData.availableStatuses

offerData.availableSorts

Template behavior (Liquid + Alpine)

Source: Reusables/Offers/Default.liquid.

Computes a Liquid sliding-window pagination list.

Mounts Alpine via:

x-data="offersreusabledefault.initComponent(currentPage, totalPages, offerData)"

Status and sort selectors call redirectToState(1) on change.

If offerData is empty/null, it renders a no-data/no-results message.

Offer rows link to /offer/{id} in a new tab.

Data contract (JS runtime)

Document runtime state shape, factories, and main state fields.

JavaScript

Source: Reusables/Offers/Default.js.

initComponent

Factory that returns reusable state (currentPage, totalPages, offerData, status, sort) and handlers.

redirectToState

Builds query-string state (offerPage, offerStatus, offerSort) and redirects to the same path.

Global Alpine stores

No direct Alpine store dependencies are used by this reusable.

Services / API calls

No direct API/service calls are made by this reusable.

Dependencies

List template/JS/JSON files and other real dependencies.

Notes

The reusable keeps filtering/pagination state in URL params, so refresh/share preserves current view.

Translation labels are read from Reusables/Offers/Default.json (Reusables.Offers.Translations.*).

Offers

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

JavaScript#

initComponent#

redirectToState#

Global Alpine stores#

Services / API calls#

Dependencies#

Notes#