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.
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
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.
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.
Create a top level Menu with the following values in the input fields:
Label – (Whatever you use to name the menu. I use Configurable UI.
Action – LOAD_MENU
Type – SECTIONAL
Add new items in the “Configurable UI” group. Items have to be set to type: BUTTON, TOOLBAR, or TOOLBAR_ACTIONS.
If the item is a BUTTON, it will appear as a single button.
If the item is a TOOLBAR, it will appear as a group and any items in that group will be buttons.
If the item is a TOOLBAR_ACTION, it has to have a component in the codebase that will init.
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.
Add a Tabbed Menu to the left side of the configurator.
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.
Add metadata, “text”, used to set the title of the tab.
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”
The landing page graphic can be overridden by adding a graphic to the Client Branding assets in 3D Cloud.
Create a new asset and use the following values.
Purpose – ctaNoProducts
Label – Landing Page CTA No Products
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