API
HTML SETUP -- Initializing the SWSELL widget
- Place an <iframe> tag in your page's body
- Include
widget/api.js
- 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
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:
- Note: To transfer configurations between templates that share the same materials, you would need to implement the
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
- Optionally, you can query the BOM for a specific group with a
SWSELL.getBOM(/*optional group query*/);
- randomize -- Generates a completely random configuration permutation
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
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
SWSELL.order();
SWSELL.order({isTest: /*true/false*/});
- orderConfirm -- use this to confirm your order. This is also available via the Server API.
SWSELL.orderConfirm({orderId: /*orderId from above*/});
- orderCancel -- use this to cancel your order. This is also available via the Server API.
SWSELL.orderCancel({orderId: /*orderId from above*/});
- toggleSelection -- Toggles the ability to select objects in the scene with click/touch
SWSELL.toggleSelection();
- getSelectedGroup -- Returns the name of the currently selected group
SWSELL.getSelectedGroup();
- getView()/setView({view}) -- Programmatically allows you to get a view, save it, and come back to that view
const view = await SWSELL.getView();
SWSELL.setView(view);
- exportSceneAsGLTF -- downloads a GLTF binary resource in your browser
SWSELL.exportSceneAsGLTF({binary: true});
- fullScreen -- Expands page to full screen
SWSELL.fullScreen();