SOLIDWORKS Sell

SOLIDWORKS Sell

    ›Widget And Controls API

    Widget And Controls API

    • Introduction
    • API

    Guides

    • Getting Started
    • Camera Strip
    • Get BOM
    • Tools
    • AR
    • Orders
    • Custom CSS
    • Shopify Integration

    API

    HTML SETUP -- Initializing the SWSELL widget

    1. Place an <iframe> tag in your page's body
    2. Include widget/api.js
    3. Call the SWSELL.init() method using the following properties:
    • host -- domain where your script is hosted (eg: "tenant.solidworks-sell.com")
    • iframeid -- id of your widget iframe (eg: "swsellwidget") [REQUIRED]
    • product -- unique identifier of your product (eg: "eyeglasses", "123ABC") [REQUIRED]
    • customer -- unique identifier of your customer (eg: cart id, user id, session id) [REQUIRED]
    • template -- unique id, name or template url slug in your SOLIDWORKS Sell environment [REQUIRED]
    • selection -- sets group selection to true or false. Selection is set to true when an Object is passed in (eg: {"highlighting": false}) [OPTIONAL]
    • selection.highlighting -- enables highlighting when switching groups [OPTIONAL]
    <!-- START place within BODY element -->
    <iframe id="{{iframeid}}" src="//{{host}}/client/widget"></iframe>
    
    <script src="//{{host}}/widget/api.js"></script>
    <script type="text/javascript">
        SWSELL.init({
            iframeid:  /*iframeid*/  ,
            product:   /*product*/   ,
            customer:  /*customer*/  ,
            template:  /*template*/  ,
            selection: /*true, false, Object*/
            }
        );
    </script>
    <!-- END place within BODY element -->
    

    Then configuration control elements can be added outside of the iframe.

    <iframe id="{{iframeid}}" width="650" height="650" frameborder="0" scrolling="no" src="//{{host}}/client/widget"></iframe>
    
    <ul data-controls="groups"></ul>
    <ul data-controls="options"></ul>
    <ul data-controls="parts"></ul>
    <ul data-controls="materials"></ul>
    
    <script src="//{{host}}/widget/api.js"></script>
    <script type="text/javascript">
        SWSELL.init({
            iframeid:  /*iframeid*/  ,
            product:   /*product*/   ,
            customer:  /*customer*/  ,
            template:  /*template*/  ,
            selection: /*true, false, Object*/
            }
        );
    </script>
    

    HTML SETUP -- Optional Attributes

    Displaying lists as dropdown menu examples:

    <ul data-controls="options-drop-down"></ul>
    <ul data-controls="materials-drop-down"></ul>
    

    Persistent / static options menu examples:

    <ul data-controls="options" data-static="true"></ul>
    <!-- Available as a dropdown -->
    <ul data-controls="options-drop-down" data-static="true"></ul>
    <!-- Add a data-group attribute to specify a group belonging to the Option Set -->
    <ul data-controls="options-drop-down" data-static="true" data-group="{{Group Name}}"></ul>
    

    HTML SETUP -- "Tooling" Controls

    The following classes can be added to your DOM elements to implement tool controls:

    • toggleThreeSixty -- toggles 360 degree animation
    • toggleRulerVisible -- toggles the ruler visibility
      • use with toggleUnitOfLength -- imperial/metric indicator
    • setView -- sets the view (requires data attribute 'data-view')
    • showHelpVideo -- Displays an embedded video in a modal dialog
    • historyButton -- Undo and redo configuration changes
    • reset -- Reset to default configuration
    • fullScreen -- Expand widget to fullscreen
    • arQuickLook -- "AR" button for AR-enabled templates on tenants who have AR activated

    Examples:

    <div class="toggleThreeSixty"></div>
    
    <!-- Ruler -->
    <div class="toggleRulerVisible"></div>
    <div class="toggleUnitOfLength action-btn-unit-system imperial"></div>
    
    <!-- View Controls -->
    <div class="setView" data-view="Default"></div>
    <div class="setView" data-view="X+"></div>
    <div class="setView" data-view="X-"></div>
    <div class="setView" data-view="Y+"></div>
    <div class="setView" data-view="Z+"></div>
    
    <!-- Help Modal -->
    <div class="showHelpVideo">HELP</div>
    
    <!-- Configuration History -->
    <div class="historyButton undo">UNDO</div>
    <div class="reset"></div>
    <div class="historyButton redo">REDO</div>
    
    <div class="fullScreen"></div>
    
    <a class="arQuickLook"></a>
    

    API Functions

    • init(options) -- initializes widget and binds control elements
    JavaScript
    SWSELL.init({
    iframeid: /*iframeid*/ ,
    product: /*product*/ ,
    customer: /*customer*/ ,
    template: /*template*/ ,
    selection: /*true, false, Object*/
    });
    • reloadWidget(options) -- same options as init(), but re-initializes the widget iframe (eg: switching templates).
      • Note: To transfer configurations between templates that share the same materials, you would need to implement the transferConfig: true setting:
    JavaScript
    SWSELL.reloadWidget({
    template: /*template*/ ,
    customer: /*customer*/ ,
    product: /*product*/ ,
    transferConfig: true
    });
    • getBOM -- getter for the Bill of Materials of the current, in scene, configuration
      • Optionally, you can query the BOM for a specific group with a {group: "group-name"} object
    JavaScript
    SWSELL.getBOM(/*optional group query*/);
    • randomize -- Generates a completely random configuration permutation
    JavaScript
    SWSELL.randomize();
    SWSELL.randomize("group-name");
    SWSELL.randomize("group-name1,group-name2");
    SWSELL.randomize(["group-name1", "group-name2"]);
    • takeSnapshot -- "camera" screen-grab control
      • Requires an event listener for the message sent to the parent window
      • Documentation: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
    JavaScript
    SWSELL.takeSnapshot();

    window.addEventListener("message", receiveMessage, false);

    function receiveMessage (event) {
    // Check for serialized snapshot
    const isBase64 = /^([A-Za-z0-9+/]{4})*([A-Za-z0-9+/]{3}=|[A-Za-z0-9+/]{2}==)?$/.test(event.data);
    if (!isBase64) return;
    const image = `data:image/png;base64,${event.data}`;
    }
    • order(options) -- place an order. This is also available via the Server API.
      • options not required; isTest defaults to false
      • returns an orderId, image, and an array of skus for reference
    JavaScript
    SWSELL.order();
    SWSELL.order({isTest: /*true/false*/});
    • orderConfirm -- use this to confirm your order. This is also available via the Server API.
    JavaScript
    SWSELL.orderConfirm({orderId: /*orderId from above*/});
    • orderCancel -- use this to cancel your order. This is also available via the Server API.
    JavaScript
    SWSELL.orderCancel({orderId: /*orderId from above*/});
    • toggleSelection -- Toggles the ability to select objects in the scene with click/touch
    JavaScript
    SWSELL.toggleSelection();
    • getSelectedGroup -- Returns the name of the currently selected group
    JavaScript
    SWSELL.getSelectedGroup();
    • getView()/setView({view}) -- Programmatically allows you to get a view, save it, and come back to that view
    JavaScript
    const view = await SWSELL.getView();
    SWSELL.setView(view);
    • exportSceneAsGLTF -- downloads a GLTF binary resource in your browser
    JavaScript
    SWSELL.exportSceneAsGLTF({binary: true});
    • fullScreen -- Expands page to full screen
    JavaScript
    SWSELL.fullScreen();
    ← IntroductionGetting Started →