CDN

Global variable MxtModularConfigurator is created, access classes from there, i.e.

Exported classes are shown at https://wla-modularconfig.3dcloud.io/7.14.0/docs/modules.html

NPM

Modules are published on npm as esNext modules with full typing support. To install, use:

This will allow you to import the ModularConfigurator via:

Basic Usage

Advanced Options

Load product on initial load

You can provide information as to what should initially load in the scene. If you provide any of this information, it will skip the inspiration UI and go straight to 3d, loading the starting product specified. There are several ways to do this (listed in priority order, so if you happen to provide multiple, this is the order that they are evaluated):

• product - provide a fully enumerated Marxent product object

• productId - Provide a Marxent product id. Loads the default configuration options on that product

• sku - provide the sku of the product. If there are multiple products with the same sku, it uses the first one. IF you have a 3d cloud product configurator for this product, do NOT use this option, use productConfigSku

• productConfigSku - provide the Marxent product id for your 3d cloud product configurator product. Additionally, provide the sku(s) that it should resolve to. This is only necessary if you are attempting to load the non-default sku on the product.

• productIdAndAssembly - Provide a Marxent product id, as well as the Marxent product ids of child steps to provide a custom configuration of the product. IF you have a 3d cloud product configurator for this product, do NOT use this option, use productConfigSku

• skuAndAssembly - provide the sku of the product, as well as the skus of child steps to provide a custom configuration of the product. If there are multiple products with the same sku, it uses the first one. IF you have a 3d cloud product configurator for this product, do NOT use this option, use productConfigSku

URL Params for initial product load

There is an exported enum UrlParams for your usage. Details:

UrlParams.PRODUCT_ID = "productId"

Map from url params to runtime config options:

Setting up multiple categories or families of products

If you have a multiple sets of products that you want to show in your Modular Configurator, you may want to ask us to split up the data. We will do so using a construct called Menu data. Each product set will be grouped under a menu label, or id. We will provide you with the menu label for each product set and it should be used in your initialization options, i.e.

Add to cart

Customizing screenshot extension/filename

Customizing screenshot resolution

By default, the Screenshot tool renders an image at the size of the on-screen display. To increase or decrease the resolution (and therefore, the detail) of the image, you can specify a multiplier, which will mutliply the size of the rendered image download.

Beware that mutliplying the dimensions may also change its download size by the square of the multiplier, depending on the filetype extension that is defined. For example, a multiplier of 2 may increase the file size by 4.

Fullscreen

We have a fullscreen button that hides the UI and makes the rendering canvas take up our entire element.

If you need to do additional work on your page to make the parent element of the modular configurator take up the entire screen, hook into the following callbacks:

Availability

Availability defaults to not shown, pricing defaults to shown.

Example of non-defaults:

All Options