MXT Sectional Configurator API


Browser Support

Chrome

51

May 2016

Firefox

54

Jun 2017

Edge

14

Aug 2016

Safari

10

Sep 2016

Opera

38 

Jun 2016

Internet Explorer

Not supported

 


Installing Dependencies

CDN

Import Your Resources

Import the sectional configurator logic and styling by adding the following tags to your webpage.

Use the minified JS url when deploying to production environments, or running performance tests in other environments. the “src” values for the tags below will be provided to you.

<script type="text/javascript" src="{importUrl}.min.js"></script> <link href="{importUrl}.css" rel="stylesheet" type="text/css"/>

Use the un-minified JS url when deploying to development or staging environments

<script type="text/javascript" src="{importUrl}.js"></script> <link href="{importUrl}.css" rel="stylesheet" type="text/css"/>

Available Resources

This package offers types tools for interacting with the Sectional Configurator SDK, listed below.

Each item is exported below the namespace given to the library MxtSectionalConfig. As a result, you’ll need to access them as members of that namespace

  • MxtSectionalConfigurator → MxtSectionalConfig.MxtSectionalConfigurator

  • MxtSectionalConfiguratorOptions → MxtSectionalConfig.MxtSectionalConfiguratorOptions

  • ManifestServices → MxtSectionalConfig.ManifestServices

 

NPM

We will set you up with credentials that give you read access to necessary repositories.

**Credentials for Nexus Server will be sent separately.

  • Private NPM Registry: https://nexus.3dcloud.io/repository/npm-group/

  • Repo: @mxt/mxt-sectionalconfig

Build Requirements

  • SCSS is provided and must be converted to CSS

  • Default icon assets are provided in assets folder and if using webpack, must be bundled in appropriately using file-loader

  • By default, other assets, such as assets for i18n, shaders, and sqlite readers are stored in our CDN and read from there.

  • Must be built in an environment that handles process.env (webpack, gulp, react, etc), otherwise use CDN (Reference the CDN instruction above. Please reach out with any questions you may have!).

Error loading urls from SCSS files

If using webpack to build your solution including our SDK, you may run into the issues documented here: https://webpack.js.org/loaders/sass-loader/#problems-with-url . Make sure you add the missing url rewriting using the resolve-url-loader. Place it before sass-loader in the loader chain.

 

Build the .npmrc

Add the following code to a new .npmrc file at the root of your project.

always-auth=true registry=https://nexus.3dcloud.io/repository/npm-group/ _auth=<insert token here>

 

Open a terminal window and use the provided nexus credentials to generate your token with the following command. Substitute the token placeholder (including the “<“ & “>”) in the .npmrc with the output of that command.

 

Finally, add the spins dependency to your package.json.

 


Basic Usage

Configurator init with options. ? denotes an optional setting. A div with the id of sectional-config-container must be provided to inject the webgl canvas.

Initialization Options

Below is a complete list of the configurable options that are available to you when initializing

SKU Resolution

Bidirectional SKU resolution to go between a Marxent Product and a client SKU (and vice versa). To resolve SKUs in a custom manner, provide a SKU resolver class to the following spec, at initialization.

 

A basic example:

 

This basic, generic, example does not account for things like the same SKU in multiple places on an assembly. For example, if you have a fabric cover with the same sku that can be used for pillows OR the frame of a sofa, you may need explicit ordering of skus to know what step to put things on.

**Make sure to add the “Tabbed Menu” described in “Customizing Content with 3D Cloud” in order to add/remove or style products in the scene.

--

Terminology

  • Root Product - The top level product the contains an assembly. For example, a Chair, or a Fireplace, etc

  • Assembly Step - a configurable unit of the product; for example, the legs on a chair, or the type of stone used inside the fireplace


Data Customizations

