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

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(items, currentPage, totalPages, totalCount, pageSize, errorMessages)`

What it does

Creates and returns the Alpine state object.

Stores list/pagination state and error message mapping.

`init()`

What it does

Initializes each item._qty to item.quantityConstraints.additive.minimum (or 0).

Generates the pagination pages array.

`getItemByVariantId(variantId)`

What it does

Finds an item in items[] by productVariantId.

`getQuantity(variantId)`

What it does

Returns numeric _qty for an item.

`sendSelectEvent(product, listName, position)`

What it does

Sends GA4 selectItem when a product row is clicked.

Key behaviors / edge cases

Uses prepareListProducts([product]), so it expects the item shape to be compatible with list GA mapping.

`formatDate(dateValue)`

What it does

Formats a UTC date string into a human-readable date using Intl.DateTimeFormat('el-GR').

`fetchList(page)`

What it does

Fetches a page of items from servicesreusabledefault.fetchProductMixProducts(...).

Reinitializes _qty and pagination fields from the response.

Key behaviors / edge cases

On failure it shows a toast and keeps the existing list.

Sets updateFlag = true so the table renders using the x-for version.

`handleSort(value)`

What it does

Updates currentSort and refetches page 1.

`redirectToState(newPage = null)`

What it does

Navigates pagination:

if newPage is valid → fetches that page and scrolls to top

else → refreshes the current page

`generatePages()`

What it does

Generates a “sliding window” pages array for pagination.

Key behaviors / edge cases

Mirrors the Liquid-side pages logic:

<= 7 pages: show all

near start: 1 2 3 4 5 ... N

near end: 1 ... N-4 N-3 N-2 N-1 N

middle: 1 ... (p-1) p (p+1) ... N

`increaseQuantity(variantId)`

What it does

Increases item._qty by step until maximum and debounces validation.

`decreaseQuantity(variantId)`

What it does

Decreases item._qty by step down to minimum and debounces validation.

`debounceUpdateProduct(newQuantity, variantId, delay = 800)`

What it does

Debounces updateQuantity(...) per item.

Cancels any in-flight validation request for the same item.

`updateQuantity(newQuantity, variantId, useDebounce = true)`

What it does

Updates UI quantity immediately.

Optionally debounces, then validates quantity rules via servicesreusabledefault.updateProductQuantity(...).

Key behaviors / edge cases

Uses axios.CancelToken.source() to prevent request races.

Clears existing toasts before the validation request.

On success, replaces _qty with the backend-normalized additiveQuantity.value.

`handleAddToCart(product)`

What it does

Adds the item to cart via servicesreusabledefault.addToCart(...).

Resets _qty and updates quantityConstraints using the returned cart item.

Key behaviors / edge cases

On failure it shows a generic toast.

If response.data.lineFailures[] exists, it maps error types to translated messages via getLineFailureMessages(...).

`getLineFailureMessages(lineFailure, productTitle)`

What it does

Maps line failure errorTypes[] values to translated error messages.

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

Global Alpine stores (used by ProductMixList)

`$store.toast` (user feedback)

Used for:

fetch errors

quantity validation errors

add-to-cart errors and line-failure details

Services / API calls

servicesreusabledefault.fetchProductMixProducts(params)

Fetches paginated/sorted product mix items.

servicesreusabledefault.updateProductQuantity(data, cancelToken)

Validates and normalizes the requested quantity.

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

Adds a single product mix item to cart.

Dependencies

Alpine.js

axios (cancel tokens)

Theme utilities:

prepareListProducts(...)

sendGAEvent(...)

Alpine stores:

toast

Notes

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

ProductMixList

Purpose#

Inputs (model contract)#

Model shape (storefront example)#

Required fields#

Optional fields#

JavaScript#

Global object#

initComponent(items, currentPage, totalPages, totalCount, pageSize, errorMessages)#

init()#

getItemByVariantId(variantId)#

getQuantity(variantId)#

sendSelectEvent(product, listName, position)#

formatDate(dateValue)#

fetchList(page)#

handleSort(value)#

redirectToState(newPage = null)#

generatePages()#

increaseQuantity(variantId)#

decreaseQuantity(variantId)#

debounceUpdateProduct(newQuantity, variantId, delay = 800)#

updateQuantity(newQuantity, variantId, useDebounce = true)#

handleAddToCart(product)#

getLineFailureMessages(lineFailure, productTitle)#

Global Alpine stores (used by ProductMixList)#

$store.toast (user feedback)#

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(items, currentPage, totalPages, totalCount, pageSize, errorMessages)`

`init()`

`getItemByVariantId(variantId)`

`getQuantity(variantId)`

`sendSelectEvent(product, listName, position)`

`formatDate(dateValue)`

`fetchList(page)`

`handleSort(value)`

`redirectToState(newPage = null)`

`generatePages()`

`increaseQuantity(variantId)`

`decreaseQuantity(variantId)`

`debounceUpdateProduct(newQuantity, variantId, delay = 800)`

`updateQuantity(newQuantity, variantId, useDebounce = true)`

`handleAddToCart(product)`

`getLineFailureMessages(lineFailure, productTitle)`

Global Alpine stores (used by ProductMixList)

`$store.toast` (user feedback)

Services / API calls

Dependencies

Notes

Extras

Template behavior (Liquid + Alpine)