Utils

Mimeeq configurator provides both basic and advances tools which allow for control over most configurator functions.

Below we list utils which cover the most basic use cases and common requirements.

For more advances utils please refer to our Web API documentation.

Image Generation

Method: mimeeqApp.utils.takeScreenshot()

You can use this method to generate an image from the current canvas state, method is called screenshot, but you are able to control the size of the image and the type, png or jpg.

Parameters

Name	Type	Default	Description
extension	string	png	Extension of file. Based on that image has set proper MimeType. Accepts only png, jpg and jpeg.
size	number	3072	Width of image. Height will be set automatically based on canvas aspect ratio. On iOS powered mobiles it may cause reloads if size is bigger then 2k. We recommend 1k for ecommerce.
backgroundColor	string	#FFFFFF	If provided, will be used for background on jpeg file. Accepts only hex and hexa format.
customDimensions	{ width: number, height: number }		If provided, it will overwrite size and/or automatically calculated height.
autozoom	boolean	false	If true, it will do zoom out on canvas to make sure product if fully visible.
cameraReset	boolean	false	If true, it will reset camera to initial position (position from 1st camera at scene settings).
customCameraPosition	string		JSON string with custom camera position eg. {"position":{"x":-1.4827425522188151,"y":1.7029008083897266,"z":-5.265221131049244},"alpha":4.4378873110317825,"beta":1.3718508759876076,"target":{"x":0,"y":0.600077748298645,"z":0},"radius":5.580080441792618}

Usage

mimeeqApp.utils
  .takeScreenshot(
    extension,
    size,
    backgroundColor,
    customDimensions,
    autozoom,
    cameraReset,
    customCameraPosition,
  )
  .then((base64) => {
    console.log('Image:', base64);
  });

This method returns Promise with base64 string with image, or thrown an error in case of failure.

Short Code Generation

Method: mimeeqApp.utils.getShortcode(productId, configurationCode)

When called it will generate unique shortcode for given productId-configurationCode pair. For the same pair shortcode is always the same.

caution

This method works only for regular products. In case of modular Short Code is returned as part of mimeeq-add-to-cart event. Since version 6.7.0 short code is returned in mimeeq-add-to-cart for all products. It's preferable to use that value instead of calling this method.

Parameters

Name	Type	Default	Description
productId	string		Id of product
configurationCode	string		Selected configuration code string

Usage

mimeeqApp.utils.getShortcode(productId, configurationCode).then((shortCode) => {
  console.log('Short code:', shortCode);
});

This method returns Promise with generated short code, or thrown an error in case of failure.

Set price

Method: mimeeqApp.utils.setPrice(pricing)

Use this method to set price, currency and delivery time in days (note delivery time only works if product is using MCP for pricing with the parameter enabled in the product admin panel). It accepts price object from API. It should be used in conjunction with "Use Custom Pricing" enabled at embed snippet. If you are using our component it's use-custom-pricing attribute otherwise data-mimeeq-use-custom-pricing.

note

We recommend listening for event mimeeq-price-change, so you know when to request the price from our API end point. Additionally, we recommend using the price field loader to indicate when prices are being changed, see Events from Host Site

caution

Currently, our modular product configurator does not accept price for components. You can only set the total price.

Parameters

Name	Type	Default	Description
pricing	ProductPriceResponse		Mimeeq Pricing data

Usage Set Price

mimeeqApp.utils.setPrice(pricing);

To set only price and currency

mimeeqApp.utils.setPrice({
  price: 5318,
  unitPrice: 5318,
  currency: 'EUR',
});

To also set delivery data

mimeeqApp.utils.setPrice({
  price: 5318,
  unitPrice: 5318,
  currency: 'PLN',
  deliveryTime: 7,
});

In case you are using quantity breaks it may look like this

