Configurator-sdk

Import the required packages and their dependencies within the <script> tag element. In this specific implementation, the following libraries have been included for support:

• Three.js
• GSAP
• CurrencyFormatter

Usage

<script type="importmap">
    {
    "imports": {
        "three": "https://unpkg.com/[email protected]/build/three.module.js",
        "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
    }
    }
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/currencyformatter.js/2.2.0/currencyFormatter.min.js"></script>
<script type="module">
    import * as THREE from "three";
    import { OrbitControls } from "three/addons/controls/OrbitControls.js";
    import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
    import { DRACOLoader } from "three/addons/loaders/DRACOLoader.js";

    window.addEventListener("DOMContentLoaded", () => {
        window.THREEJS = { THREE, OrbitControls, DRACOLoader, GLTFLoader };
        window.GSAP = { gsap };

        var script = document.createElement("script");
        script.src = "https://cdn.jsdelivr.net/npm/configurator-sdk/bundle.js";
        document.head.appendChild(script);

        script.addEventListener("load", async () => {
          await configuratorSDK.init({ apiKey: "f7785af7ec2307fc021135889e396191"})
        })
    });
</script>

Embed Custom element

To integrate and display custom elements generated by the configurator-sdk package, you can utilize the web component. To render this custom element within your HTML page, simply include it within the tag

<product-element productId="8b326565-e3c1-4188-a092-180e78593e6c"></product-element>

Methods

getProductPrice

Description: The getProductPrice method is used to retrieve the price amount of a product from the loaded model. This method returns the price amount in the selected currency.

Usage:

configuratorSDK.getProductPrice()

Note:

• Ensure that the model is loaded before calling this method to obtain accurate pricing information.

Example:

configuratorSDK.getProductPrice()
=> {price: {DKK: 13910.40}}   //DKK - selected currency

getProductImages

Description: The getProductImages method is used to retrieve product images that can be previewed on the user site. This method returns an array of image URLs representing the product from the loaded model.

Usage:

configuratorSDK.getProductImages()

Note:

• Ensure that the model is loaded before calling this method to obtain product images.

Example:

configuratorSDK.getProductImages()
=> {productImages: [....]}

addToCart

Description: The addToCart method is used to retrieve productInfo, price, current product attributes value and product images that can be rendered in the add to cart screen in the user site.

Usage:

configuratorSDK.getProductImages()

Note:

• Ensure that the model is loaded before calling this method to obtain product details.

Example:

configuratorSDK.addToCart()
=> {product: {..}, price:{..}, attributes:{..}, productImages: []}

setLocale

Description: The setLocale method is used to set language in the user site.

Usage:

configuratorSDK.setLocale("dk")

params:
locale - String // "dk", "en"

Example:

await configuratorSDK.setLocale("dk")