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

productMixList

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

Stores pagination/sort state and the errorMessages mapping.

init

Initializes UI-only per-row fields.

Sets each item._qty using getStartQuantity(item).

fetchList

Loads another page using fetch() from /api/product-mix/my-list.

On 401 it redirects to login.

On failure sets error = true and clears items.

handleSort

Updates currentSort and refetches page 1.

goToPage

Client-side pagination navigation (guards invalid pages and prevents redundant fetches).

Fetches the requested page (if valid) and scrolls to top.

visiblePages

Getter that returns up to 5 page numbers centered around currentPage.

formatPrice

Formats prices using Intl.NumberFormat(...) and window.__storeCurrency.

canAddToCart

Returns false when the item can't be ordered or is out of stock (when sellOutOfStock === false).

getStartQuantity

Returns the starting quantity for an item (min/step/1).

increaseQuantity

Increases item._qty by orderQuantityStep up to maxOrderQuantity.

decreaseQuantity

Decreases item._qty by orderQuantityStep down to minOrderQuantity.

updateQuantity

Handles manual typing into the quantity input.

Clamps to [minOrderQuantity, maxOrderQuantity].

addToCart

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

Uses Alpine.store("toast") for error feedback.

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

getLineFailureMessages

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

ProductMixList

Purpose#

Inputs (model contract)#

Model shape (storefront example)#

Required fields#

Optional fields#

JavaScript#

Global object#

productMixList#

init#

fetchList#

handleSort#

goToPage#

visiblePages#

formatPrice#

canAddToCart#

getStartQuantity#

increaseQuantity#

decreaseQuantity#

updateQuantity#

addToCart#

getLineFailureMessages#

Global Alpine stores (used by ProductMixList)#

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

Services / API calls#

Dependencies#

Notes#

Extras#

Template behavior (Liquid + Alpine)#