Intiaro 360 Configurator API documentation¶
Introduction¶
There are two main ways that the Intiaro WebView interface can be used.
Image API - this API will retrieve a single static image based on the provided parameters.
WebView Player - this API allows you to use JavaScript to set player configuration.
Image API¶
Image API equips you to use Intiaro API to generate images with a simple GET request. URLs to the image can be used as main product images, thumbnails in other platforms as social media, e-commerce, landing pages, emails, etc.
Usage:¶
https://webview.intiaro.com/api/v09/360/<product_id>/?<list_of_query_parameters>
Required arguments:
product_id - is a unique ID of a product. All variations with the same product_id are considered a single product
Supported query parameters:
params - list of attribute_id:value_id pairs, defining product features, see examples below:
params=size:small,fabric:gray,finish:oak
means:
attribute_id is size and value_id is small
attribute_id is fabric and value_id is gray
attribute_id is finish and value_id is oak
Each attribute_id may be used in a URL only once, but a value_id may be shared between attributes. For instance, seat_cushion attribute might have “gray” as a value, and back_cushion attribute might have the same value.
angle - number of degrees (0-360) product will be rotated horizontally. 0 will result in a front-view product image.
width [optional] - width of the image in pixels. Height is calculated automatically with the preserved aspect ratio.
silent_fail [optional] - silent_fail is set to true. When the unsupported configuration is requested, API will return a fallback image (ie. “Visualisation is not supported”) or will raise a 404 HTTP response.
dummy - used for debugging purposes. If set to true, the player will generate an image with the requested product ID and parameters. No actual data is needed.
See examples below:¶
Dummy mode example
Example configuration rotated by 30 degrees from default angle
The same product with different params and no rotation
Image API and advanced product configuration¶
Sometimes product configuration is just too complex to pass all params through the url. It is however possible to overcome this limitation by using it’s custom configuration id instead of complete list of parameters. In order to get current configuration id, you will first need to get player instance using getIntiaroPlayer() function. Then you will be able to get current configuration id using saveConfiguration().
Please visit WebView Player API section of this page to learn more about how to get configuration id.
Usage:¶
If you already know configuration id you can use blow url to produce product image.
https://webview.intiaro.com/360/product/<customer_id>/<product_id>/custom_config_id/<custom_configuration_id>/resolution_x/<width>/resolution_y/<height>/angle/<rotation>/
Required arguments:
customer_id - is your unique ID obtained from Intiaro
product_id - is a unique ID of a product. All variations with the same product_id are considered a single product
custom_configuration_id - configuration id retrived by saveConfiguration() function.
width / height - resulting pircure width and height
rotation - product rotation in degrees (supported angles 0-360, step = 10)
Supported query parameters:
attachment - if set to true, forces browser to download image as a file instead of displaying it in browser window.
See examples below:¶
Example configuration with configuration id instead of list of params
https://webview.intiaro.com/360/product/IntiaroWLShowcase/13934/custom_config_id/e399e6cfaea10f65e5c97680d0c034ab/resolution_x/1024/resolution_y/1024/angle/0/
High resolution picture example
https://webview.intiaro.com/360/product/IntiaroWLShowcase/13934/custom_config_id/e399e6cfaea10f65e5c97680d0c034ab/resolution_x/3072/resolution_y/3072/angle/0/
WebView Player API¶
WebView Player API is a JavaScript interface that allows you to control the player. Similar to image JavaScript slider libraries.
Intiaro 360 Player requires CSS in the head section and a JavaScript file placed at the end of the body tag in an HTML document. The JavaScript file will search for div with class “intiaro360player” and replace each of them with the player instance. For best user experience on mobile devices, it is also recommended that you add a viewport meta tag with particular size and scale settings. Please find example of player placeholder below:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link href="https://libs.intiaro.com/360/configurator/2.5/css/intiaro360configurator.css" rel="stylesheet"/>
...
</head>
<body>
<div class="intiaro360player" id="html-player-id" data-customer-id="IntiaroWLShowcase" data-product-id="13934">Content before 360 loader</div>
And at the bottom of the page:
<script src="https://libs.intiaro.com/360/configurator/2.5/js/360.min.js" type="text/javascript" charset="UTF-8"></script>
Finally, you will need proper player placeholder somewhere in your html page. Any div containing proper class and required data attributes is a proper 360 configurator placeholder div. This is where 360 configurator instance is going to be created. The 360 configurator will take the available width and height of parent DOM element. If not set, it will try to use with and height that fit best to product picture. To set its dimensions, it is best to place it inside a div with proper size styles. Please note that minimum player width should not be lower than 300px.
Take a look at the example below:
<style>
.widthLimit{
width: 95vw;
min-width: 300px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
</style>
<div class = "widthLimit">
<div class="intiaro360player"
id="html-player-id"
data-customer-id="example"
data-product-id="1234"
data-params="arg1:val1,arg2:val2,arg3:val3"
data-max-width="800"
data-max-height="800"
>Content before 360 loaded</div>
</div>
Div with “intiaro360player” will be replaced by player instance.
Data attributes:¶
Intiaro 360 configurator requires set of data attributes that will determine it’s functionality and settings. Some attributes are required and some are only optiona.
Please take a lokk at a complete list below:
data-customer-id - your ID obtained from Intiaro.
data-product-id - product ID obtained from Intiaro.
data-client-product-id - if provided, it is going to be used instead of “data-product-id”. It allows lauching configurator using client SKU instead of custom Intiaro product id.
data-params [depending on product] - comma-separated key: value strings of product features.
data-configuration-id - custom configuration id to be displayed (obtained with saveConfiguration() function explained later )
data-resolution-x [depending on product] - width of a zoomed image. Note that currently only square resolutions of 3072 or 4096 are supported.
data-resolution-y [depending on product] - height of zoomed image.
data-max-width [optional] - max-width that player will obtain in fullscreen 360 view mode. In normal window mode, this will be 100% responsive. Note that different proportions of the player might be limited. By default, only squares are supported.
data-max-height [optional] - max height that player will obtain in fullscreen 360 view mode. In normal mode, the image will be 100% responsive.
data-menu-fixed [optional] - a flag indicating that the configuration menu should be fixed. In this mode, all menu sections are opened and cannot be collapsed.
data-tearsheet-template-id [optional] - the id of the template to be used by the tearsheet generator module. It allows for generating whitelabeled document version instead of the default one.
data-attribute-max-height [optional] - The parameter limits the max-height of the attribute container if there is more than one attribute in the attributes group.
data-allow-only-one-attribute [optional] - The parameter provides exclusive access to one attribute at a time. Selecting another attribute in the same attribute group automatically closes the previously opened one.
data-open-summary-pdf-in-modal [optional] - the parameter determines how to open the pdf with summary: default in the external window (parameter with ‘false’ value) or in modal window (parameter with ‘true’ value).
data-language [optional] - the language of the menu and viewer. It allows launching configurator in a language other than the english. French optional (fr)
Data attributes namespacing:¶
In order to avoid conflicts with any other data attributes that may already be present on client side web page, it is possible to add custom namespace attribute. In order to do that it is required to add intiaroConfig object somewhere before 360.min.js is added to your page. This object allows global configuration for all 360 configurator instances.
intiaroConfig = {
dataAttrbutesNamespace: "intiaro"
}
<script src="https://libs.intiaro.com/360/configurator/2.5/js/360.min.js" type="text/javascript" charset="UTF-8"></script>
currenntly supported intiaroConfig keys:¶
dataAttrbutesNamespace - allows adding 360 configurator data attributes namespace so that data attribute “data-product-id” would be “data-KEYVALUE-product-id”.
API¶
getIntiaroPlayer()¶
Player instances can be retrieved by the getIntiaroPlayer method. See example below:
var player = getIntiaroPlayer("html-player-id");
getIntiaroController()¶
Similarly, it is possible to retrieve the controller component with the getIntiaroController method. See example below:
var controller = getIntiaroController("html-player-id");
With the player instance, you can use the methods below:
setAngle()¶
player.setAngle(angle, callback);
If it returns null, set the angle of the player - Euler angles - clockwise. Due to the cache mechanism, only multiples of ten are available. A callback is optional.
getAngle()¶
player.getAngle();
Returns an integer with the current angle of the player (Euler angles) rotated clockwise.
getFrameUrl(angle)¶
player.getFrameUrl(angle);
Returns url leading to the product image with a given angle. Only angles from 0 - 360 degrees are supported. Angle parameter must also be divisible by 10.
IMPORTANT: Please be aware that ange parameter defines degree from starting angle and not actual product rotation angle. This means if by default product is not facing the camera, angle = 0 will not represent a product facing the camera either. Please take a look at the example in the lower area of this page.
setParams()¶
player.setParams(attributes, silentFail, callback);
Set attribute values and display the resulting render in the player. Attributes object is a dictionary with attribute_id as a key and choice_id as a value. If the second (optional, true by default) argument is false, method setAttributes will raise an exception if given attributes are not supported (i.e. visualization is not available). The optional callback method will be called once the first frame of the new product configuration is loaded.
Example of attribute object:
{"fabric":"gray", "size":"large", "finish": "oak"}
getParams()¶
player.getParams();
Returns current global configuration of the player instance. Returned object will only contain attribute:value dictionary. This function does not contain any information about sectional structure of the product.
Example of configuration object:
{"fabric":"gray", "size":"large", "finish": "oak"}
getChangedParams()¶
player.getChangedParams();
Returns a dictionary of product atributes together with their current values.
IMPORTANT: Dictionary contains only attributes that were manually changed by the user or direct setParam() function call and are available ( not restricted by current configuration for example: Function will not return welt fabric value if current product configuration has “no welts” option selected.).
Example of configuration object:
{"fabric":"gray", "size":"large", "finish": "oak"}
getChangedParamsObjects()¶
player.getChangedParamsObjects();
This function is similar to getChangedParams() however it returns a list of objects containing changed attributes and their current choices data.
IMPORTANT: List contains only objects with attributes and choices that were manually changed by the user or direct setParam() function call and are available ( not restricted by current configuration for example: Function will not return welt fabric value if current product configuration has “no welts” option selected.).
Example of configuration object:
[
{attribute: {…}, choice: {…}},
{attribute: {…}, choice: {…}}
]
Attribute and choice details:
attribue : {
name: "attribute label / name",
slug: "attribute slug",
// other optional keys may bepresent
}
choice: {
name: "attribute label / name",
slug: "attribute slug",
// other optional keys may bepresent
}
getProductOptions()¶
player.getProductOptions(addSku, successCallback, errorCallback);
This function returns a list of all available product options for the current configuration.
Use addSku parameter to add sku to the returned list. If set to true, function will return sku of the element if it is available.
Success callback is required and will be called with a list of products as a parameter.
Error callback is optional and will be called if something goes wrong, for example if there is no internet connection.
A single element has several properties, including:
id
instance_id
name
sku
attributes[]
Example of configuration object:
{
"elements":[
{
"id":"0002",
"instance_id":"0000_0000000002",
"attributes":[
{
"slug":"arm-style",
"name":"Arm Style",
"attribute_group":"Select_your_Arm_Style",
"choice":{
"slug":"1-track",
"name":"track"
}
},
{
"slug":"body-fabric",
"name":"Body Fabric",
"attribute_group":"group_body",
"choice":{
"slug":"0000-01",
"name":"0000-01"
}
}
],
"name":"Corner Chair",
"sku":"0000-02A" //if first parameter is true and element contains sku it will be returned
},
{
"id":"0001",
"instance_id":"0000_0000000001",
"attributes":[
{
"slug":"arm-style",
"name":"Arm Style",
"attribute_group":"Select_your_Arm_Style",
"choice":{
"slug":"1-track",
"name":"track"
}
},
{
"slug":"body-fabric",
"name":"Body Fabric",
"attribute_group":"group_body",
"choice":{
"slug":"0000-01",
"name":"0000-01"
}
}
],
"name":"Love Seat",
"sku":"0000-01A" //if first parameter is true and element contains sku it will be returned
}
]
}
getModularConfiguration()¶
player.getModularConfiguration( add_SKU, successCallback, failCallback );
Asynchronous function that returns current configuration of the player instance. If add_SKU is set to true it will contain additional “element_sku” containing SKU data.
Example of configuration object containing SKU data:
{
"elements":{
"LA Loveseat":{
"variables":{
"nor_back_height":"nor_37_inch",
"nor_deck_style":"nor_black_denim",
"nor_leg_finish":"beachwood_bea",
"nor_arm_style":"nor_track_arm_b5",
},
"element_id":"9743",
"neighbours":{
"right":"Square Corner"
},
"element_sku":"140757 LA loveseat A1-B5-C5-D17-E2"
},
"RA Loveseat":{
"variables":{
"nor_back_height":"nor_37_inch",
"nor_deck_style":"nor_black_denim",
"nor_leg_finish":"beachwood_bea",
"nor_arm_style":"nor_track_arm_b5",
},
"element_id":"9744",
"neighbours":{
"left":"Square Corner"
},
"element_sku":"140756 RA loveseat A1-B5-C5-D17-E2"
},
"Square Corner":{
"variables":{
"nor_back_height":"nor_37_inch",
"nor_deck_style":"nor_black_denim",
"nor_leg_finish":"beachwood_bea",
"nor_arm_style":"nor_track_arm_b5",
},
"element_id":"9754",
"neighbours":{
"right":"RA Loveseat",
"left":"LA Loveseat"
},
"element_sku":"140791 sqare corner A1-C6-D17-E2"
}
},
"product_id":"6846"
}
saveConfiguration()¶
player.saveConfiguration( successCallback, failCallback );
Asynchronous function that returns string with id of current configuration. It may be used to initialize 360 configurator or advanced configurator with particular ( previously saved ) configuration.
Example of use: (please check “Saving and using saved modular configuration “ section for more details)
player.saveConfiguration( (customConfigurationId) => {
console.log(customConfigurationId);
});
getProductSummaryUrl()¶
player.getProductSummaryUrl( anglesArray, successCallback, failCallback) ;
Asynchronous function that returns string with url to product summary pdf containing product configuration and optional images.
angles - one dimentional array of integers defining angles from which prodocut pictures are going to be taken.
successCallback - function that is going to be called when url is ready.
failCallback - function called upon failure
Example of use:
configurator.getProductSummaryUrl([0, 30, 90], (url)=>{ console.log(url); }, ()=>{ console.log('error'); });
getImageUrl()¶
player.getImageUrl(asAttachment, angle, successCallback, failCallback);
Returns string with URL to high resolution product image.
asAttachment - Determines is asAttachment header is added to server response. If set to true, most browsers will download the file after the link is clicked, if it is set to false the image will be opened in the browser directly
angle - Number of degrees (0-360) product will be rotated horizontally. 0 will result in a front-view product image. The value will be rounded to nearest 10
successCallback - Function that is going to be called when url is ready. Url is pass as an argument to this function.
failCallback - Function called upon failure
isSectionalBuilderOpen¶
player.isSectionalBuilderOpen;
Returns boolean. True if the the 360 is in sectional build mode. False otherwise.
download3DModel()¶
player.download3DModel(successCallback, failCallback);
Asynchronous function that returns string with url to product product 3d model.
successCallback - function that is going to be called when url is ready.
failCallback - function called upon failure
Example of use:
player.download3DModel( (url) => {onModelUrlReceived(url)} );
getTopDownViewUrl()¶
player.getTopDownViewUrl(angle, dpi, successCallback, failCallback);
Asynchronous function that returns string with url to product product 3d model.
angle - product rotation angle (0-360). Only values divisible by 10 are supported.
dpi - floating point number between 0 and 40. It tells how many output pixels should represent 1 inch of phisical furniture. Please see example below.
successCallback - function that is going to be called when url is ready.
failCallback - function called upon failure
Example dpi calculation:
Let's say we would like represent 1m wide furniture on an image that is 100px wide.
1m = 39.3701 inch (100cm/2.54)
dpi = 100 pixels / 39.3701 inch = 2.54
Example of use:
player.getTopDownViewUrl(90, 10, (url) => {onImageReady(url)} );
showProductSummaryPdf()¶
player.showProductSummaryPdf(successCallback, failCallback);
The showProductSummaryPdf() method integrates a fullscreen modal popup to display PDF summaries directly on the page, without requiring a download. This modal encompasses the entire page that hosts the configurator, ensuring the user remains on the current page.
It features a header with a close button (X) for easy and intuitive navigation.
Please take a look at the example below:
<button id="show-product-summary-pdf-button">Open PDF popup</button>
<div id="show-product-summary-pdf-button-example" class="intiaroConfigurator"
data-customer-id="IntiaroWLShowcase" data-product-id="13934">Loading...</div>
<script>
const showProductSummaryPdfButton = document.querySelector("#show-product-summary-pdf-button");
const showProductSummaryPdfButtonDefaultLabel = "Open PDF popup";
showProductSummaryPdfButton.addEventListener("click",()=>{
const player = getIntiaroPlayer("show-product-summary-pdf-button-example");
showProductSummaryPdfButton.innerText = "Loading...";
player.showProductSummaryPdf( ()=> {
showProductSummaryPdfButton.innerText = showProductSummaryPdfButtonDefaultLabel;
});
});
</script>
registerListener()¶
player.registerListener(eventName, callback);
controller.registerListener(eventName, callback);
Allows registering a listener on a particular event of the player or controller instance.
Available events:
event: isSectionalBuilderOpen¶
Event fired when the player enters or exits the sectional builder mode.
Example of use:
var customCallback = function(data){ console.log(data); };
getIntiaroPlayer("p1").registerListener("isSectionalBuilderOpen", customCallback );
event: configurationChanged¶
Event fired with every change of current configuration of the product. Current configuration ( modular ) is passed to callback function.
Example of use:
var customCallback = function(config){ console.log(JSON.stringify(config)); };
getIntiaroPlayer("p1").registerListener("configurationChanged", customCallback );
event: paramsChanged¶
Event fired with every change of current configuration of the product. Object containing current product attributes and their values ( same as with getParams() function ) is passed to callback function.
Example of use:
var customCallback = function(config){ console.log(JSON.stringify(config)); };
getIntiaroPlayer("p1").registerListener("paramsChanged", customCallback );
Dynamic content¶
Intiaro Player can also be instantiated dynamically by calling async IntiaroPlayer.create(“<id>”) or async IntiaroPlayer.create(“#<id>”) where <id> stands for the ID of the element where the player should be instantiated.
Please take a look at the example below:
<div id="htmlplayer3" data-customer-id="IntiaroWLShowcase" data-product-id="13934" data-max-width="1024" data-max-height="1024">Press the add button to create a player</div>
<button id="addPlayer">Create the player instance</button>
<script>
document.getElementById("addPlayer").onclick = async function(){
var newIntiaroPlayer = await IntiaroPlayer.create("htmlplayer3"); // or await IntiaroPlayer.create("#htmlplayer3");
}
</script>
Use cases live examples¶
Allowed angles¶
This option enables users to specify the available angles in which the product can be rotated. Only angles from -350 to 360 degrees are supported. Angle parameter must also be divisible by 10.
Example of data attribute:
data-allowed-angles=[-40,-30,-20,-10,0,10,20,30,40]
Getting current configuration and listening to configuration changes¶
Using available API it is possible to get current product configuration or global configuration at any time as well as listen to any configuration changes.
Here is how it’s done:
<!-- Configurator placeholder -->
<div id="WorkingWithConfigurationExample" class="intiaroConfigurator" data-customer-id="IntiaroWLShowcase" data-product-id="13934"> Configurator placeholder </div>
<!-- Trigger buttons and results display placeholders -->
<button id="getGlobalConfigurationButton">Get current global configuration</button>
<p id="globalConfigurationPlaceholder"></p>
<button id="registerGlobalConfigurationListenerButton">Register global configuration listener</button>
<div id="listeningGlobalIndicator" style="color: red;">Not listening</div>
<p id="globalConfigurationListenerPlaceholder"></p>
<button id="getConfigurationButton">Get current sectional configuration</button>
<p id="sectionalConfigurationPlaceholder"></p>
<button id="registerConfigurationListenerButton">Register sectional configuration listener</button>
<div id="listeningIndicator" style="color: red;">Not listening</div>
<p id="sectionalConfigurationListenerPlaceholder"></p>
<script>
// Global configuration getter - getParams()
var getGlobalConfigurationButton = document.getElementById("getGlobalConfigurationButton");
getGlobalConfigurationButton.onclick = () => {
var player = getIntiaroPlayer("WorkingWithConfigurationExample");
let globalConfiguration = player.getParams();
document.getElementById("globalConfigurationPlaceholder").innerHTML = JSON.stringify(globalConfiguration);
}
// Global configuration listener - event: paramsChanged
var registerGlobalConfigurationListenerButton = document.getElementById("registerGlobalConfigurationListenerButton");
registerGlobalConfigurationListenerButton.onclick = () => {
var player = getIntiaroPlayer("WorkingWithConfigurationExample");
let indicator = document.getElementById("listeningGlobalIndicator");
indicator.innerHTML = "Listening. Please change configuration to see the result below.";
indicator.style.color = "green";
player.registerListener("paramsChanged", (globalConfiguration) => {
document.getElementById("globalConfigurationListenerPlaceholder").innerHTML = JSON.stringify(globalConfiguration);
} );
}
// Sectional configuration getter - getModularConfiguration()
var getConfigurationButton = document.getElementById("getConfigurationButton");
getConfigurationButton.onclick = () => {
var player = getIntiaroPlayer("WorkingWithConfigurationExample");
player.getModularConfiguration( true,
(sectionalConfiguration)=>{
document.getElementById("sectionalConfigurationPlaceholder").innerHTML = JSON.stringify(sectionalConfiguration);
},
(error)=>{
console.log("error");
console.log(error);
});
}
// Sectional configuration listener - event: configurationChanged
var registerConfigurationListenerButton = document.getElementById("registerConfigurationListenerButton");
registerConfigurationListenerButton.onclick = () => {
var player = getIntiaroPlayer("WorkingWithConfigurationExample");
let indicator = document.getElementById("listeningIndicator");
indicator.innerHTML = "Listening. Please change configuration to see the result below.";
indicator.style.color = "green";
player.registerListener("configurationChanged", (sectionalConfiguration) => {
document.getElementById("sectionalConfigurationListenerPlaceholder").innerHTML = JSON.stringify(sectionalConfiguration);
} );
}
</script>
Live example¶
Reset configuration¶
We can create a simple functionality that will allow us to reset the configuration to its initial state.
For example, we can run this action by clicking a button.
Here is how it’s done:
<div id="IntiaroResetConfiguration" data-customer-id="IntiaroWLShowcase" data-product-id="13934"> Loading... </div>
<button id="resetConfigurationButton">Reset Configuration</button>
…
<script>
IntiaroConfigurator.create("IntiaroResetConfiguration").then((configuratorInstance)=>{
const defaultParams = configuratorInstance.viewer.getParams();
//declare a reset function
const resetConfiguration = () =>{
configuratorInstance.viewer.setParams(defaultParams);
}
//create a button click event
document.querySelector("#resetConfigurationButton").addEventListener("click", resetConfiguration);
})
</script>
Select a different choice, then click a Reset Button below to set the default configuration.
Live example¶
Displaying configuration changes¶
Sometimes it is required to perform certain action when product configuration chages. In this particular example we’re going to manually create a configurator and then listen to configuration changes. Our callback function will then use getChangedParamsObjects() function to display list of attributes that were changed by the user together with their current choices. Here is how it’s done:
<!-- Configurator placeholder -->
<div id="DynamicListenerExample" data-customer-id="IntiaroWLShowcase" data-product-id="13934"> Configurator placeholder </div>
<!-- Configuration display placeholder -->
<h4>Changed configuration:</h4>
<div id="configDiv" style="min-height: 10px; background-color: #f0fafa; padding: 10px;"></div>
<script>
async function dynamicListenerExample(){
// 1) Create Intiaro configurator and store it's reference in variable.
var intiaroConfigurator = await IntiaroConfigurator.create("DynamicListenerExample");
// 2) Register "configurationChanged" listener callback.
intiaroConfigurator.viewer.registerListener("configurationChanged", (newConfiguration) => {
// 3) Use callback function to display changed product params.
let params = intiaroConfigurator.viewer.getChangedParamsObjects();
displayChangedParams(params);
});
}
dynamicListenerExample();
// Supporting function to display changed product params.
function displayChangedParams(params) {
const configDiv = $("#configDiv");
configDiv.html("");
params.forEach(object => {
configDiv.append( `<p>${object.attribute.name}: ${object.choice.name}</em></p>` );
});
}
</script>
Live example¶
Changed configuration:
Saving and using saved modular configuration¶
It is possible to use previously saved configuration id to initialize Intiaro player with custom configuration.
saveConfiguration() function returns configuration id that may be used with 360 configurator but also advance 3D configurator.
This functionality may be usefull in implementing features like “add to cart” or “add to favourites”.
To demonstrate that, we will do couple of things:
We will use first configurator to change product configuration.
We will then save product configuration with a button click.
And finally we will use saved configuration id to initialize another configurator instance with saved product configuration.
// First we create a configurator that is going to be used to change product configuration that wi will save later.
// This div has got "intiaroConfigurator" class attached to it so configurator is going to be created automatically.
<div class="intiaroConfigurator" id="ModularConfigurationSave" data-customer-id="IntiaroWLShowcase" data-product-id="13934">Content before 360 loader</div>
// We will also use below placeholder div to initialize our confogurator with save configuration id.
// We do not attach "intiaroConfigurator" to it. We will have to launch configurator manually with "IntiaroConfigurator.create("second360Configurator");".
<div id="second360Configurator" data-customer-id="IntiaroWLShowcase" data-product-id="13934">Second configurator will appear here.</div>
// We create simple button that will trigger save configuration script
<button id="save-current-modular-configuration">SAVE CURRENT MODULAR CONFIGURATION</button>
// Finally we write our script
<script>
// Attach button click listener
document.getElementById("save-current-modular-configuration").onclick = function(){
// get refference to first configurator
var intiaroPlayer = getIntiaroPlayer("ModularConfigurationSave");
// use saveConfiguration() function to save current configuration
intiaroPlayer.saveConfiguration( (configId) => {
// store saved configuration id in a variable
var savedConfigurationId = configId;
// attach saved configuration id to "data-product-id" of second configurator and add "data-mode='user_configuration'" attribute
// this will initialize second configurator with saved configuration
var second360Configurator = document.getElementById("second360Configurator");
second360Configurator.setAttribute("data-product-id", savedConfigurationId);
second360Configurator.setAttribute("data-mode", "user_configuration");
// launch second configurator
IntiaroConfigurator.create("second360Configurator");
});
}
</script>
Live example¶
Below you’ll find simple implementation of above code with some changes applied only to better visualize each step of the process.
The core of the algorithm remains the same.
First, please use below configurator to change product properties and then use SAVE CURRENT MODULAR CONFIGURATION button below to get current configuration id.
Getting product picture¶
In this example we are going to display product picture based on currently selected product configuration.
<!-- Product configurator placehorder that will run automatically. -->
<div class="intiaroConfigurator" id="product-picture-demo" data-customer-id="IntiaroWLShowcase" data-product-id="13934">Content before 360 loader</div>
<!-- Button that will trigger our getFrameUrl() function -->
<button id="get-picture">GET PRODUCT PICTURE</button>
<!-- Reulting picture placeholder -->
<h4>Product picture:</h4>
<img id="picture" style="min-height: 10px; background-color: #f0fafa; padding: 10px;"></div>
<script>
// Add button click listener
document.getElementById("get-picture").onclick = function(){
// get refference to configurator
var pictureConfigurator = getIntiaroPlayer("product-picture-demo");
// get picture url.
// We're calling getFrameUrl with angle parameter equal 30. This will produce url to picture of a product facing 30 degrees from default product rotation.
let url = pictureConfigurator.getFrameUrl(30);
// update image src with our url
let image = document.getElementById("picture");
image.src = url;
};
</script>
Product picture:
Generating product summary PDF¶
In this example we are going to request product summary pdf url and supply it to <a> tag to allow downloading by users.
<!-- Intiaro configurator placeholder. It contains "intiaroConfigurator" class which will make it launch atomatically -->
<div id="pdf-configurator"
class="intiaroConfigurator"
data-customer-id="IntiaroWLShowcase"
data-product-id="13934"
> Loading...</div>
<!-- Simple button to trigger pdf creation script -->
<button id="create-pdf" style="margin-top: 20px;">CREATE PDF</button>
<!-- PDF creation status and download div -->
<div id="pdf" style="margin-top: 20px;"></div>
<script>
// Helper function that will supply our pdf download div with correct pdf url.
// We are going to use it as success callback function
function displayURL(url) {
document.getElementById("pdf").innerHTML = `<a href=${url}> Download PDF </a>`;
}
// Helper function that will supply our pdf download div with a message in case pdf creation fails.
// We are going to use it as fail callback function
function displayError() {
document.getElementById("pdf").innerHTML = `Failed`;
}
// Attach click listener to create pdf button
document.getElementById("create-pdf").onclick = function(){
// Display information that pdf generation has started
document.getElementById("pdf").innerHTML = `Generating PDF...`;
// Get reference to Intiaro configurator
var configurator = getIntiaroPlayer("pdf-configurator");
// Define array with pdf images angles
const angles = [0,30,90];
// Use "getProductSummaryUrl" function supplied with agles array and callback functions.
configurator.getProductSummaryUrl(angles, displayURL, displayError);
};
</script>
Getting high resolution product picture¶
In this example we are going to display product picture based on currently selected product configuration.
<!-- Product configurator placehorder that will run automatically. -->
<div class="intiaroConfigurator" id="product-hi-res-picture-demo" data-customer-id="IntiaroWLShowcase" data-product-id="13934">Content before 360 loader</div>
<!-- Button that will trigger our getFrameUrl() function -->
<button id="get-hi-res-picture">GET HIGH RESOLUTION PRODUCT PICTURE</button>
<!-- Reulting picture placeholder -->
<h4>High resolution product picture:</h4>
<img id="highResolutionPicture" style="min-height: 10px; background-color: #f0fafa; padding: 10px;"></div>
<script>
// Add button click listener
document.getElementById("get-hi-res-picture").onclick = function(){
// get refference to configurator
var pictureConfigurator = getIntiaroPlayer("product-hi-res-picture-demo");
let successCallback = (url) =>{
// update image src with our url
let image = document.getElementById("highResolutionPicture");
image.src = url;
}
let failCallback = () =>{
//write error message to the console
console.error("There was an error while getting the image");
}
// get picture url.
// We're calling getImageUrl with angle parameter equal 30. This will produce url to picture of a product facing 30 degrees from default product rotation.
let url = pictureConfigurator.getImageUrl(false, 30, successCallback, failCallback);
};
</script>
High resolution product picture:
Tearsheet widget¶
In this example we are going to use widget to create PDF with configuration product summary.
Where 360 configurator instance is going to be created, you need to use optional attribute ‘data-summary-button’ to start widget. In this example PDF summary will be opened in external window.
<div class="intiaroConfigurator"
id="ActiveSummaryButton"
data-customer-id="IntiaroWLShowcase"
data-product-id="13934"
data-summary-button="true"
>Content before 360 loader</div>
After adding of extra attribute ‘data-open-summary-pdf-in-modal’ PDF summary will be opened in modal window.
<div class="intiaroConfigurator"
id="ActiveSummaryButton"
data-customer-id="IntiaroWLShowcase"
data-product-id="13934"
data-summary-button="true"
data-open-summary-pdf-in-modal="true"
>Content before 360 loader</div>