Modular Custom Pricing

Use this when an embed has Use Custom Pricing enabled and the current product is modular.

mimeeqApp.utils.setPrice() supports two modular pricing modes:

• Total-only pricing - pass one total price for the whole modular scene.
• Element-level pricing - pass prices for individual modular element item keys, so the elements list and modular total can use the same breakdown.

Total-only modular pricing

Use total-only pricing when your external pricing system returns one final total for the current modular scene.

document.addEventListener('mimeeq-price-change', async () => {
  const priceData = await getExternalModularTotal();

  window.mimeeqApp.utils.setPrice({
    price: priceData.total,
    currency: priceData.currency,
    vatType: 'EXCL_VAT',
    levels: [],
  });
});

You can also use the backend-style total alias:

window.mimeeqApp.utils.setPrice({
  total: 1250,
  compareTotal: 1500,
  currency: 'USD',
  levels: [],
});

When no element prices are provided, pricing.totalPriceModular falls back to price or total.

Element-level modular pricing

Use element-level pricing when your external pricing system can return prices for the individual modular items in the scene.

Each modular element price must be keyed by the Mimeeq item key:

${productId}|${configurationCode}

You can read current item keys from mimeeqApp.observers.modular.elements. Each element exposes itemKey, productId, configurationCode, qty, variantCode, and selected option data.

let modularElements = [];

window.mimeeqApp.observers.modular.elements.subscribe(({ newValue }) => {
  modularElements = newValue || [];
});

document.addEventListener('mimeeq-price-change', async () => {
  const priceData = await getExternalModularPrices(
    modularElements.map((element) => ({
      itemKey: element.itemKey,
      productId: element.productId,
      configurationCode: element.configurationCode,
      qty: element.qty,
      selectedOptions: element.options,
    })),
  );

  window.mimeeqApp.utils.setPrice({
    currency: priceData.currency,
    compareTotal: priceData.compareTotal,
    products: priceData.products.map((item) => ({
      id: item.itemKey,
      price: item.price,
      unitPrice: item.unitPrice,
      unitComparePrice: item.unitComparePrice,
      currency: priceData.currency,
      levels: item.levels || [],
      vatType: priceData.vatType,
    })),
  });
});

The products array also accepts the same shape returned by Mimeeq's total-pricing endpoint, where each item has an id field.

Passing a modular price map directly

Instead of an array, you can pass a modularPrices map directly.

window.mimeeqApp.utils.setPrice({
  currency: 'USD',
  modularPrices: {
    'product-id-1|CONFIG_CODE_1': {
      price: 500,
      currency: 'USD',
      levels: [],
    },
    'product-id-2|CONFIG_CODE_2': {
      price: 750,
      currency: 'USD',
      levels: [],
    },
  },
});

For element-level modular pricing, each element price should be the line total for that item key in the scene, before the configurator order quantity is applied. Mimeeq sums the element prices and multiplies the result by the current order quantity.

Notes

• Calling setPrice() on a modular product clears previous modular element prices before applying the new payload. This prevents stale element prices from masking a new total-only price.
• If products or modularPrices are passed, the modular total is derived from matching current scene elements.
• If no matching element prices are passed, the modular total falls back to price or total.
• compareTotal sets the modular compare total.