** These customizations will require access to the implementation in 3D Cloud.

  1. Create a top level Menu with the following values in the input fields:

    1. Label – (Whatever you use to name the menu. I use Configurable UI.

    2. Action – LOAD_MENU

    3. Type – SECTIONAL

  2. Add new items in the “Configurable UI” group. Items have to be set to type: BUTTON, TOOLBAR, or TOOLBAR_ACTIONS.

    1. If the item is a BUTTON, it will appear as a single button.

    2. If the item is a TOOLBAR, it will appear as a group and any items in that group will be buttons.

    3. If the item is a TOOLBAR_ACTION, it has to have a component in the codebase that will init.

    4. Items at this level will need to have a position to be set in the UI. Adding the menuPosition metadata key, you will assign the position of the button/group. Please see below for the usable values to input.

  3. Add a Tabbed Menu to the left side of the configurator.

    1. Create a new menu in 3D Cloud, “Tabbed View”, with type SCENE_CONFIGURATOR_TOOLBAR_TABS. Then create a submenu item for each of the following.

      1. “Product View”: [Type: PRODUCT_BROWSE, ParentMenu: Tabbed View]

        1. Add metadata, “text”, used to set the title of the tab.

        2. Set the order that this tab should appear in the tab bar.

      2. “Style View”: [Type: STYLEALL_CONFIGURATOR, ParentMenu: Tabbed View]

        1. Add metadata, “text”, used to set the title of the tab.

        2. Set the order that this tab should appear in the tab bar.

Usable menu types:

  • TOOLBAR

  • TOOLBAR_ACTIONS

  • BUTTON

Usable metadata properties:

  • activeIcon

    • Used for adding an image that is the active state of an icon.

  • inverseImage

    • Used for adding an image that is the inverse or alternative state of an image.

  • menuPosition

    • Used to set the position for button group on top of the WebGL canvas. Usable enum values below.

      • TOP_LEFT

      • TOP_CENTER

      • TOP_RIGHT

      • BOTTOM_LEFT

      • BOTTOM_CENTER

      • BOTTOM_RIGHT

  • toggle

    • Used to declare a data attribute as a toggle. Usable enum values below.

      • activeSelection

--

Adding Custom Landing Page Content for “No Products CTA”

  1. The landing page graphic can be overridden by adding a graphic to the Client Branding assets in 3D Cloud.

  2. Create a new asset and use the following values.

    1. Purpose – ctaNoProducts

    2. Label – Landing Page CTA No Products

  3. Upload the image you want to override the default image.

 

Customized Automatic Styling

If you would like to automatically style other assemblies in the scene based on a style selection, provide a styling plugin on initialization (a new class that implementing IStylingPlugin). This is also a great place to add additional analytics tracking.

Default StylingPlugin


Using the SDK & Event Communicator

Registering Events

You may register callbacks for a variety of UI, product, and other notification events, allowing you to act on them.

Available events include:

Description

Response Data

Description

Response Data

  • This event is tied to the fullscreen button.

  • This event is tied to the help button.

  • This event is tied to the selection of a product in the scene by clicking.

  • This event is tied to the reset button.

  • This event is tied to the share button.

  • Callback functions will be provided the following data:

    • image : string

      • This is the base64 canvas at the time the share button is clicked.

    • url: string

      • This is the project url at the time the share button is clicked, containing all configurations of the active products.

  • This event is tied to the act of adding a product to the scene using SdkManager.addProduct.

  • You should update your menu after this event.

  • This event is tied to the act of adding a product to the scene using SdkManager.initProducts.

  • You should update your menu after this event.

  • This event is tied to the act of adding a product to the scene using SdkManager.deleteAllProducts.

  • You should update your menu after this event.

  • This event is tied to the act of adding a product to the scene using SdkManager.deleteProduct.

  • You should update your menu after this event.

Events List

Subscribing Directly to Events

If you prefer receive notification of events using event listeners instead of callbacks, that is also possible. This would be the suggested method when operating in an Iframe. The list of events below can be subscribed to.


SDK Manager Class

You may optionally provide a custom SdkManager on init. This class contains methods that you can use to interact with the sectional configurator canvas