ProductMixList

Purpose

The ProductMixList component renders the “My product mix” page: a paginated table of previously purchased items.

It:

is gated by the feature flag GlobalData.Settings.EnableMyProductMix

shows an empty state when there are no items

renders a table of items with quantity controls and an add-to-cart action per row

supports sorting and pagination (with a “sliding window” pages UI)

validates quantity rules via an API call (debounced per row)

fetches pages from the backend and can show a retry UI if fetching fails

sends GA4 selectItem when a product is clicked

Inputs (model contract)

Model shape (storefront example)

{
  "items": [
    {
      "productId": "Product Id",
      "productVariantId": "Variant Id",
      "title": "Sample product title",
      "sku": "Sample text",
      "imageUrl": "https://example.com/media/sample.jpg",
      "alias": "sample-product-alias",
      "dimension1Name": "Sample text",
      "dimension1Value": "Sample text",
      "dimension2Name": "Sample text",
      "dimension2Value": "Sample text",
      "lastPurchasedPrice": 0,
      "lastPurchasedQuantity": 1,
      "lastPurchasedAtUtc": "2026-01-01T00:00:00.0000000+00:00",
      "lastPurchasedTotal": 0,
      "lastPurchasedTotalText": "Sample price text",
      "currentPrice": 0,
      "canOrder": false,
      "minOrderQuantity": 1,
      "maxOrderQuantity": 99,
      "orderQuantityStep": 1,
      "sellOutOfStock": true,
      "stock": 0,
      "quantityConstraints": {
        "additive": {
          "minimum": 1,
          "maximum": 999999,
          "step": 1,
          "isValid": true
        },
        "absolute": {
          "minimum": 1,
          "maximum": 999999,
          "step": 1,
          "isValid": true
        }
      }
    },
    "..."
  ],
  "currentPage": 1,
  "totalPages": 2,
  "totalCount": 23,
  "pageSize": 20,
  "name": "ProductMixList",
  "view": "Default",
  "section": "SectionA",
  "settings": {
    "id": "Component Id",
    "section": "SectionA",
    "type": "NoirProductMixList",
    "name": "ProductMixList",
    "configuredInContentApi": true,
    "view": "Default",
    "displayName": "",
    "cssClass": ""
  },
  "translations": {
    "myProductMix": "Sample text",
    "noProducts": "Sample text",
    "noProductsDescription": "Sample text",
    "...": "..."
  }
}

Required fields

settings.id

items[]

Can be empty; the component renders an empty state.

Optional fields

Pagination:

currentPage, totalPages, totalCount, pageSize

settings.cssClass

Per item:

imageUrl (falls back to global no-image)

dimension1Name, dimension1Value, dimension2Name, dimension2Value

quantityConstraints.*

minOrderQuantity, maxOrderQuantity, orderQuantityStep

translations.*

JavaScript

Global object

Components/ProductMixList/Default.js exposes:

Liquid binds it via Alpine:

<section
  x-data='productmixlistdefault.initComponent(items, currentPage, totalPages, totalCount, pageSize, errorMessages)'
>

initComponent

Factory that creates the Alpine state for the Product Mix list.

Stores pagination/sort state (currentPage, pageSize, totalCount, totalPages, currentSort) and the errorMessages mapping.

Keeps per-variant debounce/cancel maps (debounceMap, cancelTokenMap) used by quantity updates.

init

Runs on Alpine mount.

Seeds each row's UI quantity item._qty from quantityConstraints.additive.minimum (fallback 0).

Builds the initial pagination window via generatePages().

getItemByVariantId

Returns the item in items whose productVariantId matches the given id.

getQuantity

Returns the current UI quantity (_qty) for a variant id as a number (0 when missing).

sendSelectEvent

Sends a GA selectItem event for a clicked product, using prepareListProducts(...) plus the provided list name and position.

formatDate

Formats a date value as an el-GR "day month year" string via Intl.DateTimeFormat. Returns an empty string for missing/invalid dates.

fetchList

Loads a page from the backend via servicesreusabledefault.fetchProductMixProducts(params).

Sends page, pageSize, and orderBy (current sort) as query params.

On a non-2xx/failed response, shows a toast error and stops.

On success, replaces items, re-seeds _qty, updates pagination from paginationDTO, and rebuilds pages.