mimeeqApp.utils.setPrice({
  price: 338,
  unitPrice: 338,
  currency: 'EUR',
  deliveryTime: 25,
  levels: [
    {
      quantityMin: '1',
      quantityMax: 4,
      discount: 0,
      price: 338,
      pricePart: 0,
    },
    {
      quantityMin: '5',
      quantityMax: 9,
      discount: 0.2,
      price: 270,
      pricePart: 0,
    },
    {
      quantityMin: '10',
      discount: 0.27,
      price: 248,
      pricePart: 0,
    },
  ],
});

Example

Set pricing settings

Method: mimeeqApp.utils.setPricingSettings(minimumFractionDigits, maximumFractionDigits)

This allows you to set the decimal places in the mimeeq configurator

Parameters

Name	Type	Default	Description
minimumFractionDigits	number	2	Minimum number of decimal places
maximumFractionDigits	number	2	Selected configuration code string

Usage

mimeeqApp.utils.setPricingSettings(minimumFractionDigits, maximumFractionDigits);

Close configurator

Method: mimeeqApp.utils.closeConfigurator()

caution

This method is deprecated and works only for legacy embed version. If you are using web component please use its hide() method instead

Calling this method will close and unmount from DOM tree first occurrence of mimeeq configurator. It works for all types of configurator.

Usage

mimeeqApp.utils.closeConfigurator();

Show modular

Method: mimeeqApp.utils.showModular()

caution

This method is deprecated and works only for legacy embed version. If you are using web component please use its show() method instead

Calling this method will mount and render modular configurator. It may be used while you use single Modular configurator with option Render modular configurator at page load disabled while generating code snippet.

Usage

mimeeqApp.utils.showModular();

Show configurator

Method: mimeeqApp.utils.showConfigurator()

caution

This method is deprecated and works only for legacy embed version. If you are using web component please use its show() method instead

Calling this method will mount and render regular configurator. It may be used while you use single configuartor with option Render modular configurator at page load disabled while generating code snippet.

Usage

mimeeqApp.utils.showConfigurator();

Mark option by block name and option code

Method: mimeeqApp.actions.markOptionByBlockNameAndOptionCode(blockName, optionCode)

Calling this method will mark option by block name and option code.

Parameters

Name	Type	Default	Description
blockName	string		Name of block
optionCode	string		Code of option

Usage

await mimeeqApp.actions.markOptionByBlockNameAndOptionCode(blockName, optionCode);

Returns

This method returns Promise with no value.

Selecting multiple options

By default, calling this method can select only single option. In case you want to change multiple options at the same time you need to call it in the loop or sequentially (if some options are dependant on each other, for example, type of material and then color, set the parent first and then dependant option). Setting options needs to be asynchronous.

// Calling each set option action manually

document.addEventListener(
  'mimeeq-3d-product-initialized',
  async () => {
    await mimeeqApp.actions.markOptionByBlockNameAndOptionCode('Fabric', '6550_PINK');
    await mimeeqApp.actions.markOptionByBlockNameAndOptionCode('Frame', 'GREY');
    await mimeeqApp.actions.markOptionByBlockNameAndOptionCode('Arms', 'ARM');
  },
  { once: true },
);

Example with using configuration array and loop.

// example list of codeBlock, value pairs, keep in mind order of the modified blocks (parent -> child)

const config = [
  {
    codeBlock: 'Fabric',
    value: '6550_PINK',
  },
  {
    codeBlock: 'Frame',
    value: 'GREY',
  },
  {
    codeBlock: 'Arms',
    value: 'ARM',
  },
];

// We iterate over config array

const setConfig = (config) => {
  document.addEventListener(
    'mimeeq-3d-product-initialized',
    async () => {
      for (const option of config) {
        await mimeeqApp.actions.markOptionByBlockNameAndOptionCode(option.codeBlock, option.value);
      }
    },
    { once: true },
  );
};

setConfig(config);

Trigger add to cart / show finish panel

Method: mimeeqApp.utils.addToCart()

Calling this method will run add to cart or finish logic.

Usage

mimeeqApp.utils.addToCart();