@combeenation/custom-code-utils

Custom code utils

This repository contains utils for creating Combeenation configurators with custom code implementation.

Documentation

For more detailed documentation see https://custom-code.docs.combeenation.com/

Installation

The custom code utils are available as npm package.

npm install @combeenation/custom-code-utils

Usage

The custom code utils package contains functionalities for interacting with a Combeenation configurator, such as:

• manipulating components and controls
• utilize the 3D Viewer API
  • Combeenation (based on Babylon.js)
  • Shapediver
• general configurator tasks (eg: customized checkout, resource upload,...)

All these functionalities can be found inside dedicated modules or component objects.
For example, when manipulating a component input just import the component in your code and call the desired method.

// See section below on how to retrieve those typings
import { MyComponent } from  './typings/cfgr-defs.generated';
MyComponent.setInput(newCmpValue);

Or to add a custom click event to a control:

CtrlUtils.onCtrlClicked(CtrlNames.JS_CheckoutBtn, () => {
  console.log('button clicked');
});

Typings

Components

To easily interact with components of your editor we provide a dedicated "definitions file". In your configurator editor (draft) you can download the file cfgr-defs.generated.ts in the components menu. Simply paste it in your project and you're ready to go.

Configurator

The package also contains various TS typings which are specific to our configurators.
First there are the typings for all available util methods provided by this repo.
These typings are prefixed with Cbn.CustomCode.

Furthermore the package also provides typings for "publicly" available Combeenation system code.
The system code is present in every configurator and can be consumed/used by custom code.

These system code typings consists of two parts:

• Combeenation system code typings, prefixed with Cbn
• Typings for third party libraries, such as jQuery

Keep in mind that there can be differences between the third party typings and the code that is actually used in the configurator.
For example at the time of writing, jQuery typings came in version 3.3.0 whilst we're actually using 3.1.0 in the system code.
There shouldn't be any major differences regarding the API of those 2 versions but still they can be slightly different.

What does this mean for the consumer?
Take good care when using third party library typings in your custom code and don't blindly trust auto completion & linting in the IDE here.