Widget and Controls API

The SOLIDWORKS Sell Widget and Controls API can be integrated into your html page with a little bit of Javascript magic. At a minimum, you must add the Widget API script (api.js) and the widget <iframe> tag into the parent page (your html). This script will initialize the widget iframe and, additionally, expose the SWSELL function to the global scope, allowing you to control the widget from the your page. The script will bind clickable EVENTS in the parent page that can control the widget by class assignment.

The widget is initialized from the SWSELL.init() method. At a minimum this requires the iframeElementID, a product identifier, and a unique customer id. The template (name or id) is required to display your template. If you do not supply it in the init() method, you can chose to initialize the template later with the reloadWidget method.

Additionally, you can assign your own 'controls' data attributes to UL elements on your parent page that will dynamically update your DOM with all the configurable variation option and navigation elements. See below for an example of the DOM structure.

SOLIDWORKS Sell provides some custom CSS style sheets (api.css) that can be utilized to style the widget controls. This stylesheet must be included in the <HEAD> element of the parent page.

Playground

The Widget API Playground is a page set up for you to view examples and experiment with configurations. To start, you will be prompted to enter the domain where your script is hosted. To initialize the widget, you must specify a product id, a unique customer id (generally a cart id, session id or some other unique identifier in your system), and a template id (or template name). The playground will dynamically generate a product id and a customer id should you not provide these. Additionally, you can specify an initial set-up with a configuration and/or option drivers in JSON format.

Available Methods

Events

Basic Setup


			<html>
				<head>
					<link rel="stylesheet" type="text/css" href="//{{host}}/css/api.css">
				</head>
				<body>
					<iframe id='{{iframeElementID}}' 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([/*iframeElementID*/, /*product*/, /*customer*/, /*template*/, /*config*/, /*option-drivers*/, /*selection*/, /*pins*/]);
					</script>
				</body>
			</html>
		

With the inclusion of the unordered list elements (<ul data-controls></div>) above in your page, they will be populated with list items after the widget is initialized.

Description of DOM elements


				<ul class="groups"></ul>
				<ul class="parts"></ul>
				<ul class="materials">
					<li class="updatewidget" data-template="" data-product="" data-customer="" data-part="" data-group="">
				</ul>
			

Advanced examples:

To add the camera strip into your page, add the 'data-camera-strip' attribute to a div and position on your page:
				<div data-camera-strip></div>
				
			

How to create a simple link to a new template:
				<div data-template="{{template}}" data-customer="{{customer}}" data-product="{{product}}" class="getPersonalization updatewidget">LINK TO A CUSTOMIZATION</div>
				
			

How to create a clickable image with drivers and specific config:
				
						<img data-template="{{template}}"
						data-customer="{{customer}}"
						data-product="{{product}}"
						data-drivers='{"0": "group name"}'
						data-config='[{
						"part": "part A",
						"group": "group A",
						"material": "18K White Gold" },
						{ "part": "part B",
						"group": "group B",
						"material": "Tanzanite" },
						{"part": "part C",
						"group": "group C",
						"material": "18K White Gold"}]'
						class="getPersonalization updatewidget"
						src="https://www.prodpad.com/wp-content/uploads/man.jpg"/>