handleSort

Updates currentSort and refetches starting at page 1.

redirectToState

Handles pagination navigation.

When a valid newPage is passed (within range and different from the current page), calls fetchList(newPage) and scrolls to top.

Otherwise reloads the current URL.

generatePages

Builds the pages array used by the pagination UI.

Shows all pages when totalPages <= 7; otherwise uses a condensed window with "..." placeholders around the current page.

increaseQuantity

Increases a row's _qty by quantityConstraints.additive.step (clamped to maximum), then schedules a debounced update via debounceUpdateProduct(...).

decreaseQuantity

Decreases a row's _qty by quantityConstraints.additive.step (clamped to minimum), then schedules a debounced update via debounceUpdateProduct(...).

debounceUpdateProduct

Debounces a quantity update per variant (default 800ms).

Clears any pending timer and cancels any in-flight request for that variant before scheduling updateQuantity(..., false).

updateQuantity

Validates/persists a quantity change for a variant.

Updates _qty immediately for UI feedback.

When useDebounce is true, delegates to debounceUpdateProduct(...) and returns.

Otherwise cancels any previous request, calls servicesreusabledefault.updateProductQuantity(data, cancelToken), and on success sets _qty from response.data.additiveQuantity.value; on failure it shows a toast.

handleAddToCart

Adds a row to the cart via servicesreusabledefault.addToCart(...).

Skips when product id / variant id / quantity are missing.

On lineFailures, maps each failure to translated messages via getLineFailureMessages(...) and shows them as toasts.

Refreshes _qty / quantityConstraints from the added cart item.

getLineFailureMessages

Converts backend line-failure error types into translated toast messages.

Returns a single combined, de-duplicated message prefixed by the product title.

Global Alpine stores (used by ProductMixList)

Alpine.store("toast") (user feedback)

Used for:

fetch errors

quantity validation errors

add-to-cart errors and line-failure details

Services / API calls

GET /api/product-mix/my-list?page=<n>&pageSize=<n>&orderBy=<sort>

Fetches paginated/sorted product mix items.

servicesreusabledefault.fetchProductMixProducts(params)

Wrapper for GET /api/product-mix/my-list?... used by fetchList.

servicesreusabledefault.updateProductQuantity({ productId, productVariantId, requestedQuantity }, cancelToken)

Validates/clamps the requested quantity and returns the computed additive quantity.

servicesreusabledefault.addToCart(productId, productVariantId, quantity, currentPrice, originalPrice)

Adds a single product mix item to cart.

Dependencies

Alpine.js

Browser fetch (for list paging)

Theme utilities:

prepareListProducts(...)

sendGAEvent(...)

Alpine stores:

toast

Notes

This component uses servicesreusabledefault.addToCart(...) for add-to-cart.

The entire component is gated by GlobalData.Settings.EnableMyProductMix.

The Liquid template duplicates pagination logic that also exists in JS (generatePages()), so they must stay in sync.

The table uses 2 render paths:

server-rendered {% for item in items %}

client-rendered <template x-for="..."> after any fetch/update (updateFlag).

Extras

Template behavior (Liquid + Alpine)

Builds an errorMessages JSON string in Liquid and passes it to initComponent(...).

Renders an empty state when items is empty.

Renders pagination UI with aria labels for previous/next and individual pages.

Disables quantity controls when quantityConstraints.additive.isValid == false.

Uses a global no-image fallback from GlobalData.Settings.noImage (fallback to theme Assets/images/no-image.svg).

Loading state

This component has no skeleton loading state: it renders its content directly, and no --loading modifier class is applied.

ProductMixList

Purpose#

Inputs (model contract)#

Model shape (storefront example)#

Required fields#

Optional fields#

JavaScript#

Global object#

initComponent#

init#

getItemByVariantId#

getQuantity#

sendSelectEvent#

formatDate#

fetchList#

handleSort#

redirectToState#

generatePages#

increaseQuantity#

decreaseQuantity#

debounceUpdateProduct#

updateQuantity#

handleAddToCart#

getLineFailureMessages#

Global Alpine stores (used by ProductMixList)#

Alpine.store("toast") (user feedback)#

Services / API calls#

Dependencies#

Notes#

Extras#

Template behavior (Liquid + Alpine)#

Loading state#