Migration from Intiaro 3D configurator to Intiaro 360 configurator¶
We’ve prepare simple adapter for all those users that would like to switch from Intiaro 3D configurator to Intiaro 360 configurator without reimplementing whole frontend from scratch. Below you’ll find step by step explanation how to easily migrate from one configuration to another, maintaining currently implemented functionality at the stame time.
Migration process¶
Include required 360 configurator scripts and styles. It is explained in details here: Embedding Intiaro 360 Configurator
<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.4/css/intiaro360configurator.css" rel="stylesheet"/>
...
</head>
<script src="https://libs.intiaro.com/360/configurator/2.4/js/360.min.js" type="text/javascript"></script>
Include adapter script.
<script src="https://libs.intiaro.com/360/adapter/1.0.11/intiaroEmbedAdapter.js" type="text/javascript"></script>
Remove existing Intiaro 3D configurator script
<!-- <script type="text/javascript" src="https://libs.intiaro.com/button/default/1.8.5.0/showInIntiaro.js"></script> -->
And that’s it. You should now be able to use Intiaro 360 configurator using existing Intiaro 3D configurator placeholders and API.
Live Example¶
<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.4/css/intiaro360configurator.css" rel="stylesheet"/>
...
</head>
<!-- <script type="text/javascript" src="https://libs.intiaro.com/button/default/1.8.5.0/showInIntiaro.js"></script> -->
<script src="https://libs.intiaro.com/360/configurator/2.4/js/360.min.js" type="text/javascript"></script>
<script src="https://libs.intiaro.com/360/adapter/1.0.11/intiaroEmbedAdapter.js" type="text/javascript"></script>
<a class="_showInIntiaroButton_"
data-web="true"
data-width="1300"
data-height="800"
data-embed="true"
data-app="IntiaroWLShowcase"
data-id="8763"
data-lang="en"
data-layout="default">
Using 360 configurator API¶
Since You migrated to 360 configurator, You can now use it’s API. In order to do that however, You’ll need it’s reference. You can get it using getIntiaroPlayer(<player-id>); function. It is described in details here: Intiaro 360 Configurator API documentation.
Getting configurator reference
Adapter script creates 360 configurator inside original 3D configurator placeholder. This newly created 360 configurator will have id which is equal to original 3D configurator id with additional “adapter_” prefix which is added due to compatibility reasons. To make it clear: If 3D configurator id was “someId”, 360 configurator id will be “adapter_someID” and if 3D configurator placeholder div had no id, 360 configurator id is going to be “adapter_”.
<a class="" data-web="true" data-width="1300" data-height="800" data-embed="true" data-app="IntiaroWLShowcase" data-id="8763" data-lang="en" data-layout="default" style="display: block; width: 1300px; height: 800px;">
<div id="adapter_" data-customer-id="IntiaroWLShowcase" data-product-id="8763" class="intiaroConfigurator" processed="true">
Knowing configurator id allows You to use getIntiaroPlayer() function and remaining API.
Getting product picture
<!-- 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("adapter_");
// 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 ulr = pictureConfigurator.getFrameUrl(30);
// update image src with our url
let image = document.getElementById("picture");
image.src = ulr;
};
</